forward-focus-to-associated-element.html (3387B)
1 <!DOCTYPE HTML> 2 <title>label element focus forwarding via "for" attribute or nested labelable element</title> 3 <link rel="author" title="yaycmyk" href="mailto:evan@yaycmyk.com"> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element:the-label-element-10"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id="log"></div> 8 <form id="test"> 9 <input id="input-a" type="checkbox"> 10 <label id="label-a" for="input-a">a</label> 11 12 <label id="label-b"> 13 <input id="input-b" type="checkbox" /> b 14 </label> 15 16 <label id="label-c" tabindex="0"> 17 <input id="input-c" type="checkbox" /> c 18 </label> 19 20 <label id="label-d" tabindex="-1"> 21 <input id="input-d" type="checkbox" /> d 22 </label> 23 24 <label id="label-e" tabindex=""> 25 <input id="input-e" type="checkbox" /> e 26 </label> 27 28 <input id="input-f" type="checkbox"> 29 <label id="label-f" for="input-f" tabindex="0" style="display:none">f</label> 30 </form> 31 <script> 32 "use strict"; 33 34 async_test(t => { 35 const label = document.getElementById("label-a"); 36 const input = document.getElementById("input-a"); 37 38 input.addEventListener("focus", t.step_func_done()); 39 label.addEventListener("focus", t.unreached_func("Label should not receive focus")); 40 41 label.focus(); 42 43 }, "focusing a label with for attribute should forward focus to the associated element"); 44 45 async_test(t => { 46 const label = document.getElementById("label-b"); 47 const input = document.getElementById("input-b"); 48 49 input.addEventListener("focus", t.step_func_done()); 50 label.addEventListener("focus", t.unreached_func("Label should not receive focus")); 51 52 label.focus(); 53 54 }, "focusing a label without for attribute should fowrad focus to the first labelable child"); 55 56 async_test(t => { 57 const label = document.getElementById("label-c"); 58 const input = document.getElementById("input-c"); 59 60 input.addEventListener("focus", t.unreached_func("Input should not receive focus")); 61 label.addEventListener("focus", t.step_func_done()); 62 63 label.focus(); 64 65 }, "focusing a label with tabindex should not forward focus to the labelable element"); 66 67 async_test(t => { 68 const label = document.getElementById("label-d"); 69 const input = document.getElementById("input-d"); 70 71 input.addEventListener("focus", t.unreached_func("Input should not receive focus")); 72 label.addEventListener("focus", t.step_func_done()); 73 74 label.focus(); 75 76 }, "focusing a label with negative tabindex should not forward focus to the labelable element"); 77 78 async_test(t => { 79 const label = document.getElementById("label-e"); 80 const input = document.getElementById("input-e"); 81 82 label.addEventListener("focus", t.unreached_func("Label should not receive focus")); 83 input.addEventListener("focus", t.step_func_done()); 84 85 label.focus(); 86 87 }, "focusing a label with empty tabindex should forward focus to the labelable element"); 88 89 async_test(t => { 90 const label = document.getElementById("label-f"); 91 const input = document.getElementById("input-f"); 92 93 label.addEventListener("focus", t.unreached_func("Label should not receive focus")); 94 input.addEventListener("focus", t.step_func_done()); 95 96 label.focus(); 97 98 }, "focusing a hidden label with tabindex should forward focus to the labelable element"); 99 </script>