custom-elements/ElementInternals-accessibility-values.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>ElementInternals accessibility property values</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<script>
"use strict";

class TestElement extends HTMLElement {
  constructor() {
    super();
    this.internals = this.attachInternals();
  }
}
customElements.define("test-element", TestElement);
const element = document.createElement("test-element");
document.body.append(element);

const properties = [
  "role",
  "ariaActiveDescendantElement",
  "ariaAtomic",
  "ariaAutoComplete",
  "ariaBrailleLabel",
  "ariaBrailleRoleDescription",
  "ariaBusy",
  "ariaChecked",
  "ariaColCount",
  "ariaColIndex",
  "ariaColSpan",
  "ariaControlsElements",
  "ariaCurrent",
  "ariaDescribedByElements",
  "ariaDetailsElements",
  "ariaDisabled",
  "ariaErrorMessageElements",
  "ariaExpanded",
  "ariaFlowToElements",
  "ariaHasPopup",
  "ariaHidden",
  "ariaInvalid",
  "ariaKeyShortcuts",
  "ariaLabel",
  "ariaLabelledByElements",
  "ariaLevel",
  "ariaLive",
  "ariaModal",
  "ariaMultiLine",
  "ariaMultiSelectable",
  "ariaOrientation",
  "ariaOwnsElements",
  "ariaPlaceholder",
  "ariaPosInSet",
  "ariaPressed",
  "ariaReadOnly",
  "ariaRelevant",
  "ariaRequired",
  "ariaRoleDescription",
  "ariaRowCount",
  "ariaRowIndex",
  "ariaRowSpan",
  "ariaSelected",
  "ariaSetSize",
  "ariaSort",
  "ariaValueMax",
  "ariaValueMin",
  "ariaValueNow",
  "ariaValueText"
];

for (const property of properties) {
  test(() => {
    assert_equals(element.internals[property], null, "null default value");

    if (property.endsWith("Element")) {
      element.internals[property] = document.body;

      assert_equals(element.internals[property], document.body, "can be set to an Element");
    } else if (property.endsWith("Elements")) {
      const originalArray = [document.body];
      element.internals[property] = originalArray;

      assert_array_equals(element.internals[property], originalArray, "same contents");
      assert_not_equals(element.internals[property], originalArray, "not equal to the original array");
      assert_true(Object.isFrozen(element.internals[property]), "is frozen");
      assert_equals(element.internals[property], element.internals[property], "getter returns the same value");
    } else {
      element.internals[property] = {
        toString() {
          return "a string";
        }
      };

      assert_equals(element.internals[property], "a string", "can be set to a string");
    }
  }, property);
}
</script>