haikuwebkit/LayoutTests/accessibility/aria-labelledby-with-descen...

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/js-test-pre.js"></script>
<script src="../resources/accessibility-helper.js"></script>
</head>
<body id="body">

<div id="content">

<div class="ex" data-label="hello link use world test1 test2 test3" aria-labelledby="a1 b1" id="test1" role="group">group text</div>
<div id="a1">hello <a href="#">link</a> <div role="group">skip</div> <div role="group" aria-label="use">skip</div> world</div>
<!-- paragraph role is ambiguous so okay to leave next example as it -->
<div id="b1"><button>test1</button><p tabindex=0>test2 <span aria-hidden="true">hidden</span> test3</p></div>

<input type="checkbox" aria-labelledby="reverselabelfor" id="test2" class="ex" data-label="foo bar" data-note="labelled by label element">
<label id="reverselabelfor">foo <span role="text" aria-label="bar">skip</span></label>
<br>

<input type="checkbox" aria-labelledby="reverselabelforwithdiv" id="test3" class="ex" data-label="foo bar" data-note="labelled by div element">
<div id="reverselabelforwithdiv">foo <span role="text" aria-label="bar">skip</span></div>
<br>

<!-- would be "bar" natively, but label explicitly overridden to "foo" by labelledby -->
<div id="overridesnativelabel">foo</div><label for="nativelabeloverridden">bar</label>
<input class="ex" data-label="foo" id="test4" type="text" aria-labelledby="overridesnativelabel" data-note="overrides native label">

<!-- self-referencing labelledby in combination with external reference -->
<div id="productname1"><nav role="navigation"><!-- nav does not get nameFrom:contents -->product name</nav></div>
<button class="ex" data-label="Delete" aria-label="Delete" aria-labelledby="test5 productname1" id="test5" data-note="self-referencial labelledby includes nav">x</button>

<!-- self-referencing labelledby in combination with external reference -->
<div id="productname2"><nav role="heading"><!-- nav does not get nameFrom:contents, but heading does. -->product name</nav></div>
<button class="ex" data-label="Delete product name" aria-label="Delete" aria-labelledby="test6 productname2" id="test6" data-note="self-referencial labelledby includes heading">x</button>

<div class="ex" data-label="foo bar baz bop bap boom" aria-labelledby="a3 b3" id="test7" role="group" data-note="includes form elements">foo</div>
<button id="a3"> foo <img src="#" alt="bar"> baz</button>
<div id="b3">bop <input value="bap"> <input type="range" aria-valuetext="boom"></div>


</div>

<p id="description"></p>
<div id="console"></div>

<script>

    description("This tests that if aria-labelledby is pointing to nodes with descendants, it returns all text.");

    if (window.accessibilityController) {
          for (var k = 1; k < 8; k++) {
              var test = accessibilityController.accessibleElementById("test" + k);
              debug("test " + k + ": aria-labelledby description: " + platformValueForW3CName(test));
              debug("test " + k + ": expected description: " + document.getElementById("test" + k).getAttribute("data-label") + "\n");
          }
          document.getElementById("content").style.visibility = "hidden";
    }

</script>

<script src="../resources/js-test-post.js"></script>
</body>
</html>