@camunda/design-system 0.32.1 → 0.32.2

package/dist/src/lib/focus-visible-on-close.js

@@ -0,0 +1,61 @@
+/**
+ * Makes the focus ring visible when a modal overlay restores focus to its
+ * trigger on close (#259 follow-up).
+ *
+ * Why: Radix restores focus with a programmatic `.focus()`. The browser's
+ * `:focus-visible` heuristic shows a ring only when the last input was a
+ * keyboard, so closing an overlay by mouse (clicking the X or the backdrop)
+ * returns focus to the trigger with no visible ring — a keyboard user who
+ * happened to click cannot see where focus landed. We stamp a transient marker
+ * on the restored element so the DS `Button` shows its ring regardless of the
+ * input modality that closed the overlay.
+ *
+ * The marker is self-clearing: it is removed on the next `pointerdown` anywhere
+ * and when the element loses focus. Without that, a sticky attribute would show
+ * a ring on every ordinary mouse click of that Button — a worse regression than
+ * the missing ring it fixes.
+ *
+ * Styling target: the marker lands on the element Radix focuses — the trigger,
+ * a DS `Button` in every DS overlay. A non-`Button` custom trigger would carry
+ * the attribute but has no matching ring style; same known-scope caveat as the
+ * inert body-child mirror in `inert-aria-hidden.ts`.
+ */
+export const FOCUS_VISIBLE_RESTORE_ATTR = "data-focus-visible-restore";
+/**
+ * Use as a Radix overlay `Content`'s `onCloseAutoFocus`. Does not
+ * `preventDefault`, so Radix still restores focus to the trigger; on the next
+ * frame the restored element (`document.activeElement`) is stamped with the
+ * self-clearing marker. No-ops if a prior handler already prevented the default
+ * restore.
+ */
+export function markFocusVisibleOnClose(event) {
+    if (event.defaultPrevented || typeof requestAnimationFrame === "undefined") {
+        return;
+    }
+    requestAnimationFrame(() => {
+        const el = document.activeElement;
+        if (!(el instanceof HTMLElement) || el === document.body)
+            return;
+        el.setAttribute(FOCUS_VISIBLE_RESTORE_ATTR, "");
+        const clear = () => {
+            el.removeAttribute(FOCUS_VISIBLE_RESTORE_ATTR);
+            el.removeEventListener("blur", clear);
+            document.removeEventListener("pointerdown", clear, true);
+        };
+        el.addEventListener("blur", clear);
+        document.addEventListener("pointerdown", clear, true);
+    });
+}
+/**
+ * Wraps a Radix overlay `Content`'s `onCloseAutoFocus`: runs the consumer's
+ * handler first (so it can `preventDefault`), then stamps the focus-visible
+ * marker. Use in every DS overlay whose trigger is a `Button` so the restored
+ * focus ring is visible regardless of the closing input modality.
+ */
+export function composeCloseAutoFocus(handler) {
+    return (event) => {
+        handler?.(event);
+        markFocusVisibleOnClose(event);
+    };
+}
+//# sourceMappingURL=focus-visible-on-close.js.map

package/dist/src/lib/focus-visible-on-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-visible-on-close.js","sourceRoot":"","sources":["../../../src/lib/focus-visible-on-close.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,MAAM,0BAA0B,GAAG,4BAA4B,CAAC;AAEvE;;;;;;GAMG;AACH,MAAM,UAAU,uBAAuB,CAAC,KAAY;IAClD,IAAI,KAAK,CAAC,gBAAgB,IAAI,OAAO,qBAAqB,KAAK,WAAW,EAAE,CAAC;QAC3E,OAAO;IACT,CAAC;IACD,qBAAqB,CAAC,GAAG,EAAE;QACzB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC;QAClC,IAAI,CAAC,CAAC,EAAE,YAAY,WAAW,CAAC,IAAI,EAAE,KAAK,QAAQ,CAAC,IAAI;YAAE,OAAO;QACjE,EAAE,CAAC,YAAY,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC;QAChD,MAAM,KAAK,GAAG,GAAG,EAAE;YACjB,EAAE,CAAC,eAAe,CAAC,0BAA0B,CAAC,CAAC;YAC/C,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YACtC,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;QAC3D,CAAC,CAAC;QACF,EAAE,CAAC,gBAAgB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACnC,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CACnC,OAAgC;IAEhC,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACjB,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;AACJ,CAAC"}

