accessible/tests/mochitest/role/test_aria.html

Fri, 16 Jan 2015 18:13:44 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Fri, 16 Jan 2015 18:13:44 +0100
branch
TOR_BUG_9701
changeset 14
925c144e1f1f
permissions
-rw-r--r--

Integrate suggestion from review to improve consistency with existing code.

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

mercurial