aria-attribute-reflection.html (17163B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8" /> 3 <title>Element Reflection for ARIA properties</title> 4 <link rel=help href="https://wicg.github.io/aom/spec/aria-reflection.html"> 5 <link rel="author" title="Meredith Lane" href="meredithl@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <script> 10 function testNullable(element, jsAttr, contentAttr) { 11 var originalValue = element[jsAttr]; 12 assert_false(originalValue === null); 13 element[jsAttr] = null; 14 assert_equals(element[jsAttr], null); 15 assert_false(element.hasAttribute(contentAttr)); 16 // Setting to undefined results in same state as setting to null. 17 element[jsAttr] = originalValue; 18 element[jsAttr] = undefined; 19 assert_equals(element[jsAttr], null); 20 assert_false(element.hasAttribute(contentAttr)); 21 } 22 </script> 23 24 <div id="role" role="button"></div> 25 <script> 26 test(function(t) { 27 var element = document.getElementById("role"); 28 assert_equals(element.role, "button"); 29 element.role = "checkbox"; 30 assert_equals(element.getAttribute("role"), "checkbox"); 31 testNullable(element, "role", "role"); 32 }, "role attribute reflects."); 33 </script> 34 35 <div id="atomic" aria-atomic="true"></div> 36 <script> 37 test(function(t) { 38 var element = document.getElementById("atomic"); 39 assert_equals(element.ariaAtomic, "true"); 40 element.ariaAtomic = "false"; 41 assert_equals(element.getAttribute("aria-atomic"), "false"); 42 testNullable(element, "ariaAtomic", "aria-atomic"); 43 }, "aria-atomic attribute reflects."); 44 </script> 45 46 <div id="autocomplete" aria-autocomplete="list"></div> 47 <script> 48 test(function(t) { 49 var element = document.getElementById("autocomplete"); 50 assert_equals(element.ariaAutoComplete, "list"); 51 element.ariaAutoComplete = "inline"; 52 assert_equals(element.getAttribute("aria-autocomplete"), "inline"); 53 testNullable(element, "ariaAutoComplete", "aria-autocomplete"); 54 }, "aria-autocomplete attribute reflects."); 55 </script> 56 57 <div id="braillelabel" aria-braillelabel="x"></div> 58 <script> 59 test(function(t) { 60 var element = document.getElementById("braillelabel"); 61 assert_equals(element.ariaBrailleLabel, "x"); 62 element.ariaBrailleLabel = "y"; 63 assert_equals(element.getAttribute("aria-braillelabel"), "y"); 64 testNullable(element, "ariaBrailleLabel", "aria-braillelabel"); 65 }, "aria-braillelabel attribute reflects."); 66 </script> 67 68 <div id="brailleroledescription" aria-brailleroledescription="x"></div> 69 <script> 70 test(function(t) { 71 var element = document.getElementById("brailleroledescription"); 72 assert_equals(element.ariaBrailleRoleDescription, "x"); 73 element.ariaBrailleRoleDescription = "y"; 74 assert_equals(element.getAttribute("aria-brailleroledescription"), "y"); 75 testNullable(element, "ariaBrailleRoleDescription", "aria-brailleroledescription"); 76 }, "aria-brailleroledescription attribute reflects."); 77 </script> 78 79 <div id="busy" aria-busy="true"></div> 80 <script> 81 test(function(t) { 82 var element = document.getElementById("busy"); 83 assert_equals(element.ariaBusy, "true"); 84 element.ariaBusy = "false"; 85 assert_equals(element.getAttribute("aria-busy"), "false"); 86 testNullable(element, "ariaBusy", "aria-busy"); 87 }, "aria-busy attribute reflects."); 88 </script> 89 90 <div id="checked" aria-checked="mixed"></div> 91 <script> 92 test(function(t) { 93 var element = document.getElementById("checked"); 94 assert_equals(element.ariaChecked, "mixed"); 95 element.ariaChecked = "true"; 96 assert_equals(element.getAttribute("aria-checked"), "true"); 97 testNullable(element, "ariaChecked", "aria-checked"); 98 }, "aria-checked attribute reflects."); 99 </script> 100 101 <div id="colcount" aria-colcount="5"></div> 102 <script> 103 test(function(t) { 104 var element = document.getElementById("colcount"); 105 assert_equals(element.ariaColCount, "5"); 106 element.ariaColCount = "6"; 107 assert_equals(element.getAttribute("aria-colcount"), "6"); 108 testNullable(element, "ariaColCount", "aria-colcount"); 109 }, "aria-colcount attribute reflects."); 110 </script> 111 112 <div id="colindex" aria-colindex="1"></div> 113 <script> 114 test(function(t) { 115 var element = document.getElementById("colindex"); 116 assert_equals(element.ariaColIndex, "1"); 117 element.ariaColIndex = "2"; 118 assert_equals(element.getAttribute("aria-colindex"), "2"); 119 testNullable(element, "ariaColIndex", "aria-colindex"); 120 }, "aria-colindex attribute reflects."); 121 </script> 122 123 <!-- colindextext -> aria-attribute-reflection.tentative.html --> 124 125 <div id="colspan" aria-colspan="2"></div> 126 <script> 127 test(function(t) { 128 var element = document.getElementById("colspan"); 129 assert_equals(element.ariaColSpan, "2"); 130 element.ariaColSpan = "3"; 131 assert_equals(element.getAttribute("aria-colspan"), "3"); 132 testNullable(element, "ariaColSpan", "aria-colspan"); 133 }, "aria-colspan attribute reflects."); 134 </script> 135 136 <div id="current" aria-current="page"></div> 137 <script> 138 test(function(t) { 139 var element = document.getElementById("current"); 140 assert_equals(element.ariaCurrent, "page"); 141 element.ariaCurrent = "step"; 142 assert_equals(element.getAttribute("aria-current"), "step"); 143 testNullable(element, "ariaCurrent", "aria-current"); 144 }, "aria-current attribute reflects."); 145 </script> 146 147 <!-- description -> aria-attribute-reflection.tentative.html --> 148 149 <div id="disabled" aria-disabled="true"></div> 150 <script> 151 test(function(t) { 152 var element = document.getElementById("disabled"); 153 assert_equals(element.ariaDisabled, "true"); 154 element.ariaDisabled = "false"; 155 assert_equals(element.getAttribute("aria-disabled"), "false"); 156 testNullable(element, "ariaDisabled", "aria-disabled"); 157 }, "aria-disabled attribute reflects."); 158 </script> 159 160 <div id="expanded" aria-expanded="true"></div> 161 <script> 162 test(function(t) { 163 var element = document.getElementById("expanded"); 164 assert_equals(element.ariaExpanded, "true"); 165 element.ariaExpanded = "false"; 166 assert_equals(element.getAttribute("aria-expanded"), "false"); 167 testNullable(element, "ariaExpanded", "aria-expanded"); 168 }, "aria-expanded attribute reflects."); 169 </script> 170 171 <div id="haspopup" aria-haspopup="menu"></div> 172 <script> 173 test(function(t) { 174 var element = document.getElementById("haspopup"); 175 assert_equals(element.ariaHasPopup, "menu"); 176 element.ariaHasPopup = "listbox"; 177 assert_equals(element.getAttribute("aria-haspopup"), "listbox"); 178 testNullable(element, "ariaHasPopup", "aria-haspopup"); 179 }, "aria-haspopup attribute reflects."); 180 </script> 181 182 <div id="hidden" aria-hidden="true" tabindex="-1"></div> 183 <script> 184 test(function(t) { 185 var element = document.getElementById("hidden"); 186 assert_equals(element.ariaHidden, "true"); 187 element.ariaHidden = "false"; 188 assert_equals(element.getAttribute("aria-hidden"), "false"); 189 testNullable(element, "ariaHidden", "aria-hidden"); 190 }, "aria-hidden attribute reflects."); 191 </script> 192 193 <div id="invalid" aria-invalid="true"></div> 194 <script> 195 test(function(t) { 196 var element = document.getElementById("invalid"); 197 assert_equals(element.ariaInvalid, "true"); 198 element.ariaInvalid = "grammar"; 199 assert_equals(element.getAttribute("aria-invalid"), "grammar"); 200 testNullable(element, "ariaInvalid", "aria-invalid"); 201 }, "aria-invalid attribute reflects."); 202 </script> 203 204 <div id="keyshortcuts" aria-keyshortcuts="x"></div> 205 <script> 206 test(function(t) { 207 var element = document.getElementById("keyshortcuts"); 208 assert_equals(element.ariaKeyShortcuts, "x"); 209 element.ariaKeyShortcuts = "y"; 210 assert_equals(element.getAttribute("aria-keyshortcuts"), "y"); 211 testNullable(element, "ariaKeyShortcuts", "aria-keyshortcuts"); 212 }, "aria-keyshortcuts attribute reflects."); 213 </script> 214 215 <div id="label" aria-label="x"></div> 216 <script> 217 test(function(t) { 218 var element = document.getElementById("label"); 219 assert_equals(element.ariaLabel, "x"); 220 element.ariaLabel = "y"; 221 assert_equals(element.getAttribute("aria-label"), "y"); 222 testNullable(element, "ariaLabel", "aria-label"); 223 }, "aria-label attribute reflects."); 224 </script> 225 226 <div id="level" aria-level="1"></div> 227 <script> 228 test(function(t) { 229 var element = document.getElementById("level"); 230 assert_equals(element.ariaLevel, "1"); 231 element.ariaLevel = "2"; 232 assert_equals(element.getAttribute("aria-level"), "2"); 233 testNullable(element, "ariaLevel", "aria-level"); 234 }, "aria-level attribute reflects."); 235 </script> 236 237 <div id="live" aria-live="polite"></div> 238 <script> 239 test(function(t) { 240 var element = document.getElementById("live"); 241 assert_equals(element.ariaLive, "polite"); 242 element.ariaLive = "assertive"; 243 assert_equals(element.getAttribute("aria-live"), "assertive"); 244 testNullable(element, "ariaLive", "aria-live"); 245 }, "aria-live attribute reflects."); 246 </script> 247 248 <div id="modal" aria-modal="true"></div> 249 <script> 250 test(function(t) { 251 var element = document.getElementById("modal"); 252 assert_equals(element.ariaModal, "true"); 253 element.ariaModal = "false"; 254 assert_equals(element.getAttribute("aria-modal"), "false"); 255 testNullable(element, "ariaModal", "aria-modal"); 256 }, "aria-modal attribute reflects."); 257 </script> 258 259 <div id="multiline" aria-multiline="true"></div> 260 <script> 261 test(function(t) { 262 var element = document.getElementById("multiline"); 263 assert_equals(element.ariaMultiLine, "true"); 264 element.ariaMultiLine = "false"; 265 assert_equals(element.getAttribute("aria-multiline"), "false"); 266 testNullable(element, "ariaMultiLine", "aria-multiline"); 267 }, "aria-multiline attribute reflects."); 268 </script> 269 270 <div id="multiselectable" aria-multiselectable="true"></div> 271 <script> 272 test(function(t) { 273 var element = document.getElementById("multiselectable"); 274 assert_equals(element.ariaMultiSelectable, "true"); 275 element.ariaMultiSelectable = "false"; 276 assert_equals(element.getAttribute("aria-multiselectable"), "false"); 277 testNullable(element, "ariaMultiSelectable", "aria-multiselectable"); 278 }, "aria-multiselectable attribute reflects."); 279 </script> 280 281 <div id="orientation" aria-orientation="vertical"></div> 282 <script> 283 test(function(t) { 284 var element = document.getElementById("orientation"); 285 assert_equals(element.ariaOrientation, "vertical"); 286 element.ariaOrientation = "horizontal"; 287 assert_equals(element.getAttribute("aria-orientation"), "horizontal"); 288 testNullable(element, "ariaOrientation", "aria-orientation"); 289 }, "aria-orientation attribute reflects."); 290 </script> 291 292 <div id="placeholder" aria-placeholder="x"></div> 293 <script> 294 test(function(t) { 295 var element = document.getElementById("placeholder"); 296 assert_equals(element.ariaPlaceholder, "x"); 297 element.ariaPlaceholder = "y"; 298 assert_equals(element.getAttribute("aria-placeholder"), "y"); 299 testNullable(element, "ariaPlaceholder", "aria-placeholder"); 300 }, "aria-placeholder attribute reflects."); 301 </script> 302 303 <div id="posinset" aria-posinset="10"></div> 304 <script> 305 test(function(t) { 306 var element = document.getElementById("posinset"); 307 assert_equals(element.ariaPosInSet, "10"); 308 element.ariaPosInSet = "11"; 309 assert_equals(element.getAttribute("aria-posinset"), "11"); 310 testNullable(element, "ariaPosInSet", "aria-posinset"); 311 }, "aria-posinset attribute reflects."); 312 </script> 313 314 <button id="pressed" aria-pressed="true"></button> 315 <script> 316 test(function(t) { 317 var element = document.getElementById("pressed"); 318 assert_equals(element.ariaPressed, "true"); 319 element.ariaPressed = "false"; 320 assert_equals(element.getAttribute("aria-pressed"), "false"); 321 testNullable(element, "ariaPressed", "aria-pressed"); 322 }, "aria-pressed attribute reflects."); 323 </script> 324 325 <div id="readonly" aria-readonly="true"></div> 326 <script> 327 test(function(t) { 328 var element = document.getElementById("readonly"); 329 assert_equals(element.ariaReadOnly, "true"); 330 element.ariaReadOnly = "false"; 331 assert_equals(element.getAttribute("aria-readonly"), "false"); 332 testNullable(element, "ariaReadOnly", "aria-readonly"); 333 }, "aria-readonly attribute reflects."); 334 </script> 335 336 <div id="relevant" aria-relevant="text"></div> 337 <script> 338 test(function(t) { 339 var element = document.getElementById("relevant"); 340 assert_equals(element.ariaRelevant, "text"); 341 element.ariaRelevant = "removals"; 342 assert_equals(element.getAttribute("aria-relevant"), "removals"); 343 testNullable(element, "ariaRelevant", "aria-relevant"); 344 }, "aria-relevant attribute reflects."); 345 </script> 346 347 <div id="required" aria-required="true"></div> 348 <script> 349 test(function(t) { 350 var element = document.getElementById("required"); 351 assert_equals(element.ariaRequired, "true"); 352 element.ariaRequired = "false"; 353 assert_equals(element.getAttribute("aria-required"), "false"); 354 testNullable(element, "ariaRequired", "aria-required"); 355 }, "aria-required attribute reflects."); 356 </script> 357 358 <div id="roledescription" aria-roledescription="x"></div> 359 <script> 360 test(function(t) { 361 var element = document.getElementById("roledescription"); 362 assert_equals(element.ariaRoleDescription, "x"); 363 element.ariaRoleDescription = "y"; 364 assert_equals(element.getAttribute("aria-roledescription"), "y"); 365 testNullable(element, "ariaRoleDescription", "aria-roledescription"); 366 }, "aria-roledescription attribute reflects."); 367 </script> 368 369 <div id="rowcount" aria-rowcount="10"></div> 370 <script> 371 test(function(t) { 372 var element = document.getElementById("rowcount"); 373 assert_equals(element.ariaRowCount, "10"); 374 element.ariaRowCount = "11"; 375 assert_equals(element.getAttribute("aria-rowcount"), "11"); 376 testNullable(element, "ariaRowCount", "aria-rowcount"); 377 }, "aria-rowcount attribute reflects."); 378 </script> 379 380 <div id="rowindex" aria-rowindex="1"></div> 381 <script> 382 test(function(t) { 383 var element = document.getElementById("rowindex"); 384 assert_equals(element.ariaRowIndex, "1"); 385 element.ariaRowIndex = "2"; 386 assert_equals(element.getAttribute("aria-rowindex"), "2"); 387 testNullable(element, "ariaRowIndex", "aria-rowindex"); 388 }, "aria-rowindex attribute reflects."); 389 </script> 390 391 <!-- rowindextext -> aria-attribute-reflection.tentative.html --> 392 393 <div id="rowspan" aria-rowspan="2"></div> 394 <script> 395 test(function(t) { 396 var element = document.getElementById("rowspan"); 397 assert_equals(element.ariaRowSpan, "2"); 398 element.ariaRowSpan = "3"; 399 assert_equals(element.getAttribute("aria-rowspan"), "3"); 400 testNullable(element, "ariaRowSpan", "aria-rowspan"); 401 }, "aria-rowspan attribute reflects."); 402 </script> 403 404 <div id="selected" aria-selected="true"></div> 405 <script> 406 test(function(t) { 407 var element = document.getElementById("selected"); 408 assert_equals(element.ariaSelected, "true"); 409 element.ariaSelected = "false"; 410 assert_equals(element.getAttribute("aria-selected"), "false"); 411 testNullable(element, "ariaSelected", "aria-selected"); 412 }, "aria-selected attribute reflects."); 413 </script> 414 415 <div id="setsize" aria-setsize="10"></div> 416 <script> 417 test(function(t) { 418 var element = document.getElementById("setsize"); 419 assert_equals(element.ariaSetSize, "10"); 420 element.ariaSetSize = "11"; 421 assert_equals(element.getAttribute("aria-setsize"), "11"); 422 testNullable(element, "ariaSetSize", "aria-setsize"); 423 }, "aria-setsize attribute reflects."); 424 </script> 425 426 <div id="sort" aria-sort="descending"></div> 427 <script> 428 test(function(t) { 429 var element = document.getElementById("sort"); 430 assert_equals(element.ariaSort, "descending"); 431 element.ariaSort = "ascending"; 432 assert_equals(element.getAttribute("aria-sort"), "ascending"); 433 testNullable(element, "ariaSort", "aria-sort"); 434 }, "aria-sort attribute reflects."); 435 </script> 436 437 <div id="valuemax" aria-valuemax="99"></div> 438 <script> 439 test(function(t) { 440 var element = document.getElementById("valuemax"); 441 assert_equals(element.ariaValueMax, "99"); 442 element.ariaValueMax = "100"; 443 assert_equals(element.getAttribute("aria-valuemax"), "100"); 444 testNullable(element, "ariaValueMax", "aria-valuemax"); 445 }, "aria-valuemax attribute reflects."); 446 </script> 447 448 <div id="valuemin" aria-valuemin="3"></div> 449 <script> 450 test(function(t) { 451 var element = document.getElementById("valuemin"); 452 assert_equals(element.ariaValueMin, "3"); 453 element.ariaValueMin = "2"; 454 assert_equals(element.getAttribute("aria-valuemin"), "2"); 455 testNullable(element, "ariaValueMin", "aria-valuemin"); 456 }, "aria-valuemin attribute reflects."); 457 </script> 458 459 <div id="valuenow" aria-valuenow="50"></div> 460 <script> 461 test(function(t) { 462 var element = document.getElementById("valuenow"); 463 assert_equals(element.ariaValueNow, "50"); 464 element.ariaValueNow = "51"; 465 assert_equals(element.getAttribute("aria-valuenow"), "51"); 466 testNullable(element, "ariaValueNow", "aria-valuenow"); 467 }, "aria-valuenow attribute reflects."); 468 </script> 469 470 <div id="valuetext" aria-valuetext="50%"></div> 471 <script> 472 test(function(t) { 473 var element = document.getElementById("valuetext"); 474 assert_equals(element.ariaValueText, "50%"); 475 element.ariaValueText = "51%"; 476 assert_equals(element.getAttribute("aria-valuetext"), "51%"); 477 testNullable(element, "ariaValueText", "aria-valuetext"); 478 }, "aria-valuetext attribute reflects."); 479 </script> 480 481 </html>