aria-labelledby.html (2658B)
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/wai-aria/scripts/aria-utils.js"></script> 11 </head> 12 13 <body> 14 15 <!-- 1. Declaratively defined custom label --> 16 <x-label1 id="x-label1"> 17 <template shadowrootmode="closed" shadowrootreferencetarget="label1"> 18 <span>FAIL IF INCLUDED</span> 19 <label id="label1">Label 1</label> 20 </template> 21 </x-label1> 22 <input class="ex" aria-labelledby="x-label1" data-expectedlabel="Label 1"> 23 24 <!-- 2. Imperatively defined custom element --> 25 <script> 26 customElements.define( 27 "x-label2", 28 class XLabel2 extends HTMLElement { 29 constructor() { 30 super(); 31 32 this.shadowRoot_ = this.attachShadow({ mode: "closed" }); 33 this.shadowRoot_.innerHTML = ` 34 <span>FAIL IF INCLUDED</span> 35 <label id="label2"> 36 <slot></slot> 37 </label> 38 `; 39 this.shadowRoot_.referenceTarget = "label2"; 40 } 41 } 42 ); 43 </script> 44 <x-label2 id="x-label2">Label 2</x-label2> 45 <input class="ex" aria-labelledby="x-label2" data-expectedlabel="Label 2"> 46 47 <!-- 3. Setting .ariaLabelledByElements to target a declaratively defined custom label --> 48 <x-label3 id="x-label3"> 49 <template shadowrootmode="closed" shadowrootreferencetarget="label3"> 50 <span>FAIL IF INCLUDED</span> 51 <label id="label3">Label 3</label> 52 </template> 53 </x-label3> 54 <input id="input3" class="ex" data-expectedlabel="Label 3"> 55 <script> 56 document.getElementById("input3").ariaLabelledByElements = [ document.getElementById("x-label3") ]; 57 </script> 58 59 <!-- 1. Reference target dynamically set to null; label applies to host. --> 60 <x-label1 id="x-label4"> 61 <template shadowrootmode="open" shadowrootreferencetarget="label1"> 62 <span>Label from host</span> 63 <label id="label1">Label 1</label> 64 </template> 65 </x-label1> 66 <input class="ex" aria-labelledby="x-label4" data-expectedlabel="Label from host Label 1"> 67 <script> 68 document.querySelector("#x-label4").shadowRoot.referenceTarget = null; 69 </script> 70 71 <!-- 1. Reference target is empty string; idref is treated as invalid, so no label is applied --> 72 <x-label1 id="x-label5"> 73 <template shadowrootmode="open" shadowrootreferencetarget=""> 74 <span>Label from host</span> 75 <label id="label1">Label 1</label> 76 </template> 77 </x-label1> 78 <input class="ex" aria-labelledby="x-label5" data-expectedlabel=""> 79 80 <script> 81 AriaUtils.verifyLabelsBySelector('.ex'); 82 </script> 83 84 </body> 85 86 </html>