@aurodesignsystem/auro-dialog 4.2.1 → 4.2.2

package/demo/design.min.js

@@ -2288,6 +2288,48 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
+/**
+ * Generates a v4 UUID with a three-tier fallback for insecure contexts.
+ *
+ * Tier 1 (secure contexts): crypto.randomUUID() — native, fully random.
+ * Tier 2 (insecure contexts): crypto.getRandomValues() — available on all
+ *   modern browsers regardless of secure-context status.
+ * Tier 3 (last resort, no crypto API): new Date().getTime() — lower entropy,
+ *   but sufficient for element IDs where collision risk is negligible.
+ *
+ * See: https://w3c.github.io/webcrypto/#dom-crypto-randomuuid (secure-context restriction)
+ */
+function generateUUID() {
+  let uuid;
+
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
+    uuid = crypto.randomUUID();
+  } else if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.getRandomValues === "function"
+  ) {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
+    const hex = Array.from(bytes).map((b) => b.toString(16).padStart(2, "0"));
+    uuid = `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10).join("")}`;
+  } else {
+    let d = new Date().getTime();
+    uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = (d % 16) | 0;
+      d = (d - r) / 16 || new Date().getTime();
+      return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
+    });
+  }
+
+  // CSS selectors require IDs starting with a letter; replace a leading digit with 'a'.
+  return /^[0-9]/.test(uuid) ? `a${uuid.slice(1)}` : uuid;
+}
+
 /* eslint-disable line-comment-position, no-inline-comments */
 
 
