Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!DOCTYPE html>
<html>
<head>
<title>Testing a11y name ccomputation testcases</title>
<link rel="stylesheet"
<script type="application/javascript"
src="../common.js"></script>
<script type="application/javascript"
src="../name.js"></script>
<script type="application/javascript">
function doTest() {
// These were especially called out to demonstrate edge cases.
// Example 1 from section 4.3.1 under 2.B.
// Element1 should get its name from the text in element3.
// Element2 should not gets name from element1 because that already
// gets its name from another element.
testName("el1", "hello");
testName("el2", null);
// Example 2 from section 4.3.1 under 2.C.
// The buttons should get their name from their labels and the links.
testName("del_row1", "Delete Documentation.pdf");
testName("del_row2", "Delete HolidayLetter.pdf");
// Example 3 from section 4.3.1 under 2.F.
// Name should be own content text plus the value of the input plus
// more own inner text, separated by 1 space.
testName("chkbx", "Flash the screen 5 times");
// Example 4 from section 4.3.1 under 2.F.
// Name from content should include all the child nodes, including
// table cells.
testName("input_with_html_label", "foo bar baz");
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTest);
</script>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<!-- el1 should be labeled, el2 should not. -->
<div id="el1" aria-labelledby="el3"></div>
<div id="el2" aria-labelledby="el1"></div>
<div id="el3"> hello </div>
<!-- The buttons should be labeled by themselves and the referenced link -->
<ul>
<li>
<a id="file_row1" href="./files/Documentation.pdf">Documentation.pdf</a>
<span role="button" tabindex="0" id="del_row1" aria-label="Delete"
aria-labelledby="del_row1 file_row1"></span>
</li>
<li>
<a id="file_row2" href="./files/HolidayLetter.pdf">HolidayLetter.pdf</a>
<span role="button" tabindex="0" id="del_row2" aria-label="Delete"
aria-labelledby="del_row2 file_row2"></span>
</li>
</ul>
<!-- Label from combined text and subtree -->
<div id="chkbx" role="checkbox" aria-checked="false">Flash the screen
<span role="textbox" aria-multiline="false"> 5 </span> times</div>
<!-- Label with name from content should include table -->
<input id="input_with_html_label" />
<label for="input_with_html_label" id="label">
<div>foo</div>
<table><tr><td>bar</td></tr></table>
<div>baz</div>
</label>
</body>
</html>