| <!DOCTYPE HTML> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <style> |
| .hideAllContainers .container { |
| display: none; |
| } |
| </style> |
| |
| <div class="container"> |
| <button id="labelOnly" aria-label="Label">Contents</button> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axLabelOnly = accessibilityController.accessibleElementById("labelOnly"); |
| assert_equals(axLabelOnly.name, "Label"); |
| assert_equals(axLabelOnly.nameFrom, "attribute"); |
| }, "Button with aria-label."); |
| </script> |
| |
| <div class="container"> |
| <button id="emptyLabel1" aria-label="">Contents</button> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axEmptyLabel1 = accessibilityController.accessibleElementById("emptyLabel1"); |
| assert_equals(axEmptyLabel1.name, "Contents"); |
| assert_equals(axEmptyLabel1.nameFrom, "contents"); |
| }, "Button with explicitly empty label."); |
| </script> |
| |
| <div class="container"> |
| <button id="emptyLabel2" aria-label>Contents</button> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axEmptyLabel2 = accessibilityController.accessibleElementById("emptyLabel2"); |
| assert_equals(axEmptyLabel2.name, "Contents"); |
| assert_equals(axEmptyLabel2.nameFrom, "contents"); |
| }, "Button with label value not specified."); |
| </script> |
| |
| <div class="container"> |
| <button id="labelledby1" aria-labelledby="label1" aria-label="Label">Contents</button> |
| <div id="label1">Labelledby 1</div> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axLabelledby1 = accessibilityController.accessibleElementById("labelledby1"); |
| assert_equals(axLabelledby1.name, "Labelledby 1"); |
| assert_equals(axLabelledby1.nameFrom, "relatedElement"); |
| assert_equals(axLabelledby1.nameElementCount(), 1); |
| assert_equals(axLabelledby1.nameElementAtIndex(0).role, "AXRole: AXGenericContainer"); |
| }, "aria-labelledby trumps both aria-label and contents."); |
| </script> |
| |
| <div class="container"> |
| <button id="labelledby2" aria-labelledby="label2">Contents</button> |
| <div id="label2" aria-label="Label 2 label">Contents 2</div> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axLabelledby2 = accessibilityController.accessibleElementById("labelledby2"); |
| assert_equals(axLabelledby2.name, "Label 2 label"); |
| assert_equals(axLabelledby2.nameFrom, "relatedElement"); |
| assert_equals(axLabelledby2.nameElementCount(), 1); |
| assert_equals(axLabelledby2.nameElementAtIndex(0).role, "AXRole: AXGenericContainer"); |
| }, "Button with aria-labelledby referencing an element with an aria-label uses the aria-label as text alternative."); |
| </script> |
| |
| <div class="container"> |
| <button id="labelledby3" aria-labelledby="label3">Contents</button> |
| <div id="label3" aria-label="">Contents 3</div> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axLabelledby3 = accessibilityController.accessibleElementById("labelledby3"); |
| assert_equals(axLabelledby3.name, "Contents 3"); |
| assert_equals(axLabelledby3.nameFrom, "relatedElement"); |
| assert_equals(axLabelledby3.nameElementCount(), 1); |
| assert_equals(axLabelledby3.nameElementAtIndex(0).role, "AXRole: AXGenericContainer"); |
| }, "aria-labelledby reference to element with empty aria-label."); |
| </script> |
| |
| <div class="container"> |
| <button id="labelledby4" aria-labelledby="label4">Contents</button> |
| <div id="label4" aria-label="Label 4 label" aria-labelledby="label4chained">Contents 4</div> |
| <p id="label4chained">Contents 4 chained</p> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axLabelledby4 = accessibilityController.accessibleElementById("labelledby4"); |
| assert_equals(axLabelledby4.name, "Label 4 label"); |
| assert_equals(axLabelledby4.nameFrom, "relatedElement"); |
| assert_equals(axLabelledby4.nameElementCount(), 1); |
| assert_equals(axLabelledby4.nameElementAtIndex(0).role, "AXRole: AXGenericContainer"); |
| }, "Recursive aria-labelledby references aren't followed even in presence of aria-label, even though aria-labelledby normally trumps aria-label."); |
| </script> |
| |
| <script> |
| if (window.testRunner) |
| document.body.className = "hideAllContainers"; |
| </script> |
