test_custom_element_accessibility_defaults.html (15473B)
1 <!DOCTYPE html> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1665151 5 --> 6 <head> 7 <title>Test for default accessibility semantics for custom elements</title> 8 <link rel="stylesheet" type="text/css" 9 href="chrome://mochikit/content/tests/SimpleTest/test.css"> 10 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 11 <script src="common.js"></script> 12 <script src="attributes.js"></script> 13 <script src="role.js"></script> 14 <script src="states.js"></script> 15 <script src="value.js"></script> 16 <script src="name.js"></script> 17 <script src="promisified-events.js"></script> 18 <script> 19 [ 20 ["role", "math", () => {}], 21 ["atomic", "toolbar", internals => internals.ariaAtomic = "true"], 22 ["autocomplete", "textbox", internals => internals.ariaAutoComplete = "inline"], 23 ["busy", "feed", internals => internals.ariaBusy = "true"], 24 ["checked", "checkbox", internals => internals.ariaChecked = "true"], 25 ["colcount", "grid", internals => internals.ariaColCount = "1"], 26 ["col", "gridcell", internals => { 27 internals.ariaColIndex = "1"; 28 internals.ariaColIndexText = "Default"; 29 internals.ariaColSpan = "1"; 30 }], 31 ["current", "listitem", internals => internals.ariaCurrent = "page"], 32 ["description", "note", internals => internals.ariaDescription = "Default"], 33 ["disabled", "button", internals => internals.ariaDisabled = "true"], 34 ["expanded", "button", internals => internals.ariaExpanded = "true"], 35 ["haspopup", "button", internals => internals.ariaHasPopup = "true"], 36 ["hidden", "region", internals => internals.ariaHidden = "true"], 37 ["invalid", "textbox", internals => internals.ariaInvalid = "true"], 38 ["keyshortcuts", "button", internals => internals.ariaKeyShortcuts = "Alt+Shift+A"], 39 ["label", "button", internals => internals.ariaLabel = "Default"], 40 ["level", "heading", internals => internals.ariaLevel = "1"], 41 ["live", "region", internals => internals.ariaLive = "polite"], 42 ["modal", "dialog", internals => internals.ariaModal = "true"], 43 ["multiline", "textbox", internals => internals.ariaMultiLine = "true"], 44 ["multiselectable", "listbox", internals => internals.ariaMultiSelectable = "true"], 45 ["orientation", "menu", internals => internals.ariaOrientation = "vertical"], 46 ["placeholder", "textbox", internals => internals.ariaPlaceholder = "Default"], 47 ["posinset", "option", internals => internals.ariaPosInSet = "1"], 48 ["pressed", "button", internals => internals.ariaPressed = "true"], 49 ["readonly", "textbox", internals => internals.ariaReadOnly = "true"], 50 ["relevant", "region", internals => internals.ariaRelevant = "all"], 51 ["required", "textbox", internals => internals.ariaRequired = "true"], 52 ["roledescription", "region", internals => internals.ariaRoleDescription = "Default"], 53 ["rowcount", "grid", internals => internals.ariaRowCount = "1"], 54 ["row", "row", internals => { 55 internals.ariaRowIndex = "1"; 56 internals.ariaRowIndexText = "Default"; 57 }], 58 ["rowspan", "cell", internals => internals.ariaRowSpan = "1"], 59 ["selected", "option", internals => internals.ariaSelected = "true"], 60 ["setsize", "listitem", internals => internals.ariaSetSize = "1"], 61 ["sort", "columnheader", internals => internals.ariaSort = "ascending"], 62 ["value", "slider", internals => { 63 internals.ariaValueNow = "5"; 64 internals.ariaValueMin = "1"; 65 internals.ariaValueMax = "10"; 66 internals.ariaValueText = "Default"; 67 }], 68 ].forEach(([name, role, apply]) => { 69 customElements.define(`custom-${name}`, 70 class extends HTMLElement { 71 constructor() { 72 super(); 73 this._internals = this.attachInternals(); 74 this._internals.role = role; 75 apply(this._internals); 76 } 77 get internals() { 78 return this._internals; 79 } 80 } 81 ); 82 }); 83 84 async function runTest() { 85 // Test for proper overriding of default attributes. 86 testAttrs("default-role", {"xml-roles": "math"}, true); 87 testAttrs("custom-role", {"xml-roles": "note"}, true); 88 89 testAttrs("default-atomic", {"atomic": "true"}, true); 90 testAbsentAttrs("custom-atomic", {"atomic": "false"}); 91 92 testAttrs("default-autocomplete", {"autocomplete": "inline"}, true); 93 testAttrs("custom-autocomplete", {"autocomplete": "list"}, true); 94 95 testStates("default-busy", STATE_BUSY); 96 testStates("custom-busy", 0, 0, STATE_BUSY); 97 98 testStates("default-checked", STATE_CHECKED); 99 testStates("custom-checked", 0, 0, STATE_CHECKED); 100 101 testAttrs("default-colCount", {"colcount": "1"}, true); 102 testAttrs("default-col", {"colindex": "1"}, true); 103 testAttrs("default-col", {"colindextext": "Default"}, true); 104 testAttrs("default-col", {"colspan": "1"}, true); 105 testAttrs("custom-colCount", {"colcount": "3"}, true); 106 testAttrs("custom-col", {"colindex": "2"}, true); 107 testAttrs("custom-col", {"colindextext": "Custom"}, true); 108 testAttrs("custom-col", {"colspan": "2"}, true); 109 110 testAttrs("default-current", {"current": "page"}, true); 111 testAttrs("custom-current", {"current": "step"}, true); 112 113 testDescr("default-description", "Default"); 114 testDescr("custom-description", "Custom"); 115 116 testStates("default-disabled", STATE_UNAVAILABLE); 117 testStates("custom-disabled", 0, 0, STATE_UNAVAILABLE); 118 119 testStates("default-expanded", STATE_EXPANDED); 120 testStates("custom-expanded", STATE_COLLAPSED); 121 122 testAttrs("default-haspopup", {"haspopup": "true"}, true); 123 testAbsentAttrs("custom-haspopup", {"haspopup": "false"}); 124 125 ok(!isAccessible("default-hidden"), "Accessible for aria-hidden default"); 126 ok(isAccessible("custom-hidden"), "Accessible for custom aria-hidden=false"); 127 128 testStates("default-invalid", STATE_INVALID); 129 testStates("custom-invalid", 0, 0, STATE_INVALID); 130 131 testAttrs("default-keyshortcuts", {"keyshortcuts": "Alt+Shift+A"}, true); 132 testAttrs("custom-keyshortcuts", {"keyshortcuts": "A"}, true); 133 134 testName("default-label", "Default"); 135 testName("custom-label", "Custom"); 136 137 testAttrs("default-level", {"level": "1"}, true); 138 testAttrs("custom-level", {"level": "2"}, true); 139 140 testAttrs("default-live", {"live": "polite"}, true); 141 testAttrs("custom-live", {"live": "assertive"}, true); 142 143 testStates("default-modal", 0, EXT_STATE_MODAL); 144 testStates("custom-modal", 0, 0, 0, EXT_STATE_MODAL); 145 146 testStates("default-multiline", 0, EXT_STATE_MULTI_LINE, 0, EXT_STATE_SINGLE_LINE); 147 testStates("custom-multiline", 0, EXT_STATE_SINGLE_LINE, 0, EXT_STATE_MULTI_LINE); 148 149 testStates("default-multiselectable", STATE_MULTISELECTABLE); 150 testStates("custom-multiselectable", 0, 0, STATE_MULTISELECTABLE); 151 152 testStates("default-orientation", 0, EXT_STATE_VERTICAL, 0, EXT_STATE_HORIZONTAL); 153 testStates("custom-orientation", 0, EXT_STATE_HORIZONTAL, 0, EXT_STATE_VERTICAL); 154 155 testAttrs("default-posinset", {"posinset": "1"}, true); 156 testAttrs("custom-posinset", {"posinset": "2"}, true); 157 158 testStates("default-pressed", STATE_PRESSED); 159 testStates("custom-pressed", 0, 0, STATE_PRESSED); 160 161 testStates("default-readonly", STATE_READONLY); 162 testStates("custom-readonly", 0, 0, STATE_READONLY); 163 164 testAttrs("default-relevant", {"relevant": "all"}, true); 165 testAttrs("custom-relevant", {"relevant": "text"}, true); 166 167 testStates("default-required", STATE_REQUIRED); 168 testStates("custom-required", 0, 0, STATE_REQUIRED); 169 170 testAttrs("default-roledescription", {"roledescription": "Default"}, true); 171 testAttrs("custom-roledescription", {"roledescription": "Custom"}, true); 172 173 testAttrs("default-rowcount", {"rowcount": "1"}, true); 174 testAttrs("default-row", {"rowindex": "1"}, true); 175 testAttrs("default-row", {"rowindextext": "Default"}, true); 176 testAttrs("default-rowspan", {"rowspan": "1"}, true); 177 testAttrs("custom-rowcount", {"rowcount": "3"}, true); 178 testAttrs("custom-row", {"rowindex": "2"}, true); 179 testAttrs("custom-row", {"rowindextext": "Custom"}, true); 180 testAttrs("custom-rowspan", {"rowspan": "2"}, true); 181 182 testStates("default-selected", STATE_SELECTED); 183 testStates("custom-selected", 0, 0, STATE_SELECTED); 184 185 testAttrs("default-setsize", {"setsize": "1"}, true); 186 testAttrs("custom-setsize", {"setsize": "2"}, true); 187 188 testAttrs("default-sort", {"sort": "ascending"}, true); 189 testAttrs("custom-sort", {"sort": "descending"}, true); 190 191 testValue("default-value", "Default", 5, 1, 10, 0); 192 testValue("custom-value", "Custom", 15, 10, 20, 0); 193 194 // Test that changes of defaults fire the proper events. 195 info("Changing ElementInternals ariaLabel"); 196 let nameChanged = waitForEvent(EVENT_NAME_CHANGE, "default-label"); 197 let customLabelElement = document.getElementById("default-label"); 198 customLabelElement.internals.ariaLabel = "Changed Default"; 199 await nameChanged; 200 testName("default-label", "Changed Default"); 201 202 info("Changing ElementInternals ariaRequired"); 203 let stateChanged = waitForEvent(EVENT_STATE_CHANGE, "default-required"); 204 let requiredElement = document.getElementById("default-required"); 205 requiredElement.internals.ariaRequired = "false"; 206 await stateChanged; 207 testStates("default-required", 0, 0, STATE_REQUIRED); 208 209 info("Changing ElementInternals ariaSort"); 210 let attributeChanged = waitForEvent(EVENT_OBJECT_ATTRIBUTE_CHANGED, "default-sort"); 211 let sortElement = document.getElementById("default-sort"); 212 sortElement.internals.ariaSort = "descending"; 213 await attributeChanged; 214 testAttrs("default-sort", {"sort": "descending"}, true); 215 216 info("Changing ElementInternals ariaValueText"); 217 let valueTextChanged = waitForEvent(EVENT_TEXT_VALUE_CHANGE, "default-value"); 218 let valueElement = document.getElementById("default-value"); 219 valueElement.internals.ariaValueText = null; 220 await valueTextChanged; 221 testValue("default-value", "5", 5, 1, 10, 0); 222 223 SimpleTest.finish(); 224 } 225 226 SimpleTest.waitForExplicitFinish(); 227 addA11yLoadEvent(runTest); 228 </script> 229 </head> 230 <body> 231 232 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1665151">Bug 1665151</a> 233 <p id="display"></p> 234 <div id="content" style="display: none"></div> 235 <pre id="test"> 236 <custom-role id="default-role"></custom-role> 237 <custom-role id="custom-role" role="note"></custom-role> 238 239 <custom-autocomplete id="default-autocomplete"></custom-autocomplete> 240 <custom-autocomplete id="custom-autocomplete" aria-autocomplete="list"></custom-autocomplete> 241 242 <custom-atomic id="default-atomic"></custom-atomic> 243 <custom-atomic id="custom-atomic" aria-atomic="false"></custom-atomic> 244 245 <custom-busy id="default-busy"></custom-busy> 246 <custom-busy id="custom-busy" aria-busy="false"></custom-busy> 247 248 <custom-checked id="default-checked"></custom-checked> 249 <custom-checked id="custom-checked" aria-checked="false"></custom-checked> 250 251 <custom-colcount id="default-colCount"> 252 <div role="rowgroup"> 253 <div role="row"> 254 <custom-col id="default-col"></custom-col> 255 </div> 256 </div> 257 </custom-colcount> 258 <custom-colcount id="custom-colCount" aria-colcount="3"> 259 <div role="rowgroup"> 260 <div role="row"> 261 <custom-col 262 id="custom-col" 263 aria-colindex="2" 264 aria-colindextext="Custom" 265 aria-colspan="2"> 266 </custom-col> 267 </div> 268 </div> 269 </custom-colcount> 270 271 <custom-current id="default-current"></custom-current> 272 <custom-current id="custom-current" aria-current="step"></custom-current> 273 274 <custom-description id="default-description"></custom-description> 275 <custom-description id="custom-description" aria-description="Custom"></custom-description> 276 277 <custom-disabled id="default-disabled"></custom-disabled> 278 <custom-disabled id="custom-disabled" aria-disabled="false"></custom-disabled> 279 280 <custom-expanded id="default-expanded"></custom-expanded> 281 <custom-expanded id="custom-expanded" aria-expanded="false"></custom-expanded> 282 283 <custom-haspopup id="default-haspopup"></custom-haspopup> 284 <custom-haspopup id="custom-haspopup" aria-haspopup="false"></custom-haspopup> 285 286 <custom-hidden id="default-hidden"></custom-hidden> 287 <custom-hidden id="custom-hidden" aria-hidden="false"></custom-hidden> 288 289 <custom-invalid id="default-invalid"></custom-invalid> 290 <custom-invalid id="custom-invalid" aria-invalid="false"></custom-invalid> 291 292 <custom-keyshortcuts id="default-keyshortcuts"></custom-keyshortcuts> 293 <custom-keyshortcuts id="custom-keyshortcuts" aria-keyshortcuts="A"></custom-keyshortcuts> 294 295 <custom-label id="default-label"></custom-label> 296 <custom-label id="custom-label" aria-label="Custom"></custom-label> 297 298 <custom-level id="default-level"></custom-level> 299 <custom-level id="custom-level" aria-level="2"></custom-level> 300 301 <custom-live id="default-live"></custom-live> 302 <custom-live id="custom-live" aria-live="assertive"></custom-live> 303 304 <custom-modal id="default-modal"></custom-modal> 305 <custom-modal id="custom-modal" aria-modal="false"></custom-modal> 306 307 <custom-multiline id="default-multiline"></custom-multiline> 308 <custom-multiline id="custom-multiline" aria-multiline="false"></custom-multiline> 309 310 <custom-multiselectable id="default-multiselectable"></custom-multiselectable> 311 <custom-multiselectable id="custom-multiselectable" aria-multiselectable="false"></custom-multiselectable> 312 313 <custom-orientation id="default-orientation"></custom-orientation> 314 <custom-orientation id="custom-orientation" aria-orientation="horizontal"></custom-orientation> 315 316 <div role="listbox"> 317 <custom-posinset id="default-posinset"></custom-posinset> 318 <custom-posinset id="custom-posinset" aria-posinset="2"></custom-posinset> 319 </div> 320 321 <custom-pressed id="default-pressed"></custom-pressed> 322 <custom-pressed id="custom-pressed" aria-pressed="false"></custom-pressed> 323 324 <custom-readonly id="default-readonly"></custom-readonly> 325 <custom-readonly id="custom-readonly" aria-readonly="false"></custom-readonly> 326 327 <custom-relevant id="default-relevant"></custom-relevant> 328 <custom-relevant id="custom-relevant" aria-relevant="text"></custom-relevant> 329 330 <custom-required id="default-required"></custom-required> 331 <custom-required id="custom-required" aria-required="false"></custom-required> 332 333 <custom-roledescription id="default-roledescription"></custom-roledescription> 334 <custom-roledescription id="custom-roledescription" aria-roledescription="Custom"></custom-roledescription> 335 336 <custom-rowcount id="default-rowcount"> 337 <div role="rowgroup"> 338 <custom-row id="default-row"> 339 <custom-rowspan id="default-rowspan"></custom-rowspan> 340 </custom-row> 341 </div> 342 </custom-rowcount> 343 <custom-rowcount id="custom-rowcount" aria-rowcount="3"> 344 <div role="rowgroup"> 345 <custom-row 346 id="custom-row" 347 aria-rowindex="2" 348 aria-rowindextext="Custom"> 349 <custom-rowspan id="custom-rowspan" aria-rowspan="2"></custom-rowspan> 350 </custom-row> 351 </div> 352 </custom-rowcount> 353 354 <custom-selected id="default-selected"></custom-selected> 355 <custom-selected id="custom-selected" aria-selected="false"></custom-selected> 356 357 <div role="list"> 358 <custom-setsize id="default-setsize"></custom-setsize> 359 </div> 360 <div role="list"> 361 <custom-setsize id="custom-setsize" aria-setsize="2"></custom-setsize> 362 <div role="listitem" aria-setsize="2"></div> 363 </div> 364 365 <div role="grid"> 366 <div role="rowgroup"> 367 <div role="row"> 368 <custom-sort id="default-sort"></custom-sort> 369 </div> 370 </div> 371 </div> 372 <div role="grid"> 373 <div role="rowgroup"> 374 <div role="row"> 375 <custom-sort id="custom-sort" aria-sort="descending"></custom-sort> 376 </div> 377 </div> 378 </div> 379 380 <custom-value id="default-value"></custom-value> 381 <custom-value 382 id="custom-value" 383 aria-valuenow="15" 384 aria-valuemin="10" 385 aria-valuemax="20" 386 aria-valuetext="Custom"> 387 </custom-value> 388 </pre> 389 390 </body> 391 </html>