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. Explainer: https://github.com/alice/aom/blob/gh-pages/explainer.md#per-instance-dynamic-semantics-via-the-elementinternals-object Intent to Implement: https://groups.google.com/a/chromium.org/d/msg/blink-dev/b-cGz9c67pM/0zvBzjhrAAAJ Change-Id: I0caf6bc302445e48f4e0324513105eba3d6303a6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1709950 Commit-Queue: Rakina Zata Amni <[email protected]> Reviewed-by: Alice Boxhall <[email protected]> Reviewed-by: Kent Tamura <[email protected]> Cr-Commit-Position: refs/heads/master@{#685141}
web-platform-tests · Aug 8, 2019 · c7598bc · c7598bc
1 parent 0d4300c
commit c7598bc
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>