focus-navigation-web-component-radio.html (2061B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-vendor.js"></script> 6 <script src="/resources/testdriver-actions.js"></script> 7 <script src="resources/shadow-dom.js"></script> 8 <script src="resources/focus-utils.js"></script> 9 10 <template id="custom-radio"> 11 <span aria-role="radio" tabindex="0">🔘</span> 12 <slot></slot> 13 </template> 14 15 <div tabindex="0" id="start">OUT</div> 16 <form> 17 <custom-radio name="radio" id="A">A</x-radio> 18 <custom-radio name="radio" id="B">B</x-radio> 19 </form> 20 <form> 21 <custom-radio name="radio" id="C">C</x-radio> 22 <custom-radio name="radio" id="D">D</x-radio> 23 </form> 24 <div tabindex="0" id="end">OUT</div> 25 26 <script> 27 const template = document.querySelector('#custom-radio'); 28 29 class CustomRadio extends HTMLElement { 30 constructor() { 31 super(); 32 this.attachShadow({ mode: 'open', delegatesFocus: true }).appendChild( 33 template.content.cloneNode(true), 34 ); 35 } 36 } 37 customElements.define('custom-radio', CustomRadio); 38 39 async function assert_web_component_focus_navigation_forward(elements) { 40 let start = document.getElementById(elements[0]); 41 start.focus(); 42 for (let i = 1; i < elements.length; i++) { 43 await navigateFocusForward(); 44 assert_equals(document.activeElement.id, elements[i]); 45 } 46 } 47 48 async function assert_web_component_focus_navigation_backward(elements) { 49 let end = document.getElementById(elements[elements.length - 1]); 50 end.focus(); 51 for (let i = elements.length - 2; i >= 0; i--) { 52 await navigateFocusBackward(); 53 assert_equals(document.activeElement.id, elements[i]); 54 } 55 } 56 57 promise_test(async () => { 58 let elements = [ 59 'start', 60 'A', 61 'B', 62 'C', 63 'D', 64 'end' 65 ]; 66 67 await assert_web_component_focus_navigation_forward(elements); 68 await assert_web_component_focus_navigation_backward(elements); 69 }, 'Focus for web component input type elements should be bound by <form> inside shadow DOM'); 70 </script>