feat: Remove interrupt and update priority’s values to align with latest spec (#10)

Fixes #9

Author: smockle

ariaNotify-polyfill.js

@@ -31,42 +31,19 @@ if (!("ariaNotify" in Element.prototype)) {
     /** @type {string} */
     message;
 
-    /** @type {"important" | "none"} */
-    priority = "none";
-
-    /** @type {"all" | "pending" | "none"} */
-    interrupt = "none";
-
-    /** @type {boolean} */
-    get #shouldFlushOthers() {
-      return this.interrupt === "all" || this.interrupt === "pending";
-    }
+    /** @type {"high" | "normal"} */
+    priority = "normal";
 
     /**
      * @param {object} message
      * @param {Element} message.element
      * @param {string} message.message
-     * @param {"important" | "none"} message.priority
-     * @param {"all" | "pending" | "none"} message.interrupt
+     * @param {"high" | "normal"} message.priority
      */
-    constructor({ element, message, priority = "none", interrupt = "none" }) {
+    constructor({ element, message, priority = "normal" }) {
       this.element = element;
       this.message = message;
       this.priority = priority;
-      this.interrupt = interrupt;
-    }
-
-    /**
-     * Whether this message and the given message are equivalent.
-     * @param {Message} message
-     * @returns {boolean}
-     */
-    matches(message) {
-      return (
-        this.element === message.element &&
-        this.priority === message.priority &&
-        this.interrupt === message.interrupt
-      );
     }
 
     /**
@@ -104,12 +81,6 @@ if (!("ariaNotify" in Element.prototype)) {
       /** @type {LiveRegionCustomElement | null} */
       let liveRegion = root.querySelector(liveRegionCustomElementName);
 
-      // Destroy 'live-region', if it exists and should be flushed
-      if (this.#shouldFlushOthers && liveRegion) {
-        liveRegion.remove();
-        liveRegion = null;
-      }
-
       // Create (or recreate) 'live-region', if it doesn’t exist
       if (!liveRegion) {
         liveRegion = /** @type {LiveRegionCustomElement} */ (
@@ -136,22 +107,15 @@ if (!("ariaNotify" in Element.prototype)) {
      * @returns {void}
      */
     enqueue(message) {
-      const { priority, interrupt } = message;
-
-      if (interrupt === "all" || interrupt === "pending") {
-        // Remove other messages with the same element, priority, and interrupt
-        this.#queue = this.#queue.filter(
-          (message) => !message.matches(message)
-        );
-      }
+      const { priority } = message;
 
-      if (priority === "important") {
-        // Insert after the last important message, or at the beginning
+      if (priority === "high") {
+        // Insert after the last high-priority message, or at the beginning
         // @ts-ignore: ts(2550)
-        const lastImportantMessage = this.#queue.findLastIndex(
-          (message) => message.priority === "important"
+        const lastHighPriorityMessage = this.#queue.findLastIndex(
+          (message) => message.priority === "high"
         );
-        this.#queue.splice(lastImportantMessage + 1, 0, message);
+        this.#queue.splice(lastHighPriorityMessage + 1, 0, message);
       } else {
         // Insert at the end
         this.#queue.push(message);
@@ -205,13 +169,12 @@ if (!("ariaNotify" in Element.prototype)) {
   /**
    * @param {string} message
    * @param {object} options
-   * @param {"important" | "none"} [options.priority]
-   * @param {"all" | "pending" | "none" } [options.interrupt]
+   * @param {"high" | "normal"} [options.priority]
    */
   Element.prototype["ariaNotify"] = function (
     message,
-    { priority = "none", interrupt = "none" } = {}
+    { priority = "normal" } = {}
   ) {
-    queue.enqueue(new Message({ element: this, message, priority, interrupt }));
+    queue.enqueue(new Message({ element: this, message, priority }));
   };
 }

examples/index.html

@@ -51,7 +51,7 @@ <h2>Example components</h2>
       <h2>Playground</h2>
       <p>
         This playground allows you to queue a set of messages of different types, and then dispatch them all at once to see
-        how priority and interrupt values effect the queue order.
+        how priority effects the queue order.
       </p>
 
       <template id="form">
@@ -61,19 +61,11 @@ <h2>Playground</h2>
               <span>Message:</span>
               <input type="text" name="message">
             </label>
-            <label>
-              <span>Interrupt:</span>
-              <select name="interrupt">
-                <option value="all">all</option>
-                <option value="pending">pending</option>
-                <option value="none" selected>none</option>
-              </select>
-            </label>
             <label>
               <span>Priority:</span>
               <select name="priority">
-                <option value="important">important</option>
-                <option value="none" selected>none</option>
+                <option value="high">high</option>
+                <option value="normal" selected>normal</option>
               </select>
             </label>
             <button type=button class="delete">Delete</button>
@@ -115,7 +107,6 @@ <h2>Playground</h2>
           const message = data.get('message')
           const opts = {
             priority: data.get('priority'),
-            interrupt: data.get('interrupt'),
           };
           dispatch.ariaNotify(message, opts);
         }

examples/suggested-text/index.html

@@ -91,15 +91,13 @@
       */
       suggester.addEventListener("MakeSuggestion", (event) => {
         suggester.ariaNotify(`Suggestion: ${event.word}`, {
-          priority: "important",
-          interrupt: "all",
+          priority: "high"
         });
         clearTimeout(timer);
         timer = setTimeout(() => {
           suggester.ariaNotify("Press right arrow to commit suggestion", {
             notificationId: "application-keyboard-hint",
-            priority: "none",
-            interrupt: "all",
+            priority: "normal"
           });
         }, 2000);
         suggester.addEventListener("keyup", () => clearTimeout(timer), {
@@ -109,8 +107,7 @@
       });
       suggester.addEventListener("Committed", (event) => {
         suggester.ariaNotify(event.word, {
-          priority: "important",
-          interrupt: "all",
+          priority: "high"
         });
       });
     </script>