aria-labelledby-stay-within.html | Explore in Territory

<html>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();
</script>
<body>

    <!-- this test makes sure that the labeled by aria attributes does not start climbing out of itself and 
         appending on other elements as its own description -->

    <p>Some <a href="#">focusable content</a> before the application widgets.</p>
    <ul role="toolbar">
    <li><a role="button" href="#" id="get"><span>Get New Mail</span></a></li>
    <li><a role="button" href="#" id="com"><span>Compose New Message</span></a></li>
    <li><a role="button" href="#" id="rep" aria-labelledby="rep item5"><span>Reply</span></a></li>
    <li><a role="button" href="#" id="all" aria-labelledby="all item5"><span>Reply All</span></a></li>
    <li><a role="button" href="#" id="for" aria-labelledby="for item5"><span>Forward</span></a></li>
    <li><a role="button" href="#" id="del" aria-labelledby="del item5"><span>Delete</span></a></li>
</ul>

<ul role="listbox">
  <li id="item4" role="listitem" tabindex="-1" class="">Item Four</li>
  <li id="item5" role="listitem" tabindex="-1" class="">Item Five</li>
  <li id="item6" role="listitem" tabindex="0" class="selected" aria-selected="true">Item Six</li>
  <li id="item7" role="listitem" tabindex="-1">Item Seven</li>
</ul>

    <div id="result"></div>
    
    <script>
        if (window.accessibilityController) {
            var labeledItem = document.getElementById("rep");
            labeledItem.focus();
            var result = document.getElementById("result");
            if ( accessibilityController.focusedElement.name == "Reply Item Five" ) {
               result.innerText = "Passed";
            }
            else { 
               result.innerText = "Failed. Result ==" + accessibilityController.focusedElement.name + "==";
            }
        }
    </script>
</body>
</html>
chromium/third_party/blink/web_tests/accessibility/aria-labelledby-stay-within.html
