feat: Vary live region politeness based on priority

arianotify-polyfill.js

@@ -21,7 +21,10 @@ if (
   const passkey = Symbol();
 
   /** @type {string} */
-  const liveRegionCustomElementName = `live-region-${uniqueId}`;
+  const politeLiveRegionCustomElementName = `polite-live-region-${uniqueId}`;
+
+  /** @type {string} */
+  const assertiveLiveRegionCustomElementName = `assertive-live-region-${uniqueId}`;
 
   /**
    * @param {number} ms
@@ -79,16 +82,19 @@ if (
       }
 
       // Get root element
-      let root = /** @type {Element} */ (
+      let root = /** @type {Element | ShadowRoot | Document} */ (
         this.element.closest("dialog") || this.element.closest("[role='dialog']") || this.element.getRootNode()
       );
       if (!root || root instanceof Document) root = document.body;
 
-      // Get 'live-region', if it already exists
-      /** @type {LiveRegionCustomElement | null} */
-      let liveRegion = root.querySelector(liveRegionCustomElementName);
+      const liveRegionCustomElementName =
+        this.priority === "high"
+          ? assertiveLiveRegionCustomElementName
+          : politeLiveRegionCustomElementName;
+      let liveRegion = /** @type {LiveRegionCustomElement | null} */ (
+        root.querySelector(liveRegionCustomElementName)
+      );
 
-      // Create (or recreate) 'live-region', if it doesn’t exist
       if (!liveRegion) {
         liveRegion = /** @type {LiveRegionCustomElement} */ (
           document.createElement(liveRegionCustomElementName)
@@ -145,7 +151,6 @@ if (
     #shadowRoot = this.attachShadow({ mode: "closed" });
 
     connectedCallback() {
-      this.ariaLive = "polite";
       this.ariaAtomic = "true";
       this.style.marginLeft = "-1px";
       this.style.marginTop = "-1px";
@@ -171,7 +176,29 @@ if (
       this.#shadowRoot.textContent = message;
     }
   }
-  customElements.define(liveRegionCustomElementName, LiveRegionCustomElement);
+
+  class PoliteLiveRegionCustomElement extends LiveRegionCustomElement {
+    connectedCallback() {
+      this.ariaLive = "polite";
+      super.connectedCallback();
+    }
+  }
+
+  class AssertiveLiveRegionCustomElement extends LiveRegionCustomElement {
+    connectedCallback() {
+      this.ariaLive = "assertive";
+      super.connectedCallback();
+    }
+  }
+
+  customElements.define(
+    politeLiveRegionCustomElementName,
+    PoliteLiveRegionCustomElement
+  );
+  customElements.define(
+    assertiveLiveRegionCustomElementName,
+    AssertiveLiveRegionCustomElement
+  );
 
   if (!("ariaNotify" in Element.prototype)) {
     /**
@@ -200,4 +227,4 @@ if (
       queue.enqueue(new Message({ element: this.documentElement, message, priority }));
     };
   }
-}
+}

tests/web-test-runner/arianotify-polyfill.test.js

@@ -1,16 +1,68 @@
 import { expect } from "@esm-bundle/chai";
 
+function spyOn(object, methodName) {
+  const calls = [];
+  const method = object[methodName];
+
+  object[methodName] = function (...args) {
+    calls.push(args);
+    return method.call(this, ...args);
+  };
+
+  return calls;
+}
+
 export async function tests() {
   describe("ariaNotify polyfill", () => {
-    it("<live-region> placement", () => {
-      let count = 0;
-      for (const container of document.querySelectorAll("[data-should-contain-live-region]")) {
-        container.ariaNotify("Hello, world!");
-        const liveRegion = Array.from(container.childNodes).find((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName.match(/^live-region/i));
-        expect(liveRegion).to.not.be.undefined;
-        count++;
+    let container;
+
+    beforeEach(() => {
+      container = document.querySelector("[data-should-contain-live-region]");
+      if (!container) {
+        throw new Error("Expected a live-region test container");
       }
-      expect(count).to.be.above(0);
+
+      for (const liveRegion of Array.from(container.children).filter((node) =>
+        node.tagName.match(/-live-region/i)
+      )) {
+        liveRegion.remove();
+      }
+    });
+
+    it("routes polite messages to the polite live region", async () => {
+      container.ariaNotify("Normal-priority message");
+      const liveRegions = Array.from(container.children).filter((node) =>
+        node.tagName.match(/-live-region/i)
+      );
+      expect(liveRegions).to.have.length(1);
+
+      const liveRegion = liveRegions[0];
+      expect(liveRegion.tagName.match(/^polite-live-region/i)).to.not.equal(null);
+      expect(liveRegion.ariaLive).to.equal("polite");
+
+      const calls = spyOn(liveRegion, "handleMessage");
+
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      expect(calls).to.have.length(1);
+      expect(calls[0][1]).to.equal("Normal-priority message");
+    });
+
+    it("routes assertive messages to the assertive live region", async () => {
+      container.ariaNotify("High-priority message", { priority: "high" });
+      const liveRegions = Array.from(container.children).filter((node) =>
+        node.tagName.match(/-live-region/i)
+      );
+      expect(liveRegions).to.have.length(1);
+
+      const liveRegion = liveRegions[0];
+      expect(liveRegion.tagName.match(/^assertive-live-region/i)).to.not.equal(null);
+      expect(liveRegion.ariaLive).to.equal("assertive");
+
+      const calls = spyOn(liveRegion, "handleMessage");
+
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      expect(calls).to.have.length(1);
+      expect(calls[0][1]).to.equal("High-priority message");
     });
   });
-}
+}