name-calc-aria-label.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<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>
chromium/third_party/blink/web_tests/accessibility/name-calc-aria-label.html
