Add ARIA role, state and properties to ElementInternals

Adds a way to set default ARIA role, state & properties for custom elements through ElementInternals. These can be overridden with setting the ARIA attributes on the element directly. See whatwg/html#4658 for spec PR. Change-Id: I0caf6bc302445e48f4e0324513105eba3d6303a6
web-platform-tests · Aug 7, 2019 · 537a79e · 537a79e
1 parent fd22d04
commit 537a79e
Showing 1 changed file with 78 additions and 0 deletions.
diff --git a/custom-elements/form-associated/ElementInternals-accessibility.html b/custom-elements/form-associated/ElementInternals-accessibility.html
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+class TestElement extends HTMLElement {
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  get internals() {
+    return this._internals;
+  }
+
+  set internals(val) {
+    throw "Can't set internals!";
+  }
+}
+customElements.define("test-element", TestElement);
+</script>
+
+<test-element id= "testElement"></test-element>
+
+<script>
+const element = document.getElementById("testElement");
+const properties = [
+  "role",
+  "ariaActiveDescendant",
+  "ariaAtomic",
+  "ariaAutoComplete",
+  "ariaBusy",
+  "ariaChecked",
+  "ariaColCount",
+  "ariaColIndex",
+  "ariaColSpan",
+  "ariaControls",
+  "ariaCurrent",
+  "ariaDescribedBy",
+  "ariaDetails",
+  "ariaDisabled",
+  "ariaErrorMessage",
+  "ariaExpanded",
+  "ariaFlowTo",
+  "ariaHasPopup",
+  "ariaHidden",
+  "ariaKeyShortcuts",
+  "ariaLabel",
+  "ariaLabelledBy",
+  "ariaLevel",
+  "ariaLive",
+  "ariaModal",
+  "ariaMultiLine",
+  "ariaMultiSelectable",
+  "ariaOrientation",
+  "ariaOwns",
+  "ariaPlaceholder",
+  "ariaPosInSet",
+  "ariaPressed",
+  "ariaReadOnly",
+  "ariaRelevant",
+  "ariaRequired",
+  "ariaRoleDescription",
+  "ariaRowCount",
+  "ariaRowIndex",
+  "ariaRowSpan",
+  "ariaSelected",
+  "ariaSort",
+  "ariaValueMax",
+  "ariaValueMin",
+  "ariaValueNow",
+  "ariaValueText"
+];
+for (const property of properties) {
+  test(() => {
+    assert_inherits(element.internals, property);
+  }, property + " is defined in ElementInternals");
+}
+</script>