chromium/third_party/blink/web_tests/accessibility/aria-hidden-update.html

<html>
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body id="body">

    <div role="group" id="parent">
        <div role="button" id="button1" tabindex="0">Button 1</div>
        <div role="button" id="button2" tabindex="0">Button 2</div>
        <div role="button" id="button3" tabindex="0">Button 3</div>
    </div>

<script>
function axElementById(id) {
    return accessibilityController.accessibleElementById(id);
}

test((t) => {
    // Get the parent element.
    var parent = axElementById("parent");

    // Verify that the 3 children are present.
    assert_equals(parent.childAtIndex(0).name, "Button 1", "button1 is first");
    assert_equals(parent.childAtIndex(1).name, "Button 2", "button2 is second");
    assert_equals(parent.childAtIndex(2).name, "Button 3", "button3 is third");
    assert_false(parent.childAtIndex(0).isIgnored);
    assert_false(parent.childAtIndex(1).isIgnored);
    assert_false(parent.childAtIndex(2).isIgnored);

    // Make the 2nd button hidden. All 3 children should still be present.
    document.getElementById("button2").setAttribute("aria-hidden", "true");
    // Get button2 again, because although the hierarchy hasn't really changed,
    // the underlying object may be new.
    button2 = axElementById("button2");

    // Verify that the 3 children are present.
    assert_equals(parent.childAtIndex(0).name, "Button 1", "button1 is first");
    assert_equals(parent.childAtIndex(1).name, "", "button2 is second");
    assert_equals(parent.childAtIndex(2).name, "Button 3", "button3 is third");
    assert_false(parent.childAtIndex(0).isIgnored);
    assert_true(parent.childAtIndex(1).isIgnored);
    assert_false(parent.childAtIndex(2).isIgnored);

    // Make the 1st button hidden. All 3 children should still be present.
    document.getElementById("button1").setAttribute("aria-hidden", "true");
    // Get button1 again, because although the hierarchy hasn't really changed,
    // the underlying object may be new.
    button1 = axElementById("button1");

    // Verify that the 3 children are present.
    assert_equals(parent.childAtIndex(0).name, "", "button1 is first");
    assert_equals(parent.childAtIndex(1).name, "", "button2 is second");
    assert_equals(parent.childAtIndex(2).name, "Button 3", "button3 is third");
    assert_true(parent.childAtIndex(0).isIgnored);
    assert_true(parent.childAtIndex(1).isIgnored);
    assert_false(parent.childAtIndex(2).isIgnored);

    // Make the 2nd button not hidden. All 3 children should still be present.
    document.getElementById("button2").setAttribute("aria-hidden", "false");
    // Get button2 again, because although the hierarchy hasn't really changed,
    // the underlying object may be new.
    button2 = axElementById("button2");

    // Verify that the 3 children are present.
    parent = axElementById("parent");
    assert_equals(parent.childAtIndex(0).name, "", "button1 is first");
    assert_equals(parent.childAtIndex(1).name, "Button 2", "button2 is second");
    assert_equals(parent.childAtIndex(2).name, "Button 3", "button3 is third");
    assert_true(parent.childAtIndex(0).isIgnored);
    assert_false(parent.childAtIndex(1).isIgnored);
    assert_false(parent.childAtIndex(2).isIgnored);
}, "This test makes sure that when aria-hidden changes, the AX hierarchy does not change.");
</script>

</body>
</html>