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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
<!DOCTYPE html>
<html>
<head>
<title>Test ARIA tab accessible selected state</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="../role.js"></script>
<script type="application/javascript"
src="../states.js"></script>
<script type="application/javascript"
src="../events.js"></script>
<script type="application/javascript">
function focusARIAItem(aID, aIsSelected) {
this.DOMNode = getNode(aID);
this.invoke = function focusARIAItem_invoke() {
this.DOMNode.focus();
};
this.check = function focusARIAItem_check() {
testStates(this.DOMNode, aIsSelected ? STATE_SELECTED : 0, 0,
aIsSelected ? 0 : STATE_SELECTED);
};
this.getID = function focusARIAItem_getID() {
return "Focused ARIA widget item with aria-selected='" +
(aIsSelected ? "true', should" : "false', shouldn't") +
" have selected state on " + prettyName(aID);
};
}
function focusActiveDescendantItem(aItemID, aWidgetID, aIsSelected) {
this.DOMNode = getNode(aItemID);
this.widgetDOMNode = getNode(aWidgetID);
this.invoke = function focusActiveDescendantItem_invoke() {
this.widgetDOMNode.setAttribute("aria-activedescendant", aItemID);
this.widgetDOMNode.focus();
};
this.check = function focusActiveDescendantItem_check() {
testStates(this.DOMNode, aIsSelected ? STATE_SELECTED : 0, 0,
aIsSelected ? 0 : STATE_SELECTED);
};
this.getID = function tabActiveDescendant_getID() {
return "ARIA widget item managed by activedescendant " +
(aIsSelected ? "should" : "shouldn't") +
" have the selected state on " + prettyName(aItemID);
};
}
// //////////////////////////////////////////////////////////////////////////
// Test
// gA11yEventDumpID = "eventdump"; // debug stuff
// gA11yEventDumpToConsole = true;
var gQueue = null;
function doTest() {
// aria-selected
testStates("aria_tab1", 0, 0, STATE_SELECTED);
testStates("aria_tab2", STATE_SELECTED);
testStates("aria_tab3", 0, 0, STATE_SELECTED);
testStates("aria_option1", 0, 0, STATE_SELECTED);
testStates("aria_option2", STATE_SELECTED);
testStates("aria_option3", 0, 0, STATE_SELECTED);
testStates("aria_treeitem1", 0, 0, STATE_SELECTED);
testStates("aria_treeitem2", STATE_SELECTED);
testStates("aria_treeitem3", 0, 0, STATE_SELECTED);
// selected state when widget item is focused
gQueue = new eventQueue(EVENT_FOCUS);
gQueue.push(new focusARIAItem("aria_tab1", true));
gQueue.push(new focusARIAItem("aria_tab2", true));
gQueue.push(new focusARIAItem("aria_tab3", false));
gQueue.push(new focusARIAItem("aria_option1", true));
gQueue.push(new focusARIAItem("aria_option2", true));
gQueue.push(new focusARIAItem("aria_option3", false));
gQueue.push(new focusARIAItem("aria_treeitem1", true));
gQueue.push(new focusARIAItem("aria_treeitem2", true));
gQueue.push(new focusARIAItem("aria_treeitem3", false));
// selected state when widget item is focused (by aria-activedescendant)
gQueue.push(new focusActiveDescendantItem("aria_tab5", "aria_tablist2", true));
gQueue.push(new focusActiveDescendantItem("aria_tab6", "aria_tablist2", true));
gQueue.push(new focusActiveDescendantItem("aria_tab4", "aria_tablist2", false));
gQueue.invoke(); // SimpleTest.finish() will be called in the end
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTest);
</script>
</head>
<body>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=653601"
title="aria-selected ignored for ARIA tabs">
Mozilla Bug 653601
</a>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=526703"
title="Focused widget item should expose selected state by default">
Mozilla Bug 526703
</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<!-- tab -->
<div id="aria_tablist" role="tablist">
<div id="aria_tab1" role="tab" tabindex="0">unselected tab</div>
<div id="aria_tab2" role="tab" tabindex="0" aria-selected="true">selected tab</div>
<div id="aria_tab3" role="tab" tabindex="0" aria-selected="false">focused explicitly unselected tab</div>
</div>
<!-- listbox -->
<div id="aria_listbox" role="listbox">
<div id="aria_option1" role="option" tabindex="0">unselected option</div>
<div id="aria_option2" role="option" tabindex="0" aria-selected="true">selected option</div>
<div id="aria_option3" role="option" tabindex="0" aria-selected="false">focused explicitly unselected option</div>
</div>
<!-- tree -->
<div id="aria_tree" role="tree">
<div id="aria_treeitem1" role="treeitem" tabindex="0">unselected treeitem</div>
<div id="aria_treeitem2" role="treeitem" tabindex="0" aria-selected="true">selected treeitem</div>
<div id="aria_treeitem3" role="treeitem" tabindex="0" aria-selected="false">focused explicitly unselected treeitem</div>
</div>
<!-- tab managed by active-descendant -->
<div id="aria_tablist2" role="tablist" tabindex="0">
<div id="aria_tab4" role="tab" aria-selected="false">focused explicitly unselected tab</div>
<div id="aria_tab5" role="tab">initially selected tab</div>
<div id="aria_tab6" role="tab">later selected tab</div>
</div>
</body>
</html>
|