@@ -2575,30 +2617,61 @@ class AuroFloatingUI {
 
   /**
    * @private
-   * Controls whether to lock the scrolling for the document's body.
-   * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
+   * Mirrors `aria-modal` onto the `<dialog>` inside the bib, tracking the page
+   * scroll lock: an overlay that holds the page hides it from assistive tech.
+   *
+   * The removal is called only from inside lockScroll()'s ownership guard: run
+   * outside it, it fired on every autoUpdate tick of every NON-owning instance,
+   * and a repositioning dropdown stripped `aria-modal` off an open modal dialog
+   * it had nothing to do with. The write is unguarded by design — see the call
+   * site — but is skipped when the attribute already reads correctly, so the
+   * repeat costs no mutation record.
+   * @param {Boolean} modal - True to mark the dialog modal; false to unmark it.
    */
-  lockScroll(lock = true) {
+  mirrorAriaModal(modal) {
     const element = this.element;
+    const dialog = element?.bib
+      ? (element.bib?.shadowRoot || element.bib || element).querySelector(
+          "dialog",
+        )
+      : undefined;
 
-    if (!element?.bib) {
+    if (!dialog) {
       return;
     }
 
-    const dialog = (
-      element.bib?.shadowRoot ||
-      element.bib ||
-      element
-    ).querySelector("dialog");
-    if (dialog) {
-      if (lock) {
+    if (modal) {
+      if (dialog.getAttribute("aria-modal") !== "true") {
         dialog.setAttribute("aria-modal", "true");
-      } else {
-        dialog.removeAttribute("aria-modal");
       }
+    } else {
+      dialog.removeAttribute("aria-modal");
+    }
+  }
+
+  /**
+   * @private
+   * Controls whether to lock the scrolling for the document's body.
+   * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
+   */
+  lockScroll(lock = true) {
+    const element = this.element;
+
+    // Locking needs a bib to lock around; unlocking must not, or a bib that has
+    // already been detached would leave the page frozen with no way back.
+    if (lock && !element?.bib) {
+      return;
     }
 
     if (lock) {
+      // Re-asserted on every lock call rather than only on the unlocked ->
+      // locked transition. If the bib's inner <dialog> is replaced while this
+      // instance still holds the lock, the replacement would otherwise go
+      // unmarked until a full unlock/lock cycle. Safe to repeat: it targets
+      // this instance's own element, so it cannot reach another overlay's
+      // dialog, and mirrorAriaModal() skips the write when already correct.
+      this.mirrorAriaModal(true);
+
       if (!this._scrollLocked) {
         this._scrollLocked = true;
         this._savedScrollY = window.scrollY;
@@ -2656,6 +2729,8 @@ class AuroFloatingUI {
       }
     } else {
       if (this._scrollLocked) {
+        this.mirrorAriaModal(false);
+
         if (this._viewportHandler && window.visualViewport) {
           window.visualViewport.removeEventListener(
             "resize",
@@ -2768,15 +2843,47 @@ class AuroFloatingUI {
       } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
         this.configureTrial += 1;
 
-        setTimeout(() => {
+        // The id is retained so disconnect() can cancel it. A retry that fires
+        // after teardown re-enters this method with isPopoverVisible still true
+        // — nothing clears it on the teardown path — and takes the page scroll
+        // lock back, with no owner left to release it.
+        //
+        // This is not the rare timing race it reads as: the lookup above wants
+        // a `.container` inside the BIB's own shadow root, which only a bib
+        // that is itself a custom element has. A consumer whose bib is a plain
+        // element (auro-dialog's `#bib` is a div, with its `.container` a
+        // sibling in the host's shadow root) can never satisfy it, so it
+        // retries the full MAX_CONFIGURATION_COUNT every time. Correcting the
+        // lookup would change bib sizing for those consumers and is tracked
+        // separately; cancelling the timer is what keeps it from freezing the
+        // page.
+        this._configureRetryId = setTimeout(() => {
+          this._configureRetryId = undefined;
           this.configureBibStrategy(value);
         }, 0);
       }
 
       if (element.isPopoverVisible) {
-        this.lockScroll(value === "fullscreen");
+        // Positioning strategy is not scroll ownership. Both "fullscreen" and
+        // "dialog" lay the bib over the page and trap focus inside it, so both
+        // must freeze the page behind them (AB#1647843). Gating this on
+        // "fullscreen" alone left dismissible desktop dialogs and drawers
+        // scrollable, and actively released the lock on every reposition
+        // (AB#1625424, AB#1625435). The nested "cover" strategy takes the else
+        // branch and stays scrollable by design — it sits inside its parent
+        // rather than over the page.
+        this.lockScroll(true);
       }
     } else {
+      // The mirror of the lock above: a strategy that does not own the page must
+      // hand the lock back, not merely decline to take it. autoUpdate re-runs
+      // this method on every resize tick, and getPositioningStrategy() flips
+      // "fullscreen" -> "floating" across the breakpoint for dropdown behavior —
+      // so an overlay that locked while narrow can land here while still open.
+      // Without this, the page stays frozen behind a small floating bib until
+      // hideBib() happens to run.
+      this.lockScroll(false);
+
       element.bib.style.position = "";
       element.bib.removeAttribute("isfullscreen");
       element.isBibFullscreen = false;
@@ -2886,6 +2993,46 @@ class AuroFloatingUI {
     this.hideBib("focusloss");
   }
 
+  /**
+   * @private
+   * Installs the handlers that dismiss an open overlay.
+   *
+   * Shared by showBib(), which opens the overlay, and configure(), which has to
+   * put these back after a rewire tore them down under an overlay that is still
+   * open. A non-modal overlay dismisses on outside click, focus loss and
+   * Escape; a modal one instead swallows Escape so the native dialog's
+   * CloseWatcher never sees it (AB#1613688).
+   */
+  setupDismissHandlers() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    if (!element.modal) {
+      this.setupHideHandlers();
+      return;
+    }
+
+    if (this.keyDownHandler) {
+      document.removeEventListener("keydown", this.keyDownHandler);
+    }
+    this.keyDownHandler = (evt) => {
+      if (evt.key === "Escape" && element.isPopoverVisible) {
+        // Intercept at keydown so CloseWatcher never sees the keystroke.
+        // Canceling `cancel` alone is insufficient — a second Esc with no
+        // intervening user activation triggers the anti-trap and fires `close`
+        // directly, bypassing any `cancel` preventDefault (AB#1613688).
+        // stopImmediatePropagation is intentional: it prevents other document
+        // keydown handlers (e.g. consumer code, auro-dialog) from also acting
+        // on Escape while the modal owns the key.
+        evt.preventDefault();
+        evt.stopImmediatePropagation();
+      }
+    };
+    document.addEventListener("keydown", this.keyDownHandler);
+  }
+
   setupHideHandlers() {
     const element = this.element;
     if (!element) {
@@ -3058,27 +3205,7 @@ class AuroFloatingUI {
 
       // prevent double showing: isPopovervisible gets first and showBib gets called later
       if (!this.showing) {
-        if (!element.modal) {
-          this.setupHideHandlers();
-        } else {
-          if (this.keyDownHandler) {
-            document.removeEventListener("keydown", this.keyDownHandler);
-          }
-          this.keyDownHandler = (evt) => {
-            if (evt.key === "Escape" && element.isPopoverVisible) {
-              // Intercept at keydown so CloseWatcher never sees the keystroke.
-              // Canceling `cancel` alone is insufficient — a second Esc with no
-              // intervening user activation triggers the anti-trap and fires `close`
-              // directly, bypassing any `cancel` preventDefault (AB#1613688).
-              // stopImmediatePropagation is intentional: it prevents other document
-              // keydown handlers (e.g. consumer code, auro-dialog) from also acting
-              // on Escape while the modal owns the key.
-              evt.preventDefault();
-              evt.stopImmediatePropagation();
-            }
-          };
-          document.addEventListener("keydown", this.keyDownHandler);
-        }
+        this.setupDismissHandlers();
         this.showing = true;
         element.isPopoverVisible = true;
         this.position();
@@ -3306,7 +3433,7 @@ class AuroFloatingUI {
 
     this.id = element.getAttribute("id");
     if (!this.id) {
-      this.id = window.crypto.randomUUID();
+      this.id = generateUUID();
       element.setAttribute("id", this.id);
     }
 
@@ -3318,7 +3445,35 @@ class AuroFloatingUI {
     this.enableKeyboardHandling = enableKeyboardHandling;
 
     this.eventPrefix = eventPrefix;
-    if (this.element !== elem) {
+
+    // A retained scroll lock's saved body styles were captured for whichever
+    // element held it, so only a same-element rewire may keep it. An actual
+    // element swap has to take the full teardown, or this instance is left
+    // holding a lock that no longer describes the page it points at — with no
+    // owner able to release it (AB#1647843).
+    const rewiringSameElement = this.element === elem;
+
+    if (!rewiringSameElement) {
+      // Tear down against the outgoing element, before this.element is
+      // repointed. Everything disconnect() releases is element-scoped:
+      // aria-modal on that element's inner dialog, the bib transform saved for
+      // it, its autoUpdate loop and its trigger listeners. Repointing first
+      // aimed all of it at the incoming element — the outgoing dialog kept
+      // aria-modal="true" for good, its bib stayed transformed, and the
+      // incoming bib had the outgoing element's saved transform written onto
+      // it. The trigger gate below read the incoming element's trigger, which
+      // is not assigned until later in this method, so on a swap teardown was
+      // usually skipped outright and the page stayed locked with no owner.
+      if (this.element?.trigger) {
+        this.disconnect({ teardown: true });
+      }
+
+      // disconnect() does not clear this.showing, and the rewire block at the
+      // end of this method only runs for a same-element rewire. Left true, the
+      // incoming element's first showBib() is silently dropped by its
+      // `!this.showing` guard and the overlay never opens.
+      this.showing = false;
+
       this.element = elem;
     }
 
@@ -3331,8 +3486,10 @@ class AuroFloatingUI {
       this.behavior = element.behavior;
     }
 
-    if (element.trigger) {
-      this.disconnect();
+    if (rewiringSameElement && element.trigger) {
+      // Rewiring, not tearing down — an overlay that is open right now keeps
+      // its page scroll lock across a trigger change.
+      this.disconnect({ teardown: false });
     }
     element.trigger =
       element.triggerElement ||
@@ -3361,11 +3518,61 @@ class AuroFloatingUI {
       element.trigger.addEventListener("focus", this.handleEvent);
       element.trigger.addEventListener("blur", this.handleEvent);
     }
+
+    // disconnect() above stripped the dismissal handlers and killed the
+    // autoUpdate loop; the trigger listeners re-registered here replace
+    // neither. An overlay that is open right now would otherwise be left on
+    // screen with outside-click, focus-loss and Escape all dead and its
+    // position frozen — and, since the lock is deliberately retained, holding
+    // the page with only its original trigger able to give it back.
+    if (rewiringSameElement && this.showing) {
+      this.setupDismissHandlers();
+
+      if (element.bib && (element.trigger || element.parentNode)) {
+        element.cleanup = autoUpdate(
+          element.trigger || element.parentNode,
+          element.bib,
+          () => {
+            this.position();
+          },
+        );
+      }
+    }
   }
 
-  disconnect() {
+  /**
+   * Tears the floater's connections down.
+   *
+   * Two callers with different intent share this: a real teardown, which must
+   * release the page scroll lock, and configure(), which re-runs it purely to
+   * rewire a changed trigger and must leave an open overlay's lock alone.
+   * @param {Object} [options] - Teardown options.
+   * @param {Boolean} [options.teardown] - False when only rewiring; keeps the
+   *   page scroll lock held for an overlay that is still open.
+   * @returns {void}
+   */
+  disconnect({ teardown = true } = {}) {
     this.cleanupHideHandlers();
 
+    // Cancel any pending configureBibStrategy() retry. It would otherwise fire
+    // a macrotask after the unlock below, re-lock the page, and leave it frozen
+    // with the floater already gone. Cancelled on a rewire too: configure()
+    // re-runs position() itself, so a stale retry has nothing to contribute.
+    if (this._configureRetryId !== undefined) {
+      clearTimeout(this._configureRetryId);
+      this._configureRetryId = undefined;
+    }
+
+    // Tearing down while the bib is still open would otherwise strand
+    // body{position:fixed} and leave the page permanently unscrollable —
+    // hideBib() is the only other unlock, and it never runs in this path.
+    // Skipped when merely rewiring: configure() routes through here on every
+    // triggerElement change, and releasing the lock there would unlock the page
+    // behind an overlay that is still open (AB#1625424, AB#1625435).
+    if (teardown) {
+      this.lockScroll(false);
+    }
+
     const element = this.element;
     if (!element) {
       return;
@@ -3520,6 +3727,14 @@ class ComponentBase extends i$2 {
     this.isBibFullscreen = false;
     this.floater = new AuroFloatingUI(this, 'dialog');
 
+    /**
+     * @private
+     * True once _teardown() has released the floater and nothing has rewired
+     * it. Read by connectedCallback() to rewire a remounted dialog, and by
+     * _teardown() to stay idempotent.
+     */
+    this._floaterTornDown = false;
+
     const versioning = new AuroDependencyVersioning();
 
     /**
@@ -3580,10 +3795,12 @@ class ComponentBase extends i$2 {
 
       /**
        * DEPRECATED - use `close-button-appearance="inverse" instead.
+       * @deprecated Use `close-button-appearance="inverse"` instead.
        */
       onDark: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'ondark'
       },
 
       /**
@@ -3601,7 +3818,8 @@ class ComponentBase extends i$2 {
        */
       isBibFullscreen: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'isbibfullscreen'
       },
 
       /**
@@ -3670,7 +3888,7 @@ class ComponentBase extends i$2 {
       slotWrapper.classList.remove("dialog-footer");
     }
 
-    this.floater.configure(this, this.floaterConfig.prefix);
+    this._configureFloater();
 
     // Forward FloatingUI toggle event to backward-compatible 'toggle' event
     this.addEventListener('auroDialog-toggled', (event) => {
@@ -3679,9 +3897,15 @@ class ComponentBase extends i$2 {
       }
     });
 
-    // Always intercept the native ESC/cancel event so we can decide
-    // whether to honour it based on `modal`. Re-dispatch via FloatingUI
-    // for non-modal so the hide lifecycle runs correctly.
+    // Defense-in-depth for the native ESC/cancel event. In practice neither
+    // branch fires today: auro-library's floatingUI binds its own document-level
+    // keydown handler, which closes a non-modal dialog via hideBib("keydown")
+    // and, for a modal, swallows the keystroke with preventDefault() +
+    // stopImmediatePropagation() before the platform CloseWatcher ever sees it
+    // (AB#1613688). This listener is kept rather than deleted because it is the
+    // component-side guarantee that a modal never self-closes on ESC: if the
+    // library stops swallowing, the platform `cancel` would otherwise close a
+    // modal dialog, which is exactly the behavior `modal` exists to prevent.
     this.dialog.addEventListener('cancel', (e) => {
       e.preventDefault();
       if (!this.modal) {
@@ -3728,12 +3952,78 @@ class ComponentBase extends i$2 {
     }
 
     if (changedProperties.has('triggerElement')) {
-      this.floater.configure(this, this.floaterConfig.prefix);
+      this._configureFloater();
+    }
+  }
+
+  /**
+   * @private
+   * Wires the floater to this element and records that it is live, so a later
+   * reconnect can tell a torn-down floater from one that never lost its wiring.
+   * @returns {void}
+   */
+  _configureFloater() {
+    this._floaterTornDown = false;
+    this.floater.configure(this, this.floaterConfig.prefix);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Lit does not re-run firstUpdated() on reconnect, so without this a host
+    // that removes and re-inserts the dialog across separate tasks — Vue
+    // <keep-alive>, caching tab/accordion hosts, virtualized lists, or anything
+    // that parks the node in a DocumentFragment in one task and inserts it in
+    // the next — gets back a dead element: _teardown() dropped the trigger
+    // listeners, ran element.cleanup(), tore down autoUpdate and released the
+    // page scroll lock, and nothing rewired any of it.
+    //
+    // Only re-configure when a teardown actually ran. On the normal first
+    // connect the flag is false and firstUpdated() owns the single configure
+    // call; on a same-task DOM move the deferred teardown never runs, so the
+    // flag stays false here too and the move is still a no-op.
+    if (this.hasUpdated && this._floaterTornDown) {
+      this._configureFloater();
     }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
+
+    // A same-document DOM move (appendChild of an already-parented node) fires
+    // disconnectedCallback and reconnects within the same task. Defer the
+    // teardown one microtask and bail if the element came back, so a reparent
+    // does not dismantle a dialog that is still open: floater.disconnect()
+    // releases the page scroll lock and tears down autoUpdate, which would
+    // leave the dialog visible over a scrollable page with nothing left to
+    // re-lock it — the AB#1625424 symptom returning by a different route.
+    //
+    // A host that removes and re-inserts across tasks (not a move) is treated
+    // as a real unmount, which is the correct reading of that sequence.
+    queueMicrotask(() => {
+      if (this.isConnected) {
+        return;
+      }
+      this._teardown();
+    });
+  }
+
+  /**
+   * @private
+   * Releases everything the dialog owns outside its own shadow root.
+   * Split out of disconnectedCallback so a DOM move can skip it.
+   *
+   * Idempotent: a repeated disconnect in the same task must not invoke
+   * floater.disconnect() twice, and connectedCallback() reads the same flag to
+   * decide whether the floater needs rewiring.
+   * @returns {void}
+   */
+  _teardown() {
+    if (this._floaterTornDown) {
+      return;
+    }
+    this._floaterTornDown = true;
+
     if (this._hidePopoverTimerId) {
       clearTimeout(this._hidePopoverTimerId);
       this._hidePopoverTimerId = undefined;

package/demo/index.md

@@ -93,6 +93,7 @@
 <!-- AURO-GENERATED-CONTENT:END -->
 <auro-header level="2" id="modalExample">Modal</auro-header>
 <p>The <code>modal</code> attribute locks the user into interacting with the dialog. The close icon is not rendered and clicking outside the dialog will not dismiss it, so a <code>modal</code> dialog must include an explicit action button in the footer to dismiss it.</p>
+<p>Freezing the page behind the dialog is not what <code>modal</code> controls — every dialog does that while it is open, and restores the scroll position on close. What <code>modal</code> changes is how the dialog can be dismissed. See the Accessibility page for details.</p>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/modal.html) -->
 <!-- The below content is automatically added from ./../apiExamples/modal.html -->