blob: a15fee78f8665ee457075657f6051ef99adee128 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<!DOCTYPE html>
<html>
<head>
<title>Testing a11y name ccomputation testcases</title>
<link rel="stylesheet"
type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript"
src="../common.js"></script>
<script type="application/javascript"
src="../name.js"></script>
<script type="application/javascript">
function doTest() {
// All test cases taken from https://www.w3.org/TR/accname-1.1/
// 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>
|
