aria-element-reflection-labelledby.html (6122B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Element Reflection for aria-labelledby</title> 6 <link rel=help href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-33"> 7 <link rel="author" title="Alice Boxhall" href="alice@igalia.com"> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 </head> 13 14 <input id="input1"> 15 <span id="label1">Label for input1</span> 16 17 <script> 18 promise_test(async (t) => { 19 const label_before_labelledby_set = await test_driver.get_computed_label(input1); 20 assert_equals("", label_before_labelledby_set, "Before ariaLabelledByElements is set, accessible label should be empty."); 21 22 input1.ariaLabelledByElements = [label1]; 23 const label_after_labelledby_set = await test_driver.get_computed_label(input1); 24 assert_equals(label1.innerText, label_after_labelledby_set, "After ariaLabelledByElements is set, accessible label should be '" + label1.innerText + "'"); 25 26 input1.ariaLabelledByElements = null; 27 const label_after_labelledby_removed = await test_driver.get_computed_label(input1); 28 assert_equals("", label_after_labelledby_removed, "After ariaLabelledByElements is set to null, accessible label should be empty"); 29 30 }, "Setting ariaLabelledByElements should determine the computed label for the labelled element"); 31 </script> 32 33 <input id="input2"> 34 35 <script> 36 promise_test(async (t) => { 37 const label_before_labelledby_set = await test_driver.get_computed_label(input2); 38 assert_equals("", label_before_labelledby_set, "Before ariaLabelledByElements is set, accessible label should be empty."); 39 40 const label2_1 = document.createElement("span"); 41 label2_1.innerText = "Label for input2"; 42 const label2_2 = document.createElement("span"); 43 label2_2.innerText = "Another label for input2"; 44 input2.ariaLabelledByElements = [label2_1, label2_2]; 45 const label_after_labelledby_set = await test_driver.get_computed_label(input2); 46 assert_equals("", label_after_labelledby_set, "After ariaLabelledByElements is set, accessible label should still be empty, since the element is not yet in the document"); 47 48 input2.after(label2_1); 49 const label_after_label2_1_inserted = await test_driver.get_computed_label(input2); 50 assert_equals(label2_1.innerText, label_after_label2_1_inserted, "After first labelledby element is inserted into the document, accessible label should be based on its text"); 51 52 label2_1.after(label2_2); 53 const label_after_label2_2_inserted = await test_driver.get_computed_label(input2); 54 assert_equals(label2_1.innerText + " " + label2_2.innerText, label_after_label2_2_inserted, 55 "After second labelledby element is inserted into the document, accessible label should be based on both labels"); 56 57 58 label2_1.remove(); 59 label2_2.remove(); 60 const label_after_labelledby_elements_removed = await test_driver.get_computed_label(input2); 61 assert_equals("", label_after_labelledby_elements_removed, "After labelledby elements are removed, accessible label should be empty again"); 62 }, "Setting ariaLabelledByElements before inserting the elements referred to in the document should cause the label to be updated once elements are inserted") 63 </script> 64 65 <span id="label3">Label for input3</span> 66 67 <script> 68 promise_test(async (t) => { 69 const input3 = document.createElement("input"); 70 input3.ariaLabelledByElements = [label3]; 71 const label_before_input_inserted = await test_driver.get_computed_label(input3); 72 assert_equals(label_before_input_inserted, "", "Before input is inserted in the document, its computed label should be empty"); 73 74 label3.before(input3); 75 const label_after_input_inserted = await test_driver.get_computed_label(input3); 76 assert_equals(label3.innerText, label_after_input_inserted, "After input is inserted in the document, its computed label should be based on the labelledby element"); 77 }, "Setting ariaLabelledByElements on an element before inserting it in the document should cause the label to be updated once the element is inserted"); 78 </script> 79 80 <input id="input4"> 81 <div id="shadow_host4"> 82 <template shadowrootmode="open"> 83 <span>Label for input4</span> 84 </template> 85 </div> 86 87 <script> 88 promise_test(async (t) => { 89 const shadow_root = shadow_host4.shadowRoot; 90 const label4 = shadow_root.firstElementChild; 91 input4.ariaLabelledByElements = [label4] 92 assert_array_equals([], input4.ariaLabelledByElements, "References into shadow DOM are invalid"); 93 94 const label_before_moving_labelledby_element = await test_driver.get_computed_label(input4); 95 assert_equals("", label_before_moving_labelledby_element, "Invalid references aren't used for name computation, so label should be empty"); 96 97 input4.after(label4); 98 assert_array_equals([label4], input4.ariaLabelledByElements, "Moving the label causes the reference to become valid"); 99 100 const label_after_moving_labelledby_element = await test_driver.get_computed_label(input4); 101 assert_equals(label4.innerText, label_after_moving_labelledby_element, 102 "Moving the label causes the reference to become valid, so it is used in name computation."); 103 104 shadow_root.append(label4); 105 assert_array_equals([], input4.ariaLabelledByElements, "Moving the label back into shadow DOM causes the reference to become invalid again"); 106 const label_after_moving_labelledby_element_back = await test_driver.get_computed_label(input4); 107 assert_equals("", label_after_moving_labelledby_element_back, "Invalid references aren't used for name computation, so label should be empty"); 108 }, "Moving the label from shadow DOM to light DOM causes the reference to become valid"); 109 </script> 110 111 </html>