element-internals-aria-element-reflection.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>Element Reflection for aria-activedescendant and aria-errormessage on ElementInternals</title>

  <link rel=help href="https://whatpr.org/html/3917/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes:element">

  <link rel="author" title="Alice Boxhall" href="alice@igalia.com">

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

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

</head>

<body>

  <script>

    class CustomElement extends HTMLElement {

      constructor() {

        super();

        this.i = this.attachInternals();

    customElements.define('custom-element', CustomElement);

  </script>

  <custom-element id="custom1"></custom-element>

  <div id="activedescendant">Active descendant</div>

  <div id="controls">Controls</div>

  <div id="describedby">Described by</div>

  <div id="details">Details</div>

  <div id="errormessage">Error message</div>

  <div id="flowto">Flow to</div>

  <div id="labelledby">Labelled By</div>

  <div id="owns">Owns</div>

  <script>

    const element_properties = [

      ['ariaActiveDescendantElement', 'activedescendant']];

    const array_properties = [

      ['ariaControlsElements', 'controls'],

      ['ariaDescribedByElements', 'describedby'],

      ['ariaDetailsElements', 'details'],

      ['ariaErrorMessageElements', 'errormessage'],

      ['ariaFlowToElements', 'flowto'],

      ['ariaLabelledByElements', 'labelledby'],

      ['ariaOwnsElements', 'owns']];

    test(t => {

      const custom = document.getElementById('custom1');

      for (const [property, id] of element_properties) {

        assert_equals(custom.i[property], null);

      for (const [property, id] of array_properties) {

        assert_equals(custom.i[property], null);

    }, "Getting previously-unset ARIA element reflection properties on ElementInternals should return null.");

    test(t => {

      const custom = document.getElementById('custom1');

      for (const [property, id] of element_properties) {

        const related = document.getElementById(id);

        custom.i[property] = related;

        assert_equals(custom.i[property], related);

      for (const [property, id] of array_properties) {

        const related = document.getElementById(id);

        custom.i[property] = [related];

        assert_array_equals(custom.i[property], [related]);

    }, "Getting ARIA element reflection properties on ElementInternals should return the value that was set.");

    test(t => {

      const custom = document.getElementById('custom1');

      for (const [property, id] of array_properties) {

        custom.i[property] = [];

        assert_array_equals(custom.i[property], []);

    }, "Setting ARIA element reflection properties to an empty array should work as expected.");

    test(t => {

      const custom = document.getElementById('custom1');

      for (const [property, id] of element_properties) {

        const related = document.getElementById(id);

        custom.i[property] = related;

        assert_equals(custom.i[property], related);

        custom.i[property] = null;

        assert_equals(custom.i[property], null);

      for (const [property, id] of array_properties) {

        const related = document.getElementById(id);

        custom.i[property] = [related];

        assert_array_equals(custom.i[property], [related]);

        custom.i[property] = null;

        assert_equals(custom.i[property], null);

    }, "Setting ARIA element reflection properties on ElementInternals to null should delete any previous value, and not crash");

  </script>

  <custom-element id="cachingInvariantMain"></custom-element>

  <div id="cachingInvariantElement1"></div>

  <div id="cachingInvariantElement2"></div>

  <div id="cachingInvariantElement3"></div>

  <div id="cachingInvariantElement4"></div>

  <div id="cachingInvariantElement5"></div>

  <script>

    test(function(t) {

      cachingInvariantMain.i.ariaControlsElements = [cachingInvariantElement1, cachingInvariantElement2];

      cachingInvariantMain.i.ariaDescribedByElements = [cachingInvariantElement3, cachingInvariantElement4];

      cachingInvariantMain.i.ariaDetailsElements = [cachingInvariantElement5];

      cachingInvariantMain.i.ariaFlowToElements = [cachingInvariantElement1, cachingInvariantElement3];

      cachingInvariantMain.i.ariaLabelledByElements = [cachingInvariantElement2, cachingInvariantElement4];

      cachingInvariantMain.i.ariaOwnsElements = [cachingInvariantElement1, cachingInvariantElement2, cachingInvariantElement3];

      let ariaControlsElementsArray = cachingInvariantMain.i.ariaControlsElements;

      let ariaDescribedByElementsArray = cachingInvariantMain.i.ariaDescribedByElements;

      let ariaDetailsElementsArray = cachingInvariantMain.i.ariaDetailsElements;

      let ariaFlowToElementsArray = cachingInvariantMain.i.ariaFlowToElements;

      let ariaLabelledByElementsArray = cachingInvariantMain.i.ariaLabelledByElements;

      let ariaOwnsElementsArray = cachingInvariantMain.i.ariaOwnsElements;

      assert_equals(ariaControlsElementsArray, cachingInvariantMain.i.ariaControlsElements, "Caching invariant for ariaControlsElements");

      assert_equals(ariaDescribedByElementsArray, cachingInvariantMain.i.ariaDescribedByElements, "Caching invariant for ariaDescribedByElements");

      assert_equals(ariaDetailsElementsArray, cachingInvariantMain.i.ariaDetailsElements, "Caching invariant for ariaDetailsElements");

      assert_equals(ariaFlowToElementsArray, cachingInvariantMain.i.ariaFlowToElements, "Caching invariant for ariaFlowToElements");

      assert_equals(ariaLabelledByElementsArray, cachingInvariantMain.i.ariaLabelledByElements, "Caching invariant for ariaLabelledByElements");

      assert_equals(ariaOwnsElementsArray, cachingInvariantMain.i.ariaOwnsElements, "Caching invariant for ariaOwnsElements");

      // Ensure that cached values don't become stale

      cachingInvariantMain.i.ariaControlsElements = [cachingInvariantElement4, cachingInvariantElement5];

      cachingInvariantMain.i.ariaDescribedByElements = [cachingInvariantElement1, cachingInvariantElement2];

      cachingInvariantMain.i.ariaDetailsElements = [cachingInvariantElement3];

      cachingInvariantMain.i.ariaFlowToElements = [cachingInvariantElement4, cachingInvariantElement5];

      cachingInvariantMain.i.ariaLabelledByElements = [cachingInvariantElement1, cachingInvariantElement2];

      cachingInvariantMain.i.ariaOwnsElements = [cachingInvariantElement3, cachingInvariantElement4, cachingInvariantElement1];

      ariaControlsElementsArray = cachingInvariantMain.i.ariaControlsElements;

      ariaDescribedByElementsArray = cachingInvariantMain.i.ariaDescribedByElements;

      ariaDetailsElementsArray = cachingInvariantMain.i.ariaDetailsElements;

      ariaFlowToElementsArray = cachingInvariantMain.i.ariaFlowToElements;

      ariaLabelledByElementsArray = cachingInvariantMain.i.ariaLabelledByElements;

      ariaOwnsElementsArray = cachingInvariantMain.i.ariaOwnsElements;

      assert_equals(ariaControlsElementsArray, cachingInvariantMain.i.ariaControlsElements, "Caching invariant for ariaControlsElements");

      assert_equals(ariaDescribedByElementsArray, cachingInvariantMain.i.ariaDescribedByElements, "Caching invariant for ariaDescribedByElements");

      assert_equals(ariaDetailsElementsArray, cachingInvariantMain.i.ariaDetailsElements, "Caching invariant for ariaDetailsElements");

      assert_equals(ariaFlowToElementsArray, cachingInvariantMain.i.ariaFlowToElements, "Caching invariant for ariaFlowToElements");

      assert_equals(ariaLabelledByElementsArray, cachingInvariantMain.i.ariaLabelledByElements, "Caching invariant for ariaLabelledByElements");

      assert_equals(ariaOwnsElementsArray, cachingInvariantMain.i.ariaOwnsElements, "Caching invariant for ariaOwnsElements");

    }, "Caching invariant different attributes.");

  </script>

  <custom-element id="cachingInvariantMain1"></custom-element>

  <custom-element id="cachingInvariantMain2"></custom-element>

  <script>

    test(function(t) {

      cachingInvariantMain1.i.ariaDescribedByElements = [cachingInvariantElement1, cachingInvariantElement2];

      cachingInvariantMain2.i.ariaDescribedByElements = [cachingInvariantElement1, cachingInvariantElement2];

      let ariaDescribedByElementsArray1 = cachingInvariantMain1.i.ariaDescribedByElements;

      let ariaDescribedByElementsArray2 = cachingInvariantMain2.i.ariaDescribedByElements;

      assert_equals(ariaDescribedByElementsArray1, cachingInvariantMain1.i.ariaDescribedByElements, "Caching invariant for ariaDescribedByElements in one elemnt");

      assert_equals(ariaDescribedByElementsArray2, cachingInvariantMain2.i.ariaDescribedByElements, "Caching invariant for ariaDescribedByElements in onother elemnt");

      assert_not_equals(cachingInvariantMain1.i.ariaDescribedByElements, cachingInvariantMain2.i.ariaDescribedByElements);

    }, "Caching invariant different elements.");

  </script>

  </script>

</body>

</html>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings