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

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

<div class="container">
    <h3 id="heading1">
        Before
        <p id="hidden1" aria-hidden="true">Hidden text</p>
        After
    </h3>
    <button id="button1" aria-labelledby="hidden1"></button>
</div>

<script>
test(function(t) {
    var axHeading1 = accessibilityController.accessibleElementById("heading1");
    assert_equals(axHeading1.name, "Before After");
    var axButton1 = accessibilityController.accessibleElementById("button1");
    assert_equals(axButton1.name, "Hidden text");
}, "Aria-labelledby can get accessible text from aria-hidden subtree");
</script>

<div class="container">
    <h3 id="heading2">
        Before
        <p id="hidden2" aria-hidden="true">Hidden text</p>
        After
    </h3>
    <button id="button2" aria-labelledby="heading2"></button>
</div>

<script>
test(function(t) {
    var axHeading2 = accessibilityController.accessibleElementById("heading2");
    assert_equals(axHeading2.name, "Before After");
    var axButton2 = accessibilityController.accessibleElementById("button2");
    assert_equals(axButton2.name, "Before After");
}, "Aria-labelledby ignores accessible text that's aria-hidden inside subtree");
</script>

<div class="container">
    <h3 id="heading3" aria-hidden="true" lang="x">  <!-- lang keeps in tree -->
        Before
        <p id="hidden3">Text within hidden subtree</p>
        After
    </h3>
    <button id="button3" aria-labelledby="hidden3"></button>
</div>

<script>
 test(function(t) {
     var axHeading3 = accessibilityController.accessibleElementById("heading3");
     assert_true(axHeading3.isIgnored);
     var axButton3 = accessibilityController.accessibleElementById("button3");
     assert_equals(axButton3.name, "Text within hidden subtree");
 }, "Aria-labelledby can get accessible text from within aria-hidden subtree");
</script>

<div class="container">
    <h3 id="heading4" aria-hidden="true">
        Before
        <p id="hidden4" aria-hidden="true">Text within hidden subtree</p>
        After
    </h3>
    <button id="button4" aria-labelledby="heading4"></button>
</div>

<script>
 test(function(t) {
     var axButton4 = accessibilityController.accessibleElementById("button4");
     assert_equals(axButton4.name, "Before Text within hidden subtree After");
 }, "Aria-labelledby of aria-hidden subtree with another aria-hidden inside");
</script>

<div class="container">
    <label for="input5" aria-hidden="true">
        Before
        <p aria-hidden="true">Hidden text</p>
        After</label>
    <input id="input5">
</div>

<script>
test(function(t) {
    var axInput5 = accessibilityController.accessibleElementById("input5");
    assert_equals(axInput5.name, "");
}, "Label cannot get accessible text from aria-hidden subtree");
</script>
chromium/third_party/blink/web_tests/accessibility/name-calc-aria-hidden.html
