64 lines
3.2 KiB
HTML
64 lines
3.2 KiB
HTML
<!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>
|