shadow-items-basic.html (2379B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>focusgroup: shadow DOM items navigation</title> 4 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> 5 <link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="../resources/focusgroup-utils.js"></script> 12 13 <!-- In the scoped focusgroup model the behavior token (e.g. toolbar) must be 14 the first token. The focusgroup scope includes the element with the 15 attribute and its shadow-inclusive descendants. To exercise cross shadow 16 boundary behavior, put the focusgroup on the shadow host itself. --> 17 <div id=host focusgroup="toolbar inline"></div> 18 19 <script> 20 function deepActiveElement(root = document) { 21 let a = root.activeElement; 22 while (a && a.shadowRoot && a.shadowRoot.activeElement) { 23 a = a.shadowRoot.activeElement; 24 } 25 return a; 26 } 27 promise_test(async t => { 28 const host = document.getElementById('host'); 29 const sr = host.attachShadow({mode: 'open'}); 30 sr.innerHTML = ` 31 <button id=item1 tabindex=0>One</button> 32 <button id=item2 tabindex=0>Two</button> 33 <button id=item3 tabindex=0>Three</button>`; 34 const item1 = sr.getElementById('item1'); 35 const item2 = sr.getElementById('item2'); 36 const item3 = sr.getElementById('item3'); 37 38 item1.focus(); 39 assert_equals(sr.activeElement, item1, 'Initial focus on item1 (shadow)'); 40 assert_equals(deepActiveElement(), item1, 'Deep active element is item1'); 41 await sendArrowKey(kArrowRight); 42 assert_equals(sr.activeElement, item2, 'Advance to item2'); 43 assert_equals(deepActiveElement(), item2, 'Deep active element is item2'); 44 45 await sendArrowKey(kArrowRight); 46 assert_equals(sr.activeElement, item3, 'Advance to item3'); 47 assert_equals(deepActiveElement(), item3, 'Deep active element is item3'); 48 49 await sendArrowKey(kArrowRight); 50 assert_equals(sr.activeElement, item3, 'No wrap; remains on item3'); 51 assert_equals(deepActiveElement(), item3, 'Deep active element remains item3'); 52 }, 'Shadow host focusgroup scopes shadow root items for navigation'); 53 </script>