package/dist/src/lib/inert-aria-hidden.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Mirrors native `inert` onto the page background while a modal Radix overlay
+ * (Dialog, AlertDialog, DropdownMenu, Select, Sheet, modal Popover) is open.
+ *
+ * Why this exists (#259): those primitives call the `aria-hidden` package's
+ * `hideOthers()` on open, which marks every background sibling
+ * `aria-hidden="true"` (plus a `data-aria-hidden` counter) but leaves it
+ * keyboard-focusable. That trips axe's `aria-hidden-focus` rule
+ * (WCAG 4.1.2 / 2.4.3) on every consuming app. Radix's pinned version uses
+ * `hideOthers()`, not `inertOthers()`, so we add `inert` ourselves.
+ *
+ * Scope: only direct children of `document.body` are inerted — those are the
+ * real page-background roots (app root, portal-less content). This matches
+ * Radix's default body-level portals: `hideOthers()` marks the portal's
+ * body-level siblings (the background) plus the overlay's in-portal sibling
+ * (the backdrop). The backdrop lives *inside* the portal (not a body child), so
+ * it is left untouched — inerting it would block click-outside-to-close.
+ *
+ * Known limitation: an app that both mounts into a non-body container AND
+ * configures Radix to portal inside that same container would have its
+ * background marked at a nested level, not as a body child, and would fall
+ * outside this scope. DS overlays use the default (body) portal, so this does
+ * not affect them.
+ *
+ * We only ever clear `inert` on elements we set it on (tracked in a WeakSet), so
+ * a consumer's own `inert` is never clobbered.
+ */
+/**
+ * Installs a single document-wide observer that keeps `inert` in sync with the
+ * `data-aria-hidden` marker Radix applies. Idempotent — safe to call from every
+ * C4Provider mount; only the first call installs anything.
+ */
+export declare function installAriaHiddenInert(): void;
+//# sourceMappingURL=inert-aria-hidden.d.ts.map

package/dist/src/lib/inert-aria-hidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inert-aria-hidden.d.ts","sourceRoot":"","sources":["../../../src/lib/inert-aria-hidden.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAUH;;;;GAIG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAqC7C"}

package/dist/src/lib/inert-aria-hidden.js

@@ -0,0 +1,76 @@
+/**
+ * Mirrors native `inert` onto the page background while a modal Radix overlay
+ * (Dialog, AlertDialog, DropdownMenu, Select, Sheet, modal Popover) is open.
+ *
+ * Why this exists (#259): those primitives call the `aria-hidden` package's
+ * `hideOthers()` on open, which marks every background sibling
+ * `aria-hidden="true"` (plus a `data-aria-hidden` counter) but leaves it
+ * keyboard-focusable. That trips axe's `aria-hidden-focus` rule
+ * (WCAG 4.1.2 / 2.4.3) on every consuming app. Radix's pinned version uses
+ * `hideOthers()`, not `inertOthers()`, so we add `inert` ourselves.
+ *
+ * Scope: only direct children of `document.body` are inerted — those are the
+ * real page-background roots (app root, portal-less content). This matches
+ * Radix's default body-level portals: `hideOthers()` marks the portal's
+ * body-level siblings (the background) plus the overlay's in-portal sibling
+ * (the backdrop). The backdrop lives *inside* the portal (not a body child), so
+ * it is left untouched — inerting it would block click-outside-to-close.
+ *
+ * Known limitation: an app that both mounts into a non-body container AND
+ * configures Radix to portal inside that same container would have its
+ * background marked at a nested level, not as a body child, and would fall
+ * outside this scope. DS overlays use the default (body) portal, so this does
+ * not affect them.
+ *
+ * We only ever clear `inert` on elements we set it on (tracked in a WeakSet), so
+ * a consumer's own `inert` is never clobbered.
+ */
+const HIDDEN_SELECTOR = '[data-aria-hidden][aria-hidden="true"]';
+let installed = false;
+function isBackgroundRoot(el) {
+    return el.parentElement === document.body && el instanceof HTMLElement;
+}
+/**
+ * Installs a single document-wide observer that keeps `inert` in sync with the
+ * `data-aria-hidden` marker Radix applies. Idempotent — safe to call from every
+ * C4Provider mount; only the first call installs anything.
+ */
+export function installAriaHiddenInert() {
+    if (typeof document === "undefined" || installed)
+        return;
+    installed = true;
+    const owned = new WeakSet();
+    const sync = (el) => {
+        if (!isBackgroundRoot(el))
+            return;
+        const shouldInert = el.matches(HIDDEN_SELECTOR);
+        if (shouldInert && !el.inert) {
+            el.inert = true;
+            owned.add(el);
+        }
+        else if (!shouldInert && owned.has(el)) {
+            el.inert = false;
+            owned.delete(el);
+        }
+    };
+    // Cover state that already exists at install time (an overlay may open before
+    // the first provider mounts, or the provider itself lives inside the overlay).
+    document.body.querySelectorAll(HIDDEN_SELECTOR).forEach(sync);
+    const observer = new MutationObserver((records) => {
+        for (const record of records)
+            sync(record.target);
+    });
+    // Watch only the marker attributes anywhere under body (cheap — the filter
+    // scopes callbacks to two attributes). This is the primary path: Radix
+    // toggles `aria-hidden`/`data-aria-hidden` on the background *after* the
+    // portal is inserted, so the attribute mutation always fires. Any background
+    // already marked at install time is handled by the scan above. Clearing the
+    // marker on close removes `inert` here; the FocusRestoredOnClose regression
+    // story guards that this lands before Radix restores focus to the trigger.
+    observer.observe(document.body, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["aria-hidden", "data-aria-hidden"],
+    });
+}
+//# sourceMappingURL=inert-aria-hidden.js.map

