name-calc-visibility.html | Explore in Territory

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

<div id="link1" class="container" tabIndex=0 role="link">
    <p>1</p>
    <table role="presentation">
        <tr><td>2</td></tr>
        <tr><td style="visibility: hidden">3</td></tr>
        <tr><td style="display:none">4</td></tr>
        <tr style="visibility: hidden"><td>5</td></tr>
        <tr style="display: none"><td>6</td></tr>
    </table>
    <p>7</p>
</div>

<script>
test(function(t) {
    var axLink1 = accessibilityController.accessibleElementById("link1");
    assert_equals(axLink1.name, "1 2 7");
}, "Visibility: 'hidden' and display: 'none' inside ARIA link");
</script>

<div class="container">
    <input id="input2" aria-labelledby="label2">

    <div id="label2">
        <p>1</p>
        <table role="presentation">
            <tr><td>2</td></tr>
            <tr><td style="visibility: hidden">3</td></tr>
            <tr><td style="display:none">4</td></tr>
            <tr style="visibility: hidden"><td>5</td></tr>
            <tr style="display: none"><td>6</td></tr>
        </table>
        <p>7</p>
    </div>
</div>

<script>
test(function(t) {
    var axInput2 = accessibilityController.accessibleElementById("input2");
    assert_equals(axInput2.name, "1 2 7");
}, "Visibility: 'hidden' and display: 'none' inside aria-labelledby label subtree");
</script>

<div class="container">
    <input id="input3" aria-labelledby="3a 3b 3c 3d 3e 3f 3g">

    <p id="3a">1</p>
    <table>
        <tr><td id="3b">2</td></tr>
        <tr><td id="3c" style="visibility: hidden">3</td></tr>
        <tr><td id="3d" style="display:none">4</td></tr>
        <tr id="3e" style="visibility: hidden"><td>5</td></tr>
        <tr id="3f" style="display: none"><td>6</td></tr>
    </table>
    <p id="3g">7</p>
</div>

<script>
test(function(t) {
    var axInput3 = accessibilityController.accessibleElementById("input3");
    assert_equals(axInput3.name, "1 2 3 4 5 6 7");
}, "Visibility: 'hidden' and display: 'none' referenced directly by aria-labelledby");
</script>

<div class="container">
    <input id="input4" aria-labelledby="label4">

    <div style="display: none">
        <div id="label4">
            <p>1</p>
            <table>
                <tr><td>2</td></tr>
                <tr><td style="visibility: hidden">3</td></tr>
                <tr><td style="display:none">4</td></tr>
                <tr style="visibility: hidden"><td>5</td></tr>
                <tr style="display: none"><td>6</td></tr>
            </table>
            <p>7</p>
        </div>
    </div>
</div>

<script>
test(function(t) {
    var axInput4 = accessibilityController.accessibleElementById("input4");
    assert_equals(axInput4.name, "1 2 3 4 5 6 7");
}, "Visibility: nested 'hidden' and display: 'none' inside aria-labelledby label subtree, where entire label subtree is display: 'none'");
</script>

<div class="container">
  <button id="button1" style="display:none">Hello</button>
  <button id="button2" aria-labelledby="button1">X</button>
</div>

<script>
test(function(t) {
    var axButton1 = accessibilityController.accessibleElementById("button1");
    assert_equals(axButton1.name, "");
    var axButton2 = accessibilityController.accessibleElementById("button2");
    assert_equals(axButton2.name, "Hello");
}, "Visibility: display: 'none' objects have no name, but can label other things.");
</script>
chromium/third_party/blink/web_tests/accessibility/name-calc-visibility.html
