accessible/tests/mochitest/test_custom_element_accessibility_defaults.html

   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   SimpleTest.finish();
 217 }
 218
 219 SimpleTest.waitForExplicitFinish();
 220 addA11yLoadEvent(runTest);
 221   </script>
 222 </head>
 223 <body>
 224
 225 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1665151">Bug 1665151</a>
 226 <p id="display"></p>
 227 <div id="content" style="display: none"></div>
 228 <pre id="test">
 229 <custom-role id="default-role"></custom-role>
 230 <custom-role id="custom-role" role="note"></custom-role>
 231
 232 <custom-autocomplete id="default-autocomplete"></custom-autocomplete>
 233 <custom-autocomplete id="custom-autocomplete" aria-autocomplete="list"></custom-autocomplete>
 234
 235 <custom-atomic id="default-atomic"></custom-atomic>
 236 <custom-atomic id="custom-atomic" aria-atomic="false"></custom-atomic>
 237
 238 <custom-busy id="default-busy"></custom-busy>
 239 <custom-busy id="custom-busy" aria-busy="false"></custom-busy>
 240
 241 <custom-checked id="default-checked"></custom-checked>
 242 <custom-checked id="custom-checked" aria-checked="false"></custom-checked>
 243
 244 <custom-colcount id="default-colCount">
 245   <div role="rowgroup">
 246     <div role="row">
 247       <custom-col id="default-col"></custom-col>
 248     </div>
 249   </div>
 250 </custom-colcount>
 251 <custom-colcount id="custom-colCount" aria-colcount="3">
 252   <div role="rowgroup">
 253     <div role="row">
 254       <custom-col
 255           id="custom-col"
 256           aria-colindex="2"
 257           aria-colindextext="Custom"
 258           aria-colspan="2">
 259       </custom-col>
 260     </div>
 261   </div>
 262 </custom-colcount>
 263
 264 <custom-current id="default-current"></custom-current>
 265 <custom-current id="custom-current" aria-current="step"></custom-current>
 266
 267 <custom-description id="default-description"></custom-description>
 268 <custom-description id="custom-description" aria-description="Custom"></custom-description>
 269
 270 <custom-disabled id="default-disabled"></custom-disabled>
 271 <custom-disabled id="custom-disabled" aria-disabled="false"></custom-disabled>
 272
 273 <custom-expanded id="default-expanded"></custom-expanded>
 274 <custom-expanded id="custom-expanded" aria-expanded="false"></custom-expanded>
 275
 276 <custom-haspopup id="default-haspopup"></custom-haspopup>
 277 <custom-haspopup id="custom-haspopup" aria-haspopup="false"></custom-haspopup>
 278
 279 <custom-hidden id="default-hidden"></custom-hidden>
 280 <custom-hidden id="custom-hidden" aria-hidden="false"></custom-hidden>
 281
 282 <custom-invalid id="default-invalid"></custom-invalid>
 283 <custom-invalid id="custom-invalid" aria-invalid="false"></custom-invalid>
 284
 285 <custom-keyshortcuts id="default-keyshortcuts"></custom-keyshortcuts>
 286 <custom-keyshortcuts id="custom-keyshortcuts" aria-keyshortcuts="A"></custom-keyshortcuts>
 287
 288 <custom-label id="default-label"></custom-label>
 289 <custom-label id="custom-label" aria-label="Custom"></custom-label>
 290
 291 <custom-level id="default-level"></custom-level>
 292 <custom-level id="custom-level" aria-level="2"></custom-level>
 293
 294 <custom-live id="default-live"></custom-live>
 295 <custom-live id="custom-live" aria-live="assertive"></custom-live>
 296
 297 <custom-modal id="default-modal"></custom-modal>
 298 <custom-modal id="custom-modal" aria-modal="false"></custom-modal>
 299
 300 <custom-multiline id="default-multiline"></custom-multiline>
 301 <custom-multiline id="custom-multiline" aria-multiline="false"></custom-multiline>
 302
 303 <custom-multiselectable id="default-multiselectable"></custom-multiselectable>
 304 <custom-multiselectable id="custom-multiselectable" aria-multiselectable="false"></custom-multiselectable>
 305
 306 <custom-orientation id="default-orientation"></custom-orientation>
 307 <custom-orientation id="custom-orientation" aria-orientation="horizontal"></custom-orientation>
 308
 309 <custom-posinset id="default-posinset"></custom-posinset>
 310 <custom-posinset id="custom-posinset" aria-posinset="2"></custom-posinset>
 311
 312 <custom-pressed id="default-pressed"></custom-pressed>
 313 <custom-pressed id="custom-pressed" aria-pressed="false"></custom-pressed>
 314
 315 <custom-readonly id="default-readonly"></custom-readonly>
 316 <custom-readonly id="custom-readonly" aria-readonly="false"></custom-readonly>
 317
 318 <custom-relevant id="default-relevant"></custom-relevant>
 319 <custom-relevant id="custom-relevant" aria-relevant="text"></custom-relevant>
 320
 321 <custom-required id="default-required"></custom-required>
 322 <custom-required id="custom-required" aria-required="false"></custom-required>
 323
 324 <custom-roledescription id="default-roledescription"></custom-roledescription>
 325 <custom-roledescription id="custom-roledescription" aria-roledescription="Custom"></custom-roledescription>
 326
 327 <custom-rowcount id="default-rowcount">
 328   <div role="rowgroup">
 329     <custom-row id="default-row">
 330       <custom-rowspan id="default-rowspan"></custom-rowspan>
 331     </custom-row>
 332   </div>
 333 </custom-rowcount>
 334 <custom-rowcount id="custom-rowcount" aria-rowcount="3">
 335   <div role="rowgroup">
 336     <custom-row
 337         id="custom-row"
 338         aria-rowindex="2"
 339         aria-rowindextext="Custom">
 340       <custom-rowspan id="custom-rowspan" aria-rowspan="2"></custom-rowspan>
 341     </custom-row>
 342   </div>
 343 </custom-rowcount>
 344
 345 <custom-selected id="default-selected"></custom-selected>
 346 <custom-selected id="custom-selected" aria-selected="false"></custom-selected>
 347
 348 <div role="listbox">
 349   <custom-setsize id="default-setsize"></custom-setsize>
 350 </div>
 351 <div role="listbox">
 352   <custom-setsize id="custom-setsize" aria-setsize="2"></custom-setsize>
 353   <div role="listitem" aria-setsize="2"></div>
 354 </div>
 355
 356 <div role="grid">
 357   <div role="rowgroup">
 358     <div role="row">
 359       <custom-sort id="default-sort"></custom-sort>
 360     </div>
 361   </div>
 362 </div>
 363 <div role="grid">
 364   <div role="rowgroup">
 365     <div role="row">
 366       <custom-sort id="custom-sort" aria-sort="descending"></custom-sort>
 367     </div>
 368   </div>
 369 </div>
 370
 371 <custom-value id="default-value"></custom-value>
 372 <custom-value
 373     id="custom-value"
 374     aria-valuenow="15"
 375     aria-valuemin="10"
 376     aria-valuemax="20"
 377     aria-valuetext="Custom">
 378 </custom-value>
 379 </pre>
 380
 381 </body>
 382 </html>