tabindex-focus-flag.html (4186B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#specially-focusable"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 <div id="default-samples"> 7 <a></a> 8 <a href=""></a> 9 <button></button> 10 <input type="hidden"> 11 <input type="button"> 12 <select><option>abc</option></select> 13 <textarea></textarea> 14 <summary id="summary-out"></summary> 15 <details open><summary id="summary-first"></summary><summary id="summary-second"></summary></details> 16 <div contenteditable="true"></div> 17 <iframe></iframe> 18 <svg><a id="svg-a"></a></svg> 19 <svg><text id="svg-text"></text></svg> 20 <img> 21 </div> 22 <script> 23 setup({ explicit_done: true }); 24 window.addEventListener("load", runTests); 25 26 function runTests() { 27 const defaultList = [ 28 ['a', false], 29 ['a[href]', true], 30 ['button', true], 31 ['input[type="hidden"]', false], 32 ['input[type="button"]', true], 33 ['select', true], 34 ['textarea', true], 35 ['#summary-out', false], 36 ['#summary-first', true], 37 ['#summary-second', false], 38 ['[contenteditable]', true], 39 ['iframe', true], 40 ['#svg-a', false], 41 ['#svg-text', false], 42 ['img', false], 43 ]; 44 for (entry of defaultList) { 45 test(() => { 46 var element = document.querySelector('#default-samples ' + entry[0]); 47 element.focus(); 48 if (entry[1]) 49 assert_equals(document.activeElement, element); 50 else 51 assert_not_equals(document.activeElement, element); 52 }, entry[0] + ' should ' + (entry[1] ? '' : 'not ') + 'be focusable by default.'); 53 } 54 55 runTests_tabindex0(); 56 } 57 </script> 58 59 <div id="tabindex-0"> 60 <a tabindex="0"></a> 61 <svg><a tabindex="0"></a></svg> 62 <svg><text tabindex="0"></text></svg> 63 <summary tabindex="0" id="summary-out-tabindex0"></summary> 64 <details open><summary id="summary-first"></summary><summary tabindex="0" id="summary-second-tabindex0"></summary></details> 65 <img tabindex="0"> 66 </div> 67 <script> 68 function runTests_tabindex0() { 69 for (element of document.querySelectorAll('#tabindex-0 [tabindex]')) { 70 var elementDesc = element.tagName; 71 if (element.id) 72 elementDesc += '#' + element.id; 73 test(() => { 74 element.focus(); 75 assert_equals(document.activeElement, element); 76 }, elementDesc + ' with tabindex=0 should be focusable.'); 77 } 78 79 runTests_tabindex_negative(); 80 } 81 </script> 82 83 <div id="tabindex-negative"> 84 <a tabindex="-1"></a> 85 <svg><a tabindex="-1"></a></svg> 86 <svg><text tabindex="-1"></text></svg> 87 <summary tabindex="-1" id="summary-out-tabindex-negative"></summary> 88 <details open><summary id="summary-first"></summary><summary tabindex="0" id="summary-second-tabindex-negative"></summary></details> 89 <img tabindex="-1"> 90 </div> 91 <script> 92 function runTests_tabindex_negative() { 93 for (element of document.querySelectorAll('#tabindex-negative [tabindex]')) { 94 var elementDesc = element.tagName; 95 if (element.id) 96 elementDesc += '#' + element.id; 97 test(() => { 98 element.focus(); 99 assert_equals(document.activeElement, element); 100 }, elementDesc + ' with tabindex=-1 should be focusable.'); 101 } 102 103 runTests_tabindex_invalid(); 104 } 105 </script> 106 107 <div id="tabindex-invalid"> 108 <a tabindex="invalid"></a> 109 <a href="#" tabindex="invalid" id="with-href" data-focusable=true></a> 110 <svg><a tabindex="invalid"></a></svg> 111 <svg><a href="#" tabindex="invalid" id="with-href" data-focusable=true></a></svg> 112 <svg><text tabindex="invalid"></text></svg> 113 <div tabindex="invalid"></div> 114 <summary tabindex="invalid" id="summary-out-tabindex-invalid"></summary> 115 <img tabindex="invalid"> 116 </div> 117 <script> 118 function runTests_tabindex_invalid() { 119 for (element of document.querySelectorAll('#tabindex-invalid [tabindex]')) { 120 var focusable = element.dataset && element.dataset.focusable; 121 var elementDesc = element.tagName; 122 if (element.id) 123 elementDesc += '#' + element.id; 124 test(() => { 125 element.focus(); 126 focusable ? assert_equals(document.activeElement, element) 127 : assert_not_equals(document.activeElement, element); 128 }, `${elementDesc} with tabindex=invalid should ${focusable ? "be" : "not be"} focusable.`); 129 } 130 131 done(); 132 } 133 </script> 134 </body>