test_aria.html (34445B)
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 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 9 10 <script type="application/javascript" 11 src="../common.js"></script> 12 <script type="application/javascript" 13 src="../role.js"></script> 14 15 <script type="application/javascript"> 16 17 // To test initial roles on body elements, we need to use an iframe. 18 function testBodyRole(iframeId, role) { 19 let iframe = getNode(iframeId); 20 let doc = iframe.contentDocument; 21 let docAcc = getAccessible(doc); 22 testRole(docAcc, role); 23 } 24 25 async function doTest() { 26 // ARIA role map. 27 testRole("aria_alert", ROLE_ALERT); 28 testRole("aria_alert_mixed", ROLE_ALERT); 29 testRole("aria_alertdialog", ROLE_DIALOG); 30 testRole("aria_alertdialog_mixed", ROLE_DIALOG); 31 testRole("aria_application", ROLE_APPLICATION); 32 testRole("aria_application_mixed", ROLE_APPLICATION); 33 testRole("aria_article", ROLE_ARTICLE); 34 testRole("aria_article_mixed", ROLE_ARTICLE); 35 testRole("aria_blockquote", ROLE_BLOCKQUOTE); 36 testRole("aria_blockquote_mixed", ROLE_BLOCKQUOTE); 37 testRole("aria_button", ROLE_PUSHBUTTON); 38 testRole("aria_button_mixed", ROLE_PUSHBUTTON); 39 testRole("aria_caption", ROLE_CAPTION); 40 testRole("aria_caption_mixed", ROLE_CAPTION); 41 testRole("aria_checkbox", ROLE_CHECKBUTTON); 42 testRole("aria_checkbox_mixed", ROLE_CHECKBUTTON); 43 testRole("aria_code", ROLE_CODE); 44 testRole("aria_code_mixed", ROLE_CODE); 45 testRole("aria_combobox", ROLE_EDITCOMBOBOX); 46 testRole("aria_combobox_mixed", ROLE_EDITCOMBOBOX); 47 testRole("aria_comment", ROLE_COMMENT); 48 testRole("aria_comment_mixed", ROLE_COMMENT); 49 testRole("aria_deletion", ROLE_CONTENT_DELETION); 50 testRole("aria_deletion_mixed", ROLE_CONTENT_DELETION); 51 testRole("aria_dialog", ROLE_DIALOG); 52 testRole("aria_dialog_mixed", ROLE_DIALOG); 53 testRole("aria_directory", ROLE_LIST); 54 testRole("aria_directory_mixed", ROLE_LIST); 55 testRole("aria_document", ROLE_NON_NATIVE_DOCUMENT); 56 testRole("aria_document_mixed", ROLE_NON_NATIVE_DOCUMENT); 57 testRole("aria_form", ROLE_TEXT); 58 testRole("aria_form_mixed", ROLE_TEXT); 59 testRole("aria_form_with_label", ROLE_FORM); 60 testRole("aria_form_with_label_mixed", ROLE_FORM); 61 testRole("aria_feed", ROLE_GROUPING); 62 testRole("aria_feed_mixed", ROLE_GROUPING); 63 testRole("aria_figure", ROLE_FIGURE); 64 testRole("aria_figure_mixed", ROLE_FIGURE); 65 testRole("aria_grid", ROLE_GRID); 66 testRole("aria_grid_mixed", ROLE_GRID); 67 testRole("aria_group", ROLE_GROUPING); 68 testRole("aria_group_mixed", ROLE_GROUPING); 69 testRole("aria_heading", ROLE_HEADING); 70 testRole("aria_heading_mixed", ROLE_HEADING); 71 testRole("aria_img", ROLE_GRAPHIC); 72 testRole("aria_img_mixed", ROLE_GRAPHIC); 73 testRole("aria_insertion", ROLE_CONTENT_INSERTION); 74 testRole("aria_insertion_mixed", ROLE_CONTENT_INSERTION); 75 testRole("aria_link", ROLE_LINK); 76 testRole("aria_link_mixed", ROLE_LINK); 77 testRole("aria_list", ROLE_LIST); 78 testRole("aria_list_mixed", ROLE_LIST); 79 testRole("aria_listbox", ROLE_LISTBOX); 80 testRole("aria_listbox_mixed", ROLE_LISTBOX); 81 testRole("aria_log", ROLE_TEXT); // weak role 82 testRole("aria_log_mixed", ROLE_TEXT); // weak role 83 testRole("aria_mark", ROLE_MARK); 84 testRole("aria_mark_mixed", ROLE_MARK); 85 testRole("aria_marquee", ROLE_ANIMATION); 86 testRole("aria_marquee_mixed", ROLE_ANIMATION); 87 testRole("aria_math", ROLE_FLAT_EQUATION); 88 testRole("aria_math_mixed", ROLE_FLAT_EQUATION); 89 testRole("aria_menu", ROLE_MENUPOPUP); 90 testRole("aria_menu_mixed", ROLE_MENUPOPUP); 91 testRole("aria_menubar", ROLE_MENUBAR); 92 testRole("aria_menubar_mixed", ROLE_MENUBAR); 93 testRole("aria_meter", ROLE_METER); 94 testRole("aria_meter_mixed", ROLE_METER); 95 testRole("aria_note", ROLE_NOTE); 96 testRole("aria_note_mixed", ROLE_NOTE); 97 testRole("aria_paragraph", ROLE_PARAGRAPH); 98 testRole("aria_paragraph_mixed", ROLE_PARAGRAPH); 99 testRole("aria_presentation", ROLE_TEXT); // weak role 100 testRole("aria_presentation_mixed", ROLE_TEXT); // weak role 101 testRole("aria_progressbar", ROLE_PROGRESSBAR); 102 testRole("aria_progressbar_mixed", ROLE_PROGRESSBAR); 103 testRole("aria_radio", ROLE_RADIOBUTTON); 104 testRole("aria_radio_mixed", ROLE_RADIOBUTTON); 105 testRole("aria_radiogroup", ROLE_RADIO_GROUP); 106 testRole("aria_radiogroup_mixed", ROLE_RADIO_GROUP); 107 testRole("aria_region_no_name", ROLE_TEXT); 108 testRole("aria_region_no_name_mixed", ROLE_TEXT); 109 testRole("aria_region_has_label", ROLE_REGION); 110 testRole("aria_region_has_label_mixed", ROLE_REGION); 111 testRole("aria_region_has_labelledby", ROLE_REGION); 112 testRole("aria_region_has_labelledby_mixed", ROLE_REGION); 113 testRole("aria_region_has_title", ROLE_REGION); 114 testRole("aria_region_has_title_mixed", ROLE_REGION); 115 testRole("aria_region_empty_name", ROLE_TEXT); 116 testRole("aria_region_empty_name_mixed", ROLE_TEXT); 117 testRole("aria_region_as_table_with_caption", ROLE_REGION); 118 testRole("aria_region_as_table_with_caption_mixed", ROLE_REGION); 119 testRole("aria_region_as_table_with_miscaption", ROLE_REGION); 120 testRole("aria_region_as_table_with_miscaption_mixed", ROLE_REGION); 121 testRole("aria_scrollbar", ROLE_SCROLLBAR); 122 testRole("aria_scrollbar_mixed", ROLE_SCROLLBAR); 123 testRole("aria_searchbox", ROLE_SEARCHBOX); 124 testRole("aria_searchbox_mixed", ROLE_SEARCHBOX); 125 testRole("aria_separator", ROLE_SEPARATOR); 126 testRole("aria_separator_mixed", ROLE_SEPARATOR); 127 testRole("aria_slider", ROLE_SLIDER); 128 testRole("aria_slider_mixed", ROLE_SLIDER); 129 testRole("aria_spinbutton", ROLE_SPINBUTTON); 130 testRole("aria_spinbutton_mixed", ROLE_SPINBUTTON); 131 testRole("aria_status", ROLE_STATUSBAR); 132 testRole("aria_status_mixed", ROLE_STATUSBAR); 133 testRole("aria_subscript", ROLE_SUBSCRIPT); 134 testRole("aria_subscript_mixed", ROLE_SUBSCRIPT); 135 testRole("aria_suggestion", ROLE_SUGGESTION); 136 testRole("aria_suggestion_mixed", ROLE_SUGGESTION); 137 testRole("aria_superscript", ROLE_SUPERSCRIPT); 138 testRole("aria_superscript_mixed", ROLE_SUPERSCRIPT); 139 testRole("aria_switch", ROLE_SWITCH); 140 testRole("aria_switch_mixed", ROLE_SWITCH); 141 testRole("aria_tablist", ROLE_PAGETABLIST); 142 testRole("aria_tablist_mixed", ROLE_PAGETABLIST); 143 testRole("aria_tabpanel", ROLE_PROPERTYPAGE); 144 testRole("aria_tabpanel_mixed", ROLE_PROPERTYPAGE); 145 testRole("aria_term", ROLE_TERM); 146 testRole("aria_term_mixed", ROLE_TERM); 147 testRole("aria_textbox", ROLE_ENTRY); 148 testRole("aria_textbox_mixed", ROLE_ENTRY); 149 testRole("aria_timer", ROLE_TEXT); // weak role 150 testRole("aria_timer_mixed", ROLE_TEXT); // weak role 151 testRole("aria_toolbar", ROLE_TOOLBAR); 152 testRole("aria_toolbar_mixed", ROLE_TOOLBAR); 153 testRole("aria_tooltip", ROLE_TOOLTIP); 154 testRole("aria_tooltip_mixed", ROLE_TOOLTIP); 155 testRole("aria_tree", ROLE_OUTLINE); 156 testRole("aria_tree_mixed", ROLE_OUTLINE); 157 testRole("aria_treegrid", ROLE_TREE_TABLE); 158 testRole("aria_treegrid_mixed", ROLE_TREE_TABLE); 159 160 // Note: 161 // The phrase "weak foo" here means that there is no good foo-to-platform 162 // role mapping. Similarly "strong foo" means there is a good foo-to- 163 // platform role mapping. 164 165 testRole("articlemain", ROLE_LANDMARK); 166 testRole("articlemain_mixed", ROLE_LANDMARK); 167 testRole("articleform", ROLE_ARTICLE); 168 testRole("articleform_mixed", ROLE_ARTICLE); 169 testRole("articleform_label", ROLE_FORM); 170 testRole("articleform_label_mixed", ROLE_FORM); 171 172 // Test article exposed as article 173 testRole("testArticle", ROLE_ARTICLE); 174 testRole("testArticle_mixed", ROLE_ARTICLE); 175 176 // weak roles that are forms of "live regions" 177 testRole("log_table", ROLE_TABLE); 178 testRole("log_table_mixed", ROLE_TABLE); 179 testRole("timer_div", ROLE_SECTION); 180 testRole("timer_div_mixed", ROLE_SECTION); 181 182 // other roles that are forms of "live regions" 183 testRole("marquee_h1", ROLE_ANIMATION); 184 testRole("marquee_h1_mixed", ROLE_ANIMATION); 185 186 // strong landmark 187 testRole("application", ROLE_APPLICATION); 188 testRole("application_mixed", ROLE_APPLICATION); 189 testRole("form", ROLE_SECTION); 190 testRole("form_mixed", ROLE_SECTION); 191 testRole("form_label", ROLE_FORM); 192 testRole("form_label_mixed", ROLE_FORM); 193 testRole("application_table", ROLE_APPLICATION); 194 testRole("application_table_mixed", ROLE_APPLICATION); 195 196 // landmarks 197 let landmarks = ["banner", "complementary", "contentinfo", 198 "main", "navigation", "search"]; 199 for (const l in landmarks) { 200 testRole(landmarks[l], ROLE_LANDMARK); 201 testRole(landmarks[l] + "_mixed", ROLE_LANDMARK); 202 } 203 204 for (const l in landmarks) { 205 let id = landmarks[l] + "_table"; 206 testRole(id, ROLE_LANDMARK); 207 testRole(id + "_mixed", ROLE_LANDMARK); 208 209 let accessibleTable = getAccessible(id, [nsIAccessibleTable], null, 210 DONOTFAIL_IF_NO_INTERFACE); 211 ok(!!accessibleTable, "landmarked table should have nsIAccessibleTable"); 212 213 accessibleTable = getAccessible(id+"_mixed", [nsIAccessibleTable], null, 214 DONOTFAIL_IF_NO_INTERFACE); 215 ok(!!accessibleTable, "Uppercase landmarked table should have nsIAccessibleTable"); 216 217 if (accessibleTable) 218 is(accessibleTable.getCellAt(0, 0).firstChild.name, "hi", "no cell"); 219 } 220 221 // //////////////////////////////////////////////////////////////////////// 222 // test gEmptyRoleMap 223 testRole("buttontable_row", ROLE_TEXT_CONTAINER); 224 testRole("buttontable_row_mixed", ROLE_TEXT_CONTAINER); 225 testRole("buttontable_cell", ROLE_TEXT_CONTAINER); 226 testRole("buttontable_cell_mixed", ROLE_TEXT_CONTAINER); 227 228 // abstract roles 229 var abstract_roles = ["composite", "landmark", "structure", "widget", 230 "window", "input", "range", "select", "section", 231 "sectionhead"]; 232 for (const a in abstract_roles) { 233 testRole(abstract_roles[a], ROLE_SECTION); 234 testRole(abstract_roles[a]+ "_mixed", ROLE_SECTION); 235 } 236 237 // //////////////////////////////////////////////////////////////////////// 238 // roles transformed by ARIA state attributes 239 testRole("togglebutton", ROLE_TOGGLE_BUTTON); 240 testRole("togglebutton_mixed", ROLE_TOGGLE_BUTTON); 241 testRole("implicit_gridcell", ROLE_GRID_CELL); 242 testRole("implicit_gridcell_mixed", ROLE_GRID_CELL); 243 244 // //////////////////////////////////////////////////////////////////////// 245 // child roles dependent on ancestor role presence 246 testRole("aria_columnheader", ROLE_COLUMNHEADER); 247 testRole("aria_columnheader_mixed", ROLE_COLUMNHEADER); 248 testRole("aria_gridcell", ROLE_GRID_CELL); 249 testRole("aria_gridcell_mixed", ROLE_GRID_CELL); 250 testRole("aria_rowheader", ROLE_ROWHEADER); 251 testRole("aria_rowheader_mixed", ROLE_ROWHEADER); 252 testRole("aria_listitem", ROLE_LISTITEM); 253 testRole("aria_listitem_mixed", ROLE_LISTITEM); 254 testRole("aria_menuitem", ROLE_MENUITEM); 255 testRole("aria_menuitem_mixed", ROLE_MENUITEM); 256 testRole("aria_menuitemcheckbox", ROLE_CHECK_MENU_ITEM); 257 testRole("aria_menuitemcheckbox_mixed", ROLE_CHECK_MENU_ITEM); 258 testRole("aria_menuitemradio", ROLE_RADIO_MENU_ITEM); 259 testRole("aria_menuitemradio_mixed", ROLE_RADIO_MENU_ITEM); 260 testRole("aria_row", ROLE_ROW); 261 testRole("aria_row_mixed", ROLE_ROW); 262 testRole("aria_tab", ROLE_PAGETAB); 263 testRole("aria_tab_mixed", ROLE_PAGETAB); 264 testRole("aria_treeitem", ROLE_OUTLINEITEM); 265 testRole("aria_treeitem_mixed", ROLE_OUTLINEITEM); 266 267 // //////////////////////////////////////////////////////////////////////// 268 // ignore unknown roles, take first known 269 testRole("unknown_roles", ROLE_PUSHBUTTON); 270 testRole("unknown_roles_mixed", ROLE_PUSHBUTTON); 271 272 // //////////////////////////////////////////////////////////////////////// 273 // misc roles 274 testRole("note", ROLE_NOTE); 275 testRole("note_mixed", ROLE_NOTE); 276 testRole("scrollbar", ROLE_SCROLLBAR); 277 testRole("scrollbar_mixed", ROLE_SCROLLBAR); 278 testRole("dir", ROLE_LIST); 279 testRole("dir_mixed", ROLE_LIST); 280 281 // //////////////////////////////////////////////////////////////////////// 282 // test document role map update 283 var testDoc = getAccessible(document, [nsIAccessibleDocument]); 284 testRole(testDoc, ROLE_DOCUMENT); 285 document.body.setAttribute("role", "application"); 286 testRole(testDoc, ROLE_APPLICATION); 287 document.body.setAttribute("role", "APPLICATION"); 288 testRole(testDoc, ROLE_APPLICATION); 289 document.body.setAttribute("role", "dialog"); 290 testRole(testDoc, ROLE_DIALOG); 291 document.body.setAttribute("role", "DIALOG"); 292 testRole(testDoc, ROLE_DIALOG); 293 // Other roles aren't valid on body elements. 294 document.body.setAttribute("role", "document"); 295 testRole(testDoc, ROLE_DOCUMENT); 296 document.body.setAttribute("role", "DOCUMENT"); 297 testRole(testDoc, ROLE_DOCUMENT); 298 document.body.setAttribute("role", "button"); 299 testRole(testDoc, ROLE_DOCUMENT); 300 document.body.setAttribute("role", "BUTTON"); 301 testRole(testDoc, ROLE_DOCUMENT); 302 document.body.setAttribute("role", "main"); 303 testRole(testDoc, ROLE_DOCUMENT); 304 document.body.setAttribute("role", "MAIN"); 305 testRole(testDoc, ROLE_DOCUMENT); 306 307 // Test equation image 308 testRole("img_eq", ROLE_FLAT_EQUATION); 309 testRole("img_eq_mixed", ROLE_FLAT_EQUATION); 310 311 // Test textual equation 312 testRole("txt_eq", ROLE_FLAT_EQUATION); 313 testRole("txt_eq_mixed", ROLE_FLAT_EQUATION); 314 315 // Test initial ARIA roles on the body element. 316 testBodyRole("iframe_aria_application", ROLE_APPLICATION); 317 testBodyRole("iframe_aria_application_mixed", ROLE_APPLICATION); 318 testBodyRole("iframe_aria_dialog", ROLE_DIALOG); 319 testBodyRole("iframe_aria_dialog_mixed", ROLE_DIALOG); 320 // role="alert" is valid on the body of chrome documents. 321 let win = Services.ww.openWindow( 322 null, 323 "chrome://mochitests/content/a11y/accessible/tests/mochitest/role/chrome_body_role_alert.xhtml", 324 "_blank", 325 "chrome", 326 [] 327 ); 328 await new Promise(resolve => addA11yLoadEvent(resolve, win)); 329 testRole(win.document, ROLE_ALERT); 330 win.close(); 331 // Other roles aren't valid on body elements. 332 testBodyRole("iframe_aria_document", ROLE_DOCUMENT); 333 testBodyRole("iframe_aria_document_mixed", ROLE_DOCUMENT); 334 testBodyRole("iframe_aria_button", ROLE_DOCUMENT); 335 testBodyRole("iframe_aria_button_mixed", ROLE_DOCUMENT); 336 testBodyRole("iframe_aria_main", ROLE_DOCUMENT); 337 testBodyRole("iframe_aria_main_mixed", ROLE_DOCUMENT); 338 // role="alert" is not valid on the body of content documents. 339 testBodyRole("iframe_aria_alert", ROLE_DOCUMENT); 340 testBodyRole("iframe_aria_alert_mixed", ROLE_DOCUMENT); 341 342 SimpleTest.finish(); 343 } 344 345 SimpleTest.waitForExplicitFinish(); 346 addA11yLoadEvent(doTest); 347 </script> 348 </head> 349 <body> 350 351 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=428479">Mozilla Bug 428479</a> 352 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=429666">Mozilla Bug 429666</a> 353 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=481114">Mozilla Bug 481114</a> 354 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=469688">Mozilla Bug 469688</a> 355 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=469688">Mozilla Bug 520188</a> 356 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=529289">Mozilla Bug 529289</a> 357 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=529289">Mozilla Bug 607219</a> 358 <a target="_blank" 359 title="HTML buttons with aria-pressed not exposing IA2 TOGGLE_BUTTON role" 360 href="https://bugzilla.mozilla.org/show_bug.cgi?id=725432"> 361 Bug 725432 362 </a> 363 <a target="_blank" 364 title="Map ARIA role FORM" 365 href="https://bugzilla.mozilla.org/show_bug.cgi?id=735645"> 366 Bug 735645 367 </a> 368 <a target="_blank" 369 href="https://bugzilla.mozilla.org/show_bug.cgi?id=1136563" 370 title="Support ARIA 1.1 switch role"> 371 Bug 1136563 372 </a> 373 <a target="_blank" 374 href="https://bugzilla.mozilla.org/show_bug.cgi?id=1121518" 375 title="Support ARIA 1.1 searchbox role"> 376 Bug 1121518 377 </a> 378 <a target="_blank" 379 href="https://bugzilla.mozilla.org/show_bug.cgi?id=1356049" 380 title="Map ARIA figure role"> 381 Bug 1356049 382 </a> 383 <p id="display"></p> 384 <div id="content" style="display: none"></div> 385 <pre id="test"> 386 </pre> 387 388 <span id="aria_alert" role="alert"></span> 389 <span id="aria_alert_mixed" role="aLERt"></span> 390 <span id="aria_alertdialog" role="alertdialog"></span> 391 <span id="aria_alertdialog_mixed" role="aLERTDIALOg"></span> 392 <span id="aria_application" role="application"></span> 393 <span id="aria_application_mixed" role="aPPLICATIOn"></span> 394 <span id="aria_article" role="article"></span> 395 <span id="aria_article_mixed" role="aRTICLe"></span> 396 <span id="aria_blockquote" role="blockquote"></span> 397 <span id="aria_blockquote_mixed" role="bLOCKQUOTe"></span> 398 <span id="aria_button" role="button"></span> 399 <span id="aria_button_mixed" role="bUTTOn"></span> 400 <span id="aria_caption" role="caption"></span> 401 <span id="aria_caption_mixed" role="cAPTIOn"></span> 402 <span id="aria_checkbox" role="checkbox"></span> 403 <span id="aria_checkbox_mixed" role="cHECKBOx"></span> 404 <span id="aria_code" role="code"></span> 405 <span id="aria_code_mixed" role="cODe"></span> 406 <span id="aria_combobox" role="combobox"></span> 407 <span id="aria_combobox_mixed" role="cOMBOBOx"></span> 408 <span id="aria_comment" role="comment"></span> 409 <span id="aria_comment_mixed" role="cOMMENt"></span> 410 <span id="aria_deletion" role="deletion"></span> 411 <span id="aria_deletion_mixed" role="dELETIOn"></span> 412 <span id="aria_dialog" role="dialog"></span> 413 <span id="aria_dialog_mixed" role="dIALOg"></span> 414 <span id="aria_directory" role="directory"></span> 415 <span id="aria_directory_mixed" role="dIRECTORy"></span> 416 <span id="aria_document" role="document"></span> 417 <span id="aria_document_mixed" role="dOCUMENt"></span> 418 <span id="aria_form" role="form"></span> 419 <span id="aria_form_mixed" role="fORm"></span> 420 <span id="aria_form_with_label" role="form" aria-label="Label"></span> 421 <span id="aria_form_with_label_mixed" role="fORm" aria-label="Label"></span> 422 <span id="aria_feed" role="feed"></span> 423 <span id="aria_feed_mixed" role="fEEd"></span> 424 <span id="aria_figure" role="figure"></span> 425 <span id="aria_figure_mixed" role="fIGURe"></span> 426 <span id="aria_grid" role="grid"></span> 427 <span id="aria_grid_mixed" role="gRId"></span> 428 <span id="aria_group" role="group"></span> 429 <span id="aria_group_mixed" role="gROUp"></span> 430 <span id="aria_heading" role="heading"></span> 431 <span id="aria_heading_mixed" role="hEADINg"></span> 432 <span id="aria_img" role="img"></span> 433 <span id="aria_img_mixed" role="iMg"></span> 434 <span id="aria_insertion" role="insertion"></span> 435 <span id="aria_insertion_mixed" role="iNSERTIOn"></span> 436 <span id="aria_link" role="link"></span> 437 <span id="aria_link_mixed" role="lINk"></span> 438 <span id="aria_list" role="list"></span> 439 <span id="aria_list_mixed" role="lISt"></span> 440 <span id="aria_listbox" role="listbox"></span> 441 <span id="aria_listbox_mixed" role="lISTBOx"></span> 442 <span id="aria_log" role="log"></span> 443 <span id="aria_log_mixed" role="lOg"></span> 444 <span id="aria_mark" role="mark"></span> 445 <span id="aria_mark_mixed" role="mARk"></span> 446 <span id="aria_marquee" role="marquee"></span> 447 <span id="aria_marquee_mixed" role="mARQUEe"></span> 448 <span id="aria_math" role="math"></span> 449 <span id="aria_math_mixed" role="mATh"></span> 450 <span id="aria_menu" role="menu"></span> 451 <span id="aria_menu_mixed" role="mENu"></span> 452 <span id="aria_menubar" role="menubar"></span> 453 <span id="aria_menubar_mixed" role="mENUBAr"></span> 454 <span id="aria_meter" role="meter"></span> 455 <span id="aria_meter_mixed" role="meTer"></span> 456 <span id="aria_note" role="note"></span> 457 <span id="aria_note_mixed" role="nOTe"></span> 458 <span id="aria_paragraph" role="paragraph"></span> 459 <span id="aria_paragraph_mixed" role="pARAGRAPh"></span> 460 <span id="aria_presentation" role="presentation" tabindex="0"></span> 461 <span id="aria_presentation_mixed" role="pRESENTATIOn" tabindex="0"></span> 462 <span id="aria_progressbar" role="progressbar"></span> 463 <span id="aria_progressbar_mixed" role="pROGRESSBAr"></span> 464 <span id="aria_radio" role="radio"></span> 465 <span id="aria_radio_mixed" role="rADIo"></span> 466 <span id="aria_radiogroup" role="radiogroup"></span> 467 <span id="aria_radiogroup_mixed" role="rADIOGROUp"></span> 468 <span id="aria_region_no_name" role="region"></span> 469 <span id="aria_region_no_name_mixed" role="rEGIOn"></span> 470 <span id="aria_region_has_label" role="region" aria-label="label"></span> 471 <span id="aria_region_has_label_mixed" role="rEGIOn" aria-label="label"></span> 472 <span id="aria_region_has_labelledby" role="region" aria-labelledby="label"><span id="label" aria-label="label"></span> 473 <span id="aria_region_has_labelledby_mixed" role="rEGIOn" aria-labelledby="label"><span id="label" aria-label="label"></span> 474 <span id="aria_region_has_title" role="region" title="title"></span> 475 <span id="aria_region_has_title_mixed" role="rEGIOn" title="title"></span> 476 <span id="aria_region_empty_name" role="region" aria-label="" title="" aria-labelledby="empty"></span><span id="empty"></span> 477 <span id="aria_region_empty_name_mixed" role="rEGIOn" aria-label="" title="" aria-labelledby="empty"></span><span id="empty"></span> 478 <table id="aria_region_as_table_with_caption" role="region"><caption>hello</caption></table> 479 <table id="aria_region_as_table_with_caption_mixed" role="rEGIOn"><caption>hello</caption></table> 480 <table id="aria_region_as_table_with_miscaption" role="region"><caption role="option">hello</caption></table> 481 <table id="aria_region_as_table_with_miscaption_mixed" role="rEGIOn"><caption role="option">hello</caption></table> 482 <span id="aria_scrollbar" role="scrollbar"></span> 483 <span id="aria_scrollbar_mixed" role="sCROLLBAr"></span> 484 <span id="aria_searchbox" role="searchbox"></span> 485 <span id="aria_searchbox_mixed" role="sEARCHBOx"></span> 486 <span id="aria_separator" role="separator"></span> 487 <span id="aria_separator_mixed" role="sEPARATOr"></span> 488 <span id="aria_slider" role="slider"></span> 489 <span id="aria_slider_mixed" role="sLIDEr"></span> 490 <span id="aria_spinbutton" role="spinbutton"></span> 491 <span id="aria_spinbutton_mixed" role="sPINBUTTOn"></span> 492 <span id="aria_status" role="status"></span> 493 <span id="aria_status_mixed" role="sTATUs"></span> 494 <span id="aria_subscript" role="subscript"></span> 495 <span id="aria_subscript_mixed" role="sUBSCRIPt"></span> 496 <span id="aria_suggestion" role="suggestion"></span> 497 <span id="aria_suggestion_mixed" role="sUGGESTIOn"></span> 498 <span id="aria_superscript" role="superscript"></span> 499 <span id="aria_superscript_mixed" role="sUPERSCRIPt"></span> 500 <span id="aria_switch" role="switch"></span> 501 <span id="aria_switch_mixed" role="sWITCh"></span> 502 <span id="aria_tablist" role="tablist"></span> 503 <span id="aria_tablist_mixed" role="tABLISt"></span> 504 <span id="aria_tabpanel" role="tabpanel"></span> 505 <span id="aria_tabpanel_mixed" role="tABPANEl"></span> 506 <span id="aria_term" role="term"></span> 507 <span id="aria_term_mixed" role="tERm"></span> 508 <span id="aria_textbox" role="textbox"></span> 509 <span id="aria_textbox_mixed" role="tEXTBOx"></span> 510 <span id="aria_timer" role="timer"></span> 511 <span id="aria_timer_mixed" role="tIMEr"></span> 512 <span id="aria_toolbar" role="toolbar"></span> 513 <span id="aria_toolbar_mixed" role="tOOLBAr"></span> 514 <span id="aria_tooltip" role="tooltip"></span> 515 <span id="aria_tooltip_mixed" role="tOOLTIp"></span> 516 <span id="aria_tree" role="tree"></span> 517 <span id="aria_tree_mixed" role="tREe"></span> 518 <span id="aria_treegrid" role="treegrid"></span> 519 <span id="aria_treegrid_mixed" role="tREEGRId"></span> 520 521 <article id="articlemain" role="main">a main area</article> 522 <article id="articlemain_mixed" role="mAIn">a main area</article> 523 <article id="articleform" role="form">a form area</article> 524 <article id="articleform_mixed" role="fORm">a form area</article> 525 <article id="articleform_label" aria-label="form" role="form">a form area</article> 526 <article id="articleform_label_mixed" aria-label="form" role="fORm">a form area</article> 527 528 <div id="testArticle" role="article" title="Test article"> 529 <p>This is a paragraph inside the article.</p> 530 </div> 531 532 <div id="testArticle_mixed" role="aRTICLe" title="Test article"> 533 <p>This is a paragraph inside the article.</p> 534 </div> 535 536 <!-- "live" roles --> 537 <table role="log" id="log_table"> 538 <tr><td>Table based log</td></tr> 539 </table> 540 <table role="LOG" id="log_table_mixed"> 541 <tr><td>Table based log</td></tr> 542 </table> 543 <h1 role="marquee" id="marquee_h1">marquee</h1> 544 <h1 role="MARQUEE" id="marquee_h1_mixed">marquee</h1> 545 <div role="timer" id="timer_div">timer</div> 546 <div role="TIMER" id="timer_div_mixed">timer</div> 547 548 <!-- landmarks --> 549 <div role="application" id="application">application</div> 550 <div role="aPPLICATIOn" id="application_mixed">application</div> 551 <div role="form" id="form">form</div> 552 <div role="fORm" id="form_mixed">form</div> 553 <div role="form" id="form_label" aria-label="form">form</div> 554 <div role="fORm" id="form_label_mixed" aria-label="form">form</div> 555 556 <!-- weak landmarks --> 557 <div role="banner" id="banner">banner</div> 558 <div role="bANNEr" id="banner_mixed">banner</div> 559 <div role="complementary" id="complementary">complementary</div> 560 <div role="cOMPLEMENTARy" id="complementary_mixed">complementary</div> 561 <div role="contentinfo" id="contentinfo">contentinfo</div> 562 <div role="cONTENTINFo" id="contentinfo_mixed">contentinfo</div> 563 <div role="main" id="main">main</div> 564 <div role="mAIN" id="main_mixed">main</div> 565 <div role="navigation" id="navigation">navigation</div> 566 <div role="nAVIGATIOn" id="navigation_mixed">navigation</div> 567 <div role="search" id="search">search</div> 568 <div role="sEARCh" id="search_mixed">search</div> 569 570 <!-- landmarks are tables --> 571 <table role="application" id="application_table">application table 572 <tr><td>hi<td></tr></table> 573 <table role="aPPLICATIOn" id="application_table_mixed">application table 574 <tr><td>hi<td></tr></table> 575 <table role="banner" id="banner_table">banner table 576 <tr><td>hi<td></tr></table> 577 <table role="bANNEr" id="banner_table_mixed">banner table 578 <tr><td>hi<td></tr></table> 579 <table role="complementary" id="complementary_table">complementary table 580 <tr><td>hi<td></tr></table> 581 <table role="cOMPLEMENTARy" id="complementary_table_mixed">complementary table 582 <tr><td>hi<td></tr></table> 583 <table role="contentinfo" id="contentinfo_table">contentinfo table 584 <tr><td>hi<td></tr></table> 585 <table role="cONTENTINFo" id="contentinfo_table_mixed">contentinfo table 586 <tr><td>hi<td></tr></table> 587 <table role="main" id="main_table">main table 588 <tr><td>hi<td></tr></table> 589 <table role="mAIn" id="main_table_mixed">main table 590 <tr><td>hi<td></tr></table> 591 <table role="navigation" id="navigation_table">navigation table 592 <tr><td>hi<td></tr></table> 593 <table role="nAVIGATIOn" id="navigation_table_mixed">navigation table 594 <tr><td>hi<td></tr></table> 595 <table role="search" id="search_table">search table 596 <tr><td>hi<td></tr></table> 597 <table role="sEARCh" id="search_table_mixed">search table 598 <tr><td>hi<td></tr></table> 599 600 <!-- test gEmptyRoleMap --> 601 <table role="button"> 602 <tr id="buttontable_row"> 603 <td id="buttontable_cell">cell</td> 604 </tr> 605 </table> 606 <table role="bUTTOn"> 607 <tr id="buttontable_row_mixed"> 608 <td id="buttontable_cell_mixed">cell</td> 609 </tr> 610 </table> 611 612 <!-- user agents must not map abstract roles to platform API --> 613 <!-- test abstract base type roles --> 614 <div role="composite" id="composite">composite</div> 615 <div role="cOMPOSITe" id="composite_mixed">composite</div> 616 <div role="landmark" id="landmark">landmark</div> 617 <div role="lANDMARk" id="landmark_mixed">landmark</div> 618 <div role="roletype" id="roletype">roletype</div> 619 <div role="rOLETYPe" id="roletype_mixed">roletype</div> 620 <div role="structure" id="structure">structure</div> 621 <div role="sTRUCTURe" id="structure_mixed">structure</div> 622 <div role="widget" id="widget">widget</div> 623 <div role="wIDGEt" id="widget_mixed">widget</div> 624 <div role="window" id="window">window</div> 625 <div role="wINDOw" id="window_mixed">window</div> 626 <!-- test abstract input roles --> 627 <div role="input" id="input">input</div> 628 <div role="iNPUt" id="input_mixed">input</div> 629 <div role="range" id="range">range</div> 630 <div role="rANGe" id="range_mixed">range</div> 631 <div role="select" id="select">select</div> 632 <div role="sELECt" id="select_mixed">select</div> 633 <!-- test abstract structure roles --> 634 <div role="section" id="section">section</div> 635 <div role="sECTIOn" id="section_mixed">section</div> 636 <div role="sectionhead" id="sectionhead">sectionhead</div> 637 <div role="sECTIONHEAd" id="sectionhead_mixed">sectionhead</div> 638 639 <!-- roles transformed by ARIA roles of ancestors --> 640 <table role="grid"> 641 <tr> 642 <td id="implicit_gridcell">foo</td> 643 </tr> 644 </table> 645 <table role="gRId"> 646 <tr> 647 <td id="implicit_gridcell_mixed">foo</td> 648 </tr> 649 </table> 650 651 <!-- child roles dependent on ancestor role presence --> 652 <div role="grid"> 653 <div role="row"> 654 <span id="aria_columnheader" role="columnheader"></span> 655 <span id="aria_columnheader_mixed" role="cOLUMNHEADEr"></span> 656 <span id="aria_gridcell" role="gridcell"></span> 657 <span id="aria_gridcell_mixed" role="gRIDCELl"></span> 658 <span id="aria_rowheader" role="rowheader"></span> 659 <span id="aria_rowheader_mixed" role="rOWHEADEr"></span> 660 </div> 661 </div> 662 <div role="list"> 663 <span id="aria_listitem" role="listitem"></span> 664 <span id="aria_listitem_mixed" role="lISTITEm"></span> 665 </div> 666 <div role="menu"> 667 <span id="aria_menuitem" role="menuitem"></span> 668 <span id="aria_menuitem_mixed" role="mENUITEm"></span> 669 <span id="aria_menuitemcheckbox" role="menuitemcheckbox"></span> 670 <span id="aria_menuitemcheckbox_mixed" role="mENUITEMCHECKBOx"></span> 671 <span id="aria_menuitemradio" role="menuitemradio"></span> 672 <span id="aria_menuitemradio_mixed" role="mENUITEMRADIo"></span> 673 </div> 674 <div role="table"> 675 <span id="aria_row" role="row"></span> 676 <span id="aria_row_mixed" role="rOw"></span> 677 </div> 678 <div role="tablist"> 679 <span id="aria_tab" role="tab"></span> 680 <span id="aria_tab_mixed" role="tAb"></span> 681 </div> 682 <div role="tree"> 683 <span id="aria_treeitem" role="treeitem"></span> 684 <span id="aria_treeitem_mixed" role="tREEITEm"></span> 685 </div> 686 687 <!-- roles transformed by ARIA state attributes --> 688 <button aria-pressed="true" id="togglebutton"></button> 689 <button aria-pressed="tRUe" id="togglebutton_mixed"></button> 690 691 <!-- take the first known mappable role --> 692 <div role="wiggly:worm abc123 button" id="unknown_roles">worm button</div> 693 <div role="wiggly:worm abc123 bUTTOn" id="unknown_roles_mixed">worm button</div> 694 695 <!-- misc roles --> 696 <div role="note" id="note">note</div> 697 <div role="nOTe" id="note_mixed">note</div> 698 <div role="scrollbar" id="scrollbar">scrollbar</div> 699 <div role="sCROLLBAr" id="scrollbar_mixed">scrollbar</div> 700 701 <div id="dir" role="directory"> 702 <div role="listitem">A</div> 703 <div role="listitem">B</div> 704 <div role="listitem">C</div> 705 </div> 706 707 <div id="dir_mixed" role="dIRECTORy"> 708 <div role="listitem">A</div> 709 <div role="listitem">B</div> 710 <div role="listitem">C</div> 711 </div> 712 713 <p>Image: 714 <img id="img_eq" role="math" src="foo" alt="x^2 + y^2 + z^2"> 715 </p> 716 717 <p>Image: 718 <img id="img_eq_mixed" role="mATh" src="foo" alt="x^2 + y^2 + z^2"> 719 </p> 720 721 <p>Text: 722 <span id="txt_eq" role="math" title="x^2 + y^2 + z^2">x<sup>2</sup> + 723 y<sup>2</sup> + z<sup>2</sup></span> 724 </p> 725 <p>Text: 726 <span id="txt_eq_mixed" role="mATh" title="x^2 + y^2 + z^2">x<sup>2</sup> + 727 y<sup>2</sup> + z<sup>2</sup></span> 728 </p> 729 730 <iframe id="iframe_aria_application" 731 src="data:text/html,<body role='application'>"></iframe> 732 <iframe id="iframe_aria_application_mixed" 733 src="data:text/html,<body role='aPPLICATIOn'>"></iframe> 734 <iframe id="iframe_aria_dialog" 735 src="data:text/html,<body role='dialog'>"></iframe> 736 <iframe id="iframe_aria_dialog_mixed" 737 src="data:text/html,<body role='dIALOg'>"></iframe> 738 <iframe id="iframe_aria_document" 739 src="data:text/html,<body role='document'>"></iframe> 740 <iframe id="iframe_aria_document_mixed" 741 src="data:text/html,<body role='dOCUMENt'>"></iframe> 742 <iframe id="iframe_aria_button" 743 src="data:text/html,<body role='button'>"></iframe> 744 <iframe id="iframe_aria_button_mixed" 745 src="data:text/html,<body role='bUTTOn'>"></iframe> 746 <iframe id="iframe_aria_main" 747 src="data:text/html,<body role='main'>"></iframe> 748 <iframe id="iframe_aria_main_mixed" 749 src="data:text/html,<body role='mAIn'>"></iframe> 750 <iframe id="iframe_aria_alert" 751 src="data:text/html,<body role='alert'>"></iframe> 752 <iframe id="iframe_aria_alert_mixed" 753 src="data:text/html,<body role='aLERt'>"></iframe> 754 755 </body> 756 </html>