package/dist/src/lib/inert-aria-hidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inert-aria-hidden.js","sourceRoot":"","sources":["../../../src/lib/inert-aria-hidden.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,eAAe,GAAG,wCAAwC,CAAC;AAEjE,IAAI,SAAS,GAAG,KAAK,CAAC;AAEtB,SAAS,gBAAgB,CAAC,EAAW;IACnC,OAAO,EAAE,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,IAAI,EAAE,YAAY,WAAW,CAAC;AACzE,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,sBAAsB;IACpC,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,SAAS;QAAE,OAAO;IACzD,SAAS,GAAG,IAAI,CAAC;IAEjB,MAAM,KAAK,GAAG,IAAI,OAAO,EAAe,CAAC;IAEzC,MAAM,IAAI,GAAG,CAAC,EAAW,EAAE,EAAE;QAC3B,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC;YAAE,OAAO;QAClC,MAAM,WAAW,GAAG,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAChD,IAAI,WAAW,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;YAC7B,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC;YAChB,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAChB,CAAC;aAAM,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;YACzC,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC;YACjB,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,8EAA8E;IAC9E,+EAA+E;IAC/E,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9D,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,OAAO,EAAE,EAAE;QAChD,KAAK,MAAM,MAAM,IAAI,OAAO;YAAE,IAAI,CAAC,MAAM,CAAC,MAAiB,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IACH,2EAA2E;IAC3E,uEAAuE;IACvE,yEAAyE;IACzE,6EAA6E;IAC7E,4EAA4E;IAC5E,4EAA4E;IAC5E,2EAA2E;IAC3E,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;QAC9B,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC;KACrD,CAAC,CAAC;AACL,CAAC"}