aria-relations-should-ignore-hidden-targets.html

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

<div class="container">
    <ul id="tablist" role="tablist">
        <li id="tab" role="tab" aria-controls="panel"></li>
    </ul>
    <div id="panel" role="tabpanel">Panel</div>
</div>

<script>
test(function(t) {
    var axTab = accessibilityController.accessibleElementById('tab');
    var panel = document.getElementById('panel');
    var axPanel = accessibilityController.accessibleElementById('panel');
    assert_not_equals(axPanel, undefined,
                      'axPanel not undefined, Initial state');
    assert_equals(axTab.ariaControlsElementAtIndex(0), axPanel,
                  'Initial state');

    panel.style.display = 'none';
    assert_not_equals(axPanel, undefined,
                      'axPanel not undefined, display: none');
    assert_not_equals(axTab.ariaControlsElementAtIndex(0), axPanel,
                     'display: none');

    // Restore the "display" attribute and test with "visibility".
    panel.style.display = 'initial';
    axPanel = accessibilityController.accessibleElementById('panel');
    assert_not_equals(axPanel, undefined,
                      'axPanel not undefined, display: initial');
    assert_equals(axTab.ariaControlsElementAtIndex(0), axPanel,
                  'display: initial');

    panel.style.visibility = 'hidden';
    assert_equals(axTab.ariaControlsElementAtIndex(0), undefined,
                      'visibility: hidden');
}, 'aria-controls should ignore hidden targets.');
</script>

<div class="container">
    <h1 id="headingWithFlowtos" aria-flowto="item1 item2">Heading</h1>
    <ul id="flowtoItems">
        <li id="item1">One</li>
        <li id="item2">Two</li>
    </ul>
</div>

<script>
test(function(t)
{
    var axHeading = accessibilityController.accessibleElementById('headingWithFlowtos');
    var flowtoItems = document.getElementById('flowtoItems');
    var item1 = document.getElementById('item1');
    var axItem1 = accessibilityController.accessibleElementById('item1');
    var item2 = document.getElementById('item2');
    var axItem2 = accessibilityController.accessibleElementById('item2');

    assert_equals(axHeading.ariaFlowToElementAtIndex(0), axItem1);
    assert_equals(axHeading.ariaFlowToElementAtIndex(1), axItem2);

    item2.style.display = 'none';
    assert_equals(axHeading.ariaFlowToElementAtIndex(0), axItem1);
    assert_not_equals(axHeading.ariaFlowToElementAtIndex(1), axItem2);

    // Restore the "display" attribute and test with "visibility".
    item2.style.display = 'initial';
    axItem2 = accessibilityController.accessibleElementById('item2');
    item1.style.visibility = 'hidden';
    assert_equals(axHeading.ariaFlowToElementAtIndex(0), axItem2);

    flowtoItems.style.display = 'none';
    assert_not_equals(axHeading.ariaFlowToElementAtIndex(0), axItem2);
}, 'aria-flowto should ignore hidden targets.');
</script>
chromium/third_party/blink/web_tests/accessibility/aria-relations-should-ignore-hidden-targets.html
