focusability.html (1306B)
1 <!DOCTYPE html> 2 <title>Focusability of form-associated custom elements</title> 3 <link rel="author" title="Michael[tm] Smith" href="mailto:mike@w3.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <x-foo></x-foo> 7 <x-bar tabindex=0></x-bar> 8 <x-baz tabindex=0 disabled></x-baz> 9 <script> 10 test(() => { 11 customElements.define( 12 'x-foo', 13 class Foo extends HTMLElement { 14 static formAssociated = true; 15 } 16 ); 17 const foo = document.querySelector('x-foo'); 18 foo.focus(); 19 assert_false(document.activeElement === foo, 20 "FACE without tabindex is not focusable."); 21 customElements.define( 22 'x-bar', 23 class bar extends HTMLElement { 24 static formAssociated = true; 25 } 26 ); 27 const bar = document.querySelector('x-bar'); 28 bar.focus(); 29 assert_true(document.activeElement === bar, 30 "FACE with tabindex is focusable."); 31 customElements.define( 32 'x-baz', 33 class baz extends HTMLElement { 34 static formAssociated = true; 35 } 36 ); 37 const baz = document.querySelector('x-baz'); 38 baz.focus(); 39 assert_false(document.activeElement === baz, 40 "Disabled FACE with tabindex is not focusable."); 41 }); 42 </script> 43 </html>