aria-attribute-reflection.html

mozilla-central/testing/web-platform/tests/html/dom/aria-attribute-reflection.html

Enable keyboard shortcuts

Source code

File a bug in Core :: DOM: Core & HTML

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /html/dom/aria-attribute-reflection.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<meta charset="utf-8" />

<title>Element Reflection for ARIA properties</title>

<link rel=help href="https://wicg.github.io/aom/spec/aria-reflection.html">

<link rel="author" title="Meredith Lane" href="meredithl@chromium.org">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

function testNullable(element, jsAttr, contentAttr) {

    var originalValue = element[jsAttr];

    assert_false(originalValue === null);

    element[jsAttr] = null;

    assert_equals(element[jsAttr], null);

    assert_false(element.hasAttribute(contentAttr));

    // Setting to undefined results in same state as setting to null.

    element[jsAttr] = originalValue;

    element[jsAttr] = undefined;

    assert_equals(element[jsAttr], null);

    assert_false(element.hasAttribute(contentAttr));

</script>

<div id="role" role="button"></div>

<script>

test(function(t) {

    var element = document.getElementById("role");

    assert_equals(element.role, "button");

    element.role = "checkbox";

    assert_equals(element.getAttribute("role"), "checkbox");

    testNullable(element, "role", "role");

}, "role attribute reflects.");

</script>

<div id="atomic" aria-atomic="true"></div>

<script>

test(function(t) {

    var element = document.getElementById("atomic");

    assert_equals(element.ariaAtomic, "true");

    element.ariaAtomic = "false";

    assert_equals(element.getAttribute("aria-atomic"), "false");

    testNullable(element, "ariaAtomic", "aria-atomic");

}, "aria-atomic attribute reflects.");

</script>

<div id="autocomplete" aria-autocomplete="list"></div>

<script>

test(function(t) {

    var element = document.getElementById("autocomplete");

    assert_equals(element.ariaAutoComplete, "list");

    element.ariaAutoComplete = "inline";

    assert_equals(element.getAttribute("aria-autocomplete"), "inline");

    testNullable(element, "ariaAutoComplete", "aria-autocomplete");

}, "aria-autocomplete attribute reflects.");

</script>

<div id="busy" aria-busy="true"></div>

<script>

test(function(t) {

    var element = document.getElementById("busy");

    assert_equals(element.ariaBusy, "true");

    element.ariaBusy = "false";

    assert_equals(element.getAttribute("aria-busy"), "false");

    testNullable(element, "ariaBusy", "aria-busy");

}, "aria-busy attribute reflects.");

</script>

<div id="checked" aria-checked="mixed"></div>

<script>

test(function(t) {

    var element = document.getElementById("checked");

    assert_equals(element.ariaChecked, "mixed");

    element.ariaChecked = "true";

    assert_equals(element.getAttribute("aria-checked"), "true");

    testNullable(element, "ariaChecked", "aria-checked");

}, "aria-checked attribute reflects.");

</script>

<div id="colcount" aria-colcount="5"></div>

<script>

test(function(t) {

    var element = document.getElementById("colcount");

    assert_equals(element.ariaColCount, "5");

    element.ariaColCount = "6";

    assert_equals(element.getAttribute("aria-colcount"), "6");

    testNullable(element, "ariaColCount", "aria-colcount");

}, "aria-colcount attribute reflects.");

</script>

<div id="colindex" aria-colindex="1"></div>

<script>

test(function(t) {

    var element = document.getElementById("colindex");

    assert_equals(element.ariaColIndex, "1");

    element.ariaColIndex = "2";

    assert_equals(element.getAttribute("aria-colindex"), "2");

    testNullable(element, "ariaColIndex", "aria-colindex");

}, "aria-colindex attribute reflects.");

</script>

<div id="colspan" aria-colspan="2"></div>

<script>

test(function(t) {

    var element = document.getElementById("colspan");

    assert_equals(element.ariaColSpan, "2");

    element.ariaColSpan = "3";

    assert_equals(element.getAttribute("aria-colspan"), "3");

    testNullable(element, "ariaColSpan", "aria-colspan");

}, "aria-colspan attribute reflects.");

</script>

<div id="current" aria-current="page"></div>

<script>

test(function(t) {

    var element = document.getElementById("current");

    assert_equals(element.ariaCurrent, "page");

    element.ariaCurrent = "step";

    assert_equals(element.getAttribute("aria-current"), "step");

    testNullable(element, "ariaCurrent", "aria-current");

}, "aria-current attribute reflects.");

</script>

<div id="disabled" aria-disabled="true"></div>

<div id="description" aria-description="cold as ice"></div>

<script>

test(function(t) {

    var element = document.getElementById("description");

    assert_equals(element.ariaDescription, "cold as ice");

    element.ariaDescription = "hot as fire";

    assert_equals(element.getAttribute("aria-description"), "hot as fire");

    testNullable(element, "ariaDescription", "aria-description");

}, "aria-description attribute reflects.");

</script>

<script>

test(function(t) {

    var element = document.getElementById("disabled");

    assert_equals(element.ariaDisabled, "true");

    element.ariaDisabled = "false";

    assert_equals(element.getAttribute("aria-disabled"), "false");

    testNullable(element, "ariaDisabled", "aria-disabled");

}, "aria-disabled attribute reflects.");

</script>

<div id="expanded" aria-expanded="true"></div>

<script>

test(function(t) {

    var element = document.getElementById("expanded");

    assert_equals(element.ariaExpanded, "true");

    element.ariaExpanded = "false";

    assert_equals(element.getAttribute("aria-expanded"), "false");

    testNullable(element, "ariaExpanded", "aria-expanded");

}, "aria-expanded attribute reflects.");

</script>

<div id="haspopup" aria-haspopup="menu"></div>

<script>

test(function(t) {

    var element = document.getElementById("haspopup");

    assert_equals(element.ariaHasPopup, "menu");

    element.ariaHasPopup = "listbox";

    assert_equals(element.getAttribute("aria-haspopup"), "listbox");

    testNullable(element, "ariaHasPopup", "aria-haspopup");

}, "aria-haspopup attribute reflects.");

</script>

<div id="hidden" aria-hidden="true" tabindex="-1"></div>

<script>

test(function(t) {

    var element = document.getElementById("hidden");

    assert_equals(element.ariaHidden, "true");

    element.ariaHidden = "false";

    assert_equals(element.getAttribute("aria-hidden"), "false");

    testNullable(element, "ariaHidden", "aria-hidden");

}, "aria-hidden attribute reflects.");

</script>

<div id="invalid" aria-invalid="true"></div>

<script>

test(function(t) {

    var element = document.getElementById("invalid");

    assert_equals(element.ariaInvalid, "true");

    element.ariaInvalid = "grammar";

    assert_equals(element.getAttribute("aria-invalid"), "grammar");

    testNullable(element, "ariaInvalid", "aria-invalid");

}, "aria-invalid attribute reflects.");

</script>

<div id="keyshortcuts" aria-keyshortcuts="x"></div>

<script>

test(function(t) {

    var element = document.getElementById("keyshortcuts");

    assert_equals(element.ariaKeyShortcuts, "x");

    element.ariaKeyShortcuts = "y";

    assert_equals(element.getAttribute("aria-keyshortcuts"), "y");

    testNullable(element, "ariaKeyShortcuts", "aria-keyshortcuts");

}, "aria-keyshortcuts attribute reflects.");

</script>

<div id="label" aria-label="x"></div>

<script>

test(function(t) {

    var element = document.getElementById("label");

    assert_equals(element.ariaLabel, "x");

    element.ariaLabel = "y";

    assert_equals(element.getAttribute("aria-label"), "y");

    testNullable(element, "ariaLabel", "aria-label");

}, "aria-label attribute reflects.");

</script>

<div id="level" aria-level="1"></div>

<script>

test(function(t) {

    var element = document.getElementById("level");

    assert_equals(element.ariaLevel, "1");

    element.ariaLevel = "2";

    assert_equals(element.getAttribute("aria-level"), "2");

    testNullable(element, "ariaLevel", "aria-level");

}, "aria-level attribute reflects.");

</script>

<div id="live" aria-live="polite"></div>

<script>

test(function(t) {

    var element = document.getElementById("live");

    assert_equals(element.ariaLive, "polite");

    element.ariaLive = "assertive";

    assert_equals(element.getAttribute("aria-live"), "assertive");

    testNullable(element, "ariaLive", "aria-live");

}, "aria-live attribute reflects.");

</script>

<div id="modal" aria-modal="true"></div>

<script>

test(function(t) {

    var element = document.getElementById("modal");

    assert_equals(element.ariaModal, "true");

    element.ariaModal = "false";

    assert_equals(element.getAttribute("aria-modal"), "false");

    testNullable(element, "ariaModal", "aria-modal");

}, "aria-modal attribute reflects.");

</script>

<div id="multiline" aria-multiline="true"></div>

<script>

test(function(t) {

    var element = document.getElementById("multiline");

    assert_equals(element.ariaMultiLine, "true");

    element.ariaMultiLine = "false";

    assert_equals(element.getAttribute("aria-multiline"), "false");

    testNullable(element, "ariaMultiLine", "aria-multiline");

}, "aria-multiline attribute reflects.");

</script>

<div id="multiselectable" aria-multiselectable="true"></div>

<script>

test(function(t) {

    var element = document.getElementById("multiselectable");

    assert_equals(element.ariaMultiSelectable, "true");

    element.ariaMultiSelectable = "false";

    assert_equals(element.getAttribute("aria-multiselectable"), "false");

    testNullable(element, "ariaMultiSelectable", "aria-multiselectable");

}, "aria-multiselectable attribute reflects.");

</script>

<div id="orientation" aria-orientation="vertical"></div>

<script>

test(function(t) {

    var element = document.getElementById("orientation");

    assert_equals(element.ariaOrientation, "vertical");

    element.ariaOrientation = "horizontal";

    assert_equals(element.getAttribute("aria-orientation"), "horizontal");

    testNullable(element, "ariaOrientation", "aria-orientation");

}, "aria-orientation attribute reflects.");

</script>

<div id="placeholder" aria-placeholder="x"></div>

<script>

test(function(t) {

    var element = document.getElementById("placeholder");

    assert_equals(element.ariaPlaceholder, "x");

    element.ariaPlaceholder = "y";

    assert_equals(element.getAttribute("aria-placeholder"), "y");

    testNullable(element, "ariaPlaceholder", "aria-placeholder");

}, "aria-placeholder attribute reflects.");

</script>

<div id="posinset" aria-posinset="10"></div>

<script>

test(function(t) {

    var element = document.getElementById("posinset");

    assert_equals(element.ariaPosInSet, "10");

    element.ariaPosInSet = "11";

    assert_equals(element.getAttribute("aria-posinset"), "11");

    testNullable(element, "ariaPosInSet", "aria-posinset");

}, "aria-posinset attribute reflects.");

</script>

<button id="pressed" aria-pressed="true"></button>

<script>

test(function(t) {

    var element = document.getElementById("pressed");

    assert_equals(element.ariaPressed, "true");

    element.ariaPressed = "false";

    assert_equals(element.getAttribute("aria-pressed"), "false");

    testNullable(element, "ariaPressed", "aria-pressed");

}, "aria-pressed attribute reflects.");

</script>

<div id="readonly" aria-readonly="true"></div>

<script>

test(function(t) {

    var element = document.getElementById("readonly");

    assert_equals(element.ariaReadOnly, "true");

    element.ariaReadOnly = "false";

    assert_equals(element.getAttribute("aria-readonly"), "false");

    testNullable(element, "ariaReadOnly", "aria-readonly");

}, "aria-readonly attribute reflects.");

</script>

<div id="relevant" aria-relevant="text"></div>

<script>

test(function(t) {

    var element = document.getElementById("relevant");

    assert_equals(element.ariaRelevant, "text");

    element.ariaRelevant = "removals";

    assert_equals(element.getAttribute("aria-relevant"), "removals");

    testNullable(element, "ariaRelevant", "aria-relevant");

}, "aria-relevant attribute reflects.");

</script>

<div id="required" aria-required="true"></div>

<script>

test(function(t) {

    var element = document.getElementById("required");

    assert_equals(element.ariaRequired, "true");

    element.ariaRequired = "false";

    assert_equals(element.getAttribute("aria-required"), "false");

    testNullable(element, "ariaRequired", "aria-required");

}, "aria-required attribute reflects.");

</script>

<div id="roledescription" aria-roledescription="x"></div>

<script>

test(function(t) {

    var element = document.getElementById("roledescription");

    assert_equals(element.ariaRoleDescription, "x");

    element.ariaRoleDescription = "y";

    assert_equals(element.getAttribute("aria-roledescription"), "y");

    testNullable(element, "ariaRoleDescription", "aria-roledescription");

}, "aria-roledescription attribute reflects.");

</script>

<div id="rowcount" aria-rowcount="10"></div>

<script>

test(function(t) {

    var element = document.getElementById("rowcount");

    assert_equals(element.ariaRowCount, "10");

    element.ariaRowCount = "11";

    assert_equals(element.getAttribute("aria-rowcount"), "11");

    testNullable(element, "ariaRowCount", "aria-rowcount");

}, "aria-rowcount attribute reflects.");

</script>

<div id="rowindex" aria-rowindex="1"></div>

<script>

test(function(t) {

    var element = document.getElementById("rowindex");

    assert_equals(element.ariaRowIndex, "1");

    element.ariaRowIndex = "2";

    assert_equals(element.getAttribute("aria-rowindex"), "2");

    testNullable(element, "ariaRowIndex", "aria-rowindex");

}, "aria-rowindex attribute reflects.");

</script>

<div id="rowspan" aria-rowspan="2"></div>

<script>

test(function(t) {

    var element = document.getElementById("rowspan");

    assert_equals(element.ariaRowSpan, "2");

    element.ariaRowSpan = "3";

    assert_equals(element.getAttribute("aria-rowspan"), "3");

    testNullable(element, "ariaRowSpan", "aria-rowspan");

}, "aria-rowspan attribute reflects.");

</script>

<div id="selected" aria-selected="true"></div>

<script>

test(function(t) {

    var element = document.getElementById("selected");

    assert_equals(element.ariaSelected, "true");

    element.ariaSelected = "false";

    assert_equals(element.getAttribute("aria-selected"), "false");

    testNullable(element, "ariaSelected", "aria-selected");

}, "aria-selected attribute reflects.");

</script>

<div id="setsize" aria-setsize="10"></div>

<script>

test(function(t) {

    var element = document.getElementById("setsize");

    assert_equals(element.ariaSetSize, "10");

    element.ariaSetSize = "11";

    assert_equals(element.getAttribute("aria-setsize"), "11");

    testNullable(element, "ariaSetSize", "aria-setsize");

}, "aria-setsize attribute reflects.");

</script>

<div id="sort" aria-sort="descending"></div>

<script>

test(function(t) {

    var element = document.getElementById("sort");

    assert_equals(element.ariaSort, "descending");

    element.ariaSort = "ascending";

    assert_equals(element.getAttribute("aria-sort"), "ascending");

    testNullable(element, "ariaSort", "aria-sort");

}, "aria-sort attribute reflects.");

</script>

<div id="valuemax" aria-valuemax="99"></div>

<script>

test(function(t) {

    var element = document.getElementById("valuemax");

    assert_equals(element.ariaValueMax, "99");

    element.ariaValueMax = "100";

    assert_equals(element.getAttribute("aria-valuemax"), "100");

    testNullable(element, "ariaValueMax", "aria-valuemax");

}, "aria-valuemax attribute reflects.");

</script>

<div id="valuemin" aria-valuemin="3"></div>

<script>

test(function(t) {

    var element = document.getElementById("valuemin");

    assert_equals(element.ariaValueMin, "3");

    element.ariaValueMin = "2";

    assert_equals(element.getAttribute("aria-valuemin"), "2");

    testNullable(element, "ariaValueMin", "aria-valuemin");

}, "aria-valuemin attribute reflects.");

</script>

<div id="valuenow" aria-valuenow="50"></div>

<script>

test(function(t) {

    var element = document.getElementById("valuenow");

    assert_equals(element.ariaValueNow, "50");

    element.ariaValueNow = "51";

    assert_equals(element.getAttribute("aria-valuenow"), "51");

    testNullable(element, "ariaValueNow", "aria-valuenow");

}, "aria-valuenow attribute reflects.");

</script>

<div id="valuetext" aria-valuetext="50%"></div>

<script>

test(function(t) {

    var element = document.getElementById("valuetext");

    assert_equals(element.ariaValueText, "50%");

    element.ariaValueText = "51%";

    assert_equals(element.getAttribute("aria-valuetext"), "51%");

    testNullable(element, "ariaValueText", "aria-valuetext");

}, "aria-valuetext attribute reflects.");

</script>

<div id="braillelabel" aria-braillelabel="x"></div>

<script>

test(function(t) {

    var element = document.getElementById("braillelabel");

    assert_equals(element.ariaBrailleLabel, "x");

    element.ariaBrailleLabel = "y";

    assert_equals(element.getAttribute("aria-braillelabel"), "y");

    testNullable(element, "ariaBrailleLabel", "aria-braillelabel");

}, "aria-braillelabel attribute reflects.");

</script>

<div id="brailleroledescription" aria-brailleroledescription="x"></div>

<script>

test(function(t) {

    var element = document.getElementById("brailleroledescription");

    assert_equals(element.ariaBrailleRoleDescription, "x");

    element.ariaBrailleRoleDescription = "y";

    assert_equals(element.getAttribute("aria-brailleroledescription"), "y");

    testNullable(element, "ariaBrailleRoleDescription", "aria-brailleroledescription");

}, "aria-brailleroledescription attribute reflects.");

</script>

</html>