|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Test weak ARIA roles</title> |
|
5 |
|
6 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> |
|
7 |
|
8 <script type="application/javascript" |
|
9 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> |
|
10 |
|
11 <script type="application/javascript" |
|
12 src="../common.js"></script> |
|
13 <script type="application/javascript" |
|
14 src="../role.js"></script> |
|
15 |
|
16 <script type="application/javascript"> |
|
17 |
|
18 function doTest() |
|
19 { |
|
20 // ARIA role map. |
|
21 testRole("aria_alert", ROLE_ALERT); |
|
22 testRole("aria_alertdialog", ROLE_DIALOG); |
|
23 testRole("aria_application", ROLE_APPLICATION); |
|
24 testRole("aria_article", ROLE_DOCUMENT); |
|
25 testRole("aria_button", ROLE_PUSHBUTTON); |
|
26 testRole("aria_checkbox", ROLE_CHECKBUTTON); |
|
27 testRole("aria_columnheader", ROLE_COLUMNHEADER); |
|
28 testRole("aria_combobox", ROLE_COMBOBOX); |
|
29 testRole("aria_dialog", ROLE_DIALOG); |
|
30 testRole("aria_directory", ROLE_LIST); |
|
31 testRole("aria_document", ROLE_DOCUMENT); |
|
32 testRole("aria_form", ROLE_FORM); |
|
33 testRole("aria_grid", ROLE_TABLE); |
|
34 testRole("aria_gridcell", ROLE_GRID_CELL); |
|
35 testRole("aria_group", ROLE_GROUPING); |
|
36 testRole("aria_heading", ROLE_HEADING); |
|
37 testRole("aria_img", ROLE_GRAPHIC); |
|
38 testRole("aria_link", ROLE_LINK); |
|
39 testRole("aria_list", ROLE_LIST); |
|
40 testRole("aria_listbox", ROLE_LISTBOX); |
|
41 testRole("aria_listitem", ROLE_LISTITEM); |
|
42 testRole("aria_log", ROLE_TEXT_CONTAINER); // weak role |
|
43 testRole("aria_marquee", ROLE_ANIMATION); |
|
44 testRole("aria_math", ROLE_FLAT_EQUATION); |
|
45 testRole("aria_menu", ROLE_MENUPOPUP); |
|
46 testRole("aria_menubar", ROLE_MENUBAR); |
|
47 testRole("aria_menuitem", ROLE_MENUITEM); |
|
48 testRole("aria_menuitemcheckbox", ROLE_CHECK_MENU_ITEM); |
|
49 testRole("aria_menuitemradio", ROLE_RADIO_MENU_ITEM); |
|
50 testRole("aria_note", ROLE_NOTE); |
|
51 testRole("aria_presentation", ROLE_TEXT_CONTAINER); // weak role |
|
52 testRole("aria_progressbar", ROLE_PROGRESSBAR); |
|
53 testRole("aria_radio", ROLE_RADIOBUTTON); |
|
54 testRole("aria_radiogroup", ROLE_GROUPING); |
|
55 testRole("aria_region", ROLE_PANE); |
|
56 testRole("aria_row", ROLE_ROW); |
|
57 testRole("aria_rowheader", ROLE_ROWHEADER); |
|
58 testRole("aria_scrollbar", ROLE_SCROLLBAR); |
|
59 testRole("aria_separator", ROLE_SEPARATOR); |
|
60 testRole("aria_slider", ROLE_SLIDER); |
|
61 testRole("aria_spinbutton", ROLE_SPINBUTTON); |
|
62 testRole("aria_status", ROLE_STATUSBAR); |
|
63 testRole("aria_tab", ROLE_PAGETAB); |
|
64 testRole("aria_tablist", ROLE_PAGETABLIST); |
|
65 testRole("aria_tabpanel", ROLE_PROPERTYPAGE); |
|
66 testRole("aria_textbox", ROLE_ENTRY); |
|
67 testRole("aria_timer", ROLE_TEXT_CONTAINER); // weak role |
|
68 testRole("aria_toolbar", ROLE_TOOLBAR); |
|
69 testRole("aria_tooltip", ROLE_TOOLTIP); |
|
70 testRole("aria_tree", ROLE_OUTLINE); |
|
71 testRole("aria_treegrid", ROLE_TREE_TABLE); |
|
72 testRole("aria_treeitem", ROLE_OUTLINEITEM); |
|
73 |
|
74 // Note: |
|
75 // The phrase "weak foo" here means that there is no good foo-to-platform |
|
76 // role mapping. Similarly "strong foo" means there is a good foo-to- |
|
77 // platform role mapping. |
|
78 |
|
79 testRole("articlemain", ROLE_DOCUMENT); |
|
80 testRole("articleform", ROLE_FORM); |
|
81 |
|
82 // Test article exposed as document |
|
83 testRole("testArticle", ROLE_DOCUMENT); |
|
84 |
|
85 // weak roles that are forms of "live regions" |
|
86 testRole("log_table", ROLE_TABLE); |
|
87 testRole("timer_div", ROLE_SECTION); |
|
88 |
|
89 // other roles that are forms of "live regions" |
|
90 testRole("marquee_h1", ROLE_ANIMATION); |
|
91 |
|
92 // strong landmark |
|
93 testRole("application", ROLE_APPLICATION); |
|
94 testRole("form", ROLE_FORM); |
|
95 testRole("application_table", ROLE_APPLICATION); |
|
96 |
|
97 // weak landmarks |
|
98 var weak_landmarks = ["banner", "complementary", "contentinfo", |
|
99 "main", "navigation", "search"]; |
|
100 for (l in weak_landmarks) |
|
101 testRole(weak_landmarks[l], ROLE_SECTION); |
|
102 |
|
103 for (l in weak_landmarks) { |
|
104 var id = weak_landmarks[l] + "_table"; |
|
105 testRole(id, ROLE_TABLE); |
|
106 |
|
107 var accessibleTable = getAccessible(id, [nsIAccessibleTable], null, |
|
108 DONOTFAIL_IF_NO_INTERFACE); |
|
109 ok(accessibleTable ? true : false, |
|
110 "landmarked table should have nsIAccessibleTable"); |
|
111 |
|
112 if (accessibleTable) |
|
113 is(accessibleTable.getCellAt(0,0).firstChild.name, "hi", "no cell"); |
|
114 } |
|
115 |
|
116 ////////////////////////////////////////////////////////////////////////// |
|
117 // test gEmptyRoleMap |
|
118 testRole("buttontable_row", ROLE_NOTHING); |
|
119 testRole("buttontable_cell", ROLE_NOTHING); |
|
120 |
|
121 // abstract roles |
|
122 var abstract_roles = ["composite", "landmark", "structure", "widget", |
|
123 "window", "input", "range", "select", "section", |
|
124 "sectionhead"]; |
|
125 for (a in abstract_roles) |
|
126 testRole(abstract_roles[a], ROLE_SECTION); |
|
127 |
|
128 ////////////////////////////////////////////////////////////////////////// |
|
129 // roles transformed by ARIA state attributes |
|
130 testRole("togglebutton", ROLE_TOGGLE_BUTTON); |
|
131 |
|
132 ////////////////////////////////////////////////////////////////////////// |
|
133 // ignore unknown roles, take first known |
|
134 testRole("unknown_roles", ROLE_PUSHBUTTON); |
|
135 |
|
136 ////////////////////////////////////////////////////////////////////////// |
|
137 // misc roles |
|
138 testRole("note", ROLE_NOTE); |
|
139 testRole("scrollbar", ROLE_SCROLLBAR); |
|
140 testRole("dir", ROLE_LIST); |
|
141 |
|
142 ////////////////////////////////////////////////////////////////////////// |
|
143 // test document role map update |
|
144 var testDoc = getAccessible(document, [nsIAccessibleDocument]); |
|
145 testRole(testDoc, ROLE_DOCUMENT); |
|
146 document.body.setAttribute("role", "application"); |
|
147 testRole(testDoc, ROLE_APPLICATION); |
|
148 |
|
149 // Test equation image |
|
150 testRole("img_eq", ROLE_FLAT_EQUATION); |
|
151 |
|
152 // Test textual equation |
|
153 testRole("txt_eq", ROLE_FLAT_EQUATION); |
|
154 |
|
155 SimpleTest.finish(); |
|
156 } |
|
157 |
|
158 SimpleTest.waitForExplicitFinish(); |
|
159 addA11yLoadEvent(doTest); |
|
160 </script> |
|
161 </head> |
|
162 <body> |
|
163 |
|
164 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=428479">Mozilla Bug 428479</a> |
|
165 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=429666">Mozilla Bug 429666</a> |
|
166 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=481114">Mozilla Bug 481114</a> |
|
167 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=469688">Mozilla Bug 469688</a> |
|
168 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=469688">Mozilla Bug 520188</a> |
|
169 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=529289">Mozilla Bug 529289</a> |
|
170 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=529289">Mozilla Bug 607219</a> |
|
171 <a target="_blank" |
|
172 title="HTML buttons with aria-pressed not exposing IA2 TOGGLE_BUTTON role" |
|
173 href="https://bugzilla.mozilla.org/show_bug.cgi?id=725432"> |
|
174 Bug 725432 |
|
175 </a> |
|
176 <a target="_blank" |
|
177 title="Map ARIA role FORM" |
|
178 href="https://bugzilla.mozilla.org/show_bug.cgi?id=735645"> |
|
179 Bug 735645 |
|
180 </a> |
|
181 <p id="display"></p> |
|
182 <div id="content" style="display: none"></div> |
|
183 <pre id="test"> |
|
184 </pre> |
|
185 |
|
186 <span id="aria_alert" role="alert"/> |
|
187 <span id="aria_alertdialog" role="alertdialog"/> |
|
188 <span id="aria_application" role="application"/> |
|
189 <span id="aria_article" role="article"/> |
|
190 <span id="aria_button" role="button"/> |
|
191 <span id="aria_checkbox" role="checkbox"/> |
|
192 <span id="aria_columnheader" role="columnheader"/> |
|
193 <span id="aria_combobox" role="combobox"/> |
|
194 <span id="aria_dialog" role="dialog"/> |
|
195 <span id="aria_directory" role="directory"/> |
|
196 <span id="aria_document" role="document"/> |
|
197 <span id="aria_form" role="form"/> |
|
198 <span id="aria_grid" role="grid"/> |
|
199 <span id="aria_gridcell" role="gridcell"/> |
|
200 <span id="aria_group" role="group"/> |
|
201 <span id="aria_heading" role="heading"/> |
|
202 <span id="aria_img" role="img"/> |
|
203 <span id="aria_link" role="link"/> |
|
204 <span id="aria_list" role="list"/> |
|
205 <span id="aria_listbox" role="listbox"/> |
|
206 <span id="aria_listitem" role="listitem"/> |
|
207 <span id="aria_log" role="log"/> |
|
208 <span id="aria_marquee" role="marquee"/> |
|
209 <span id="aria_math" role="math"/> |
|
210 <span id="aria_menu" role="menu"/> |
|
211 <span id="aria_menubar" role="menubar"/> |
|
212 <span id="aria_menuitem" role="menuitem"/> |
|
213 <span id="aria_menuitemcheckbox" role="menuitemcheckbox"/> |
|
214 <span id="aria_menuitemradio" role="menuitemradio"/> |
|
215 <span id="aria_note" role="note"/> |
|
216 <span id="aria_presentation" role="presentation" tabindex="0"/> |
|
217 <span id="aria_progressbar" role="progressbar"/> |
|
218 <span id="aria_radio" role="radio"/> |
|
219 <span id="aria_radiogroup" role="radiogroup"/> |
|
220 <span id="aria_region" role="region"/> |
|
221 <span id="aria_row" role="row"/> |
|
222 <span id="aria_rowheader" role="rowheader"/> |
|
223 <span id="aria_scrollbar" role="scrollbar"/> |
|
224 <span id="aria_separator" role="separator"/> |
|
225 <span id="aria_slider" role="slider"/> |
|
226 <span id="aria_spinbutton" role="spinbutton"/> |
|
227 <span id="aria_status" role="status"/> |
|
228 <span id="aria_tab" role="tab"/> |
|
229 <span id="aria_tablist" role="tablist"/> |
|
230 <span id="aria_tabpanel" role="tabpanel"/> |
|
231 <span id="aria_textbox" role="textbox"/> |
|
232 <span id="aria_timer" role="timer"/> |
|
233 <span id="aria_toolbar" role="toolbar"/> |
|
234 <span id="aria_tooltip" role="tooltip"/> |
|
235 <span id="aria_tree" role="tree"/> |
|
236 <span id="aria_treegrid" role="treegrid"/> |
|
237 <span id="aria_treeitem" role="treeitem"/> |
|
238 |
|
239 <article id="articlemain" role="main">a main area</article> |
|
240 <article id="articleform" role="form">a form area</article> |
|
241 |
|
242 <div id="testArticle" role="article" title="Test article"> |
|
243 <p>This is a paragraph inside the article.</p> |
|
244 </div> |
|
245 |
|
246 <!-- "live" roles --> |
|
247 <table role="log" id="log_table"> |
|
248 <tr><td>Table based log</td></tr> |
|
249 </table> |
|
250 <h1 role="marquee" id="marquee_h1">marquee</h1> |
|
251 <div role="timer" id="timer_div">timer</div> |
|
252 |
|
253 <!-- landmarks --> |
|
254 <div role="application" id="application">application</div> |
|
255 <div role="form" id="form">form</div> |
|
256 |
|
257 <!-- weak landmarks --> |
|
258 <div role="banner" id="banner">banner</div> |
|
259 <div role="complementary" id="complementary">complementary</div> |
|
260 <div role="contentinfo" id="contentinfo">contentinfo</div> |
|
261 <div role="main" id="main">main</div> |
|
262 <div role="navigation" id="navigation">navigation</div> |
|
263 <div role="search" id="search">search</div> |
|
264 |
|
265 <!-- landmarks are tables --> |
|
266 <table role="application" id="application_table">application table |
|
267 <tr><td>hi<td></tr></table> |
|
268 <table role="banner" id="banner_table">banner table |
|
269 <tr><td>hi<td></tr></table> |
|
270 <table role="complementary" id="complementary_table">complementary table |
|
271 <tr><td>hi<td></tr></table> |
|
272 <table role="contentinfo" id="contentinfo_table">contentinfo table |
|
273 <tr><td>hi<td></tr></table> |
|
274 <table role="main" id="main_table">main table |
|
275 <tr><td>hi<td></tr></table> |
|
276 <table role="navigation" id="navigation_table">navigation table |
|
277 <tr><td>hi<td></tr></table> |
|
278 <table role="search" id="search_table">search table |
|
279 <tr><td>hi<td></tr></table> |
|
280 |
|
281 <!-- test gEmptyRoleMap --> |
|
282 <table role="button"> |
|
283 <tr id="buttontable_row"> |
|
284 <td id="buttontable_cell">cell</td> |
|
285 </tr> |
|
286 </table> |
|
287 |
|
288 <!-- user agents must not map abstract roles to platform API --> |
|
289 <!-- test abstract base type roles --> |
|
290 <div role="composite" id="composite">composite</div> |
|
291 <div role="landmark" id="landmark">landmark</div> |
|
292 <div role="roletype" id="roletype">roletype</div> |
|
293 <div role="structure" id="structure">structure</div> |
|
294 <div role="widget" id="widget">widget</div> |
|
295 <div role="window" id="window">window</div> |
|
296 <!-- test abstract input roles --> |
|
297 <div role="input" id="input">input</div> |
|
298 <div role="range" id="range">range</div> |
|
299 <div role="select" id="select">select</div> |
|
300 <!-- test abstract structure roles --> |
|
301 <div role="section" id="section">section</div> |
|
302 <div role="sectionhead" id="sectionhead">sectionhead</div> |
|
303 |
|
304 <!-- roles transformed by ARIA state attributes --> |
|
305 <button aria-pressed="true" id="togglebutton"> |
|
306 |
|
307 <!-- take the first known mappable role --> |
|
308 <div role="wiggly:worm abc123 button" id="unknown_roles">worm button</div> |
|
309 |
|
310 <!-- misc roles --> |
|
311 <div role="note" id="note">note</div> |
|
312 <div role="scrollbar" id="scrollbar">scrollbar</div> |
|
313 |
|
314 <div id="dir" role="directory"> |
|
315 <div role="listitem">A</div> |
|
316 <div role="listitem">B</div> |
|
317 <div role="listitem">C</div> |
|
318 </div> |
|
319 |
|
320 <p>Image: |
|
321 <img id="img_eq" role="math" src="foo" alt="x^2 + y^2 + z^2"> |
|
322 </p> |
|
323 |
|
324 <p>Text: |
|
325 <span id="txt_eq" role="math" title="x^2 + y^2 + z^2">x<sup>2</sup> + |
|
326 y<sup>2</sup> + z<sup>2</sup></span> |
|
327 |
|
328 </body> |
|
329 </html> |