@scalewing/react 1.59.2 → 1.59.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalewing/react
 
+## 1.59.3
+
+### Patch Changes
+
+- f929c5c: A `Dialog` unmounted while open (a consumer that renders it only while it is open) now closes first, while it is still in the document, so the browser hands focus back to the element that had it when the dialog opened, as a dialog closed by `open={false}` does; removed while open, a modal dialog left focus on the body (WCAG 2.4.3). `onClose` is not asked. A `ContextSwitcher` trigger's muted words read as the text colour while it is open or hovered, on its quiet fill (4.14:1 before), as rows already do. No API change.
+
 ## 1.59.2
 
 ### Patch Changes

package/dist/components/dialog-close-requests.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
 /**
  * A press on the backdrop: the target is the dialog element itself (not a
  * child, a nested dialog's backdrop, or a popover that overflows the box)
@@ -77,6 +77,21 @@ export function useDialogCloseRequests({ open, onClose, onCancel, onKeyDown, onP
         if (!open && node.open)
             node.close();
     }, [open, browserCloses]);
+    // A consumer that renders the dialog only while it is open unmounts it
+    // instead of passing `open={false}`. Closing it first, while it is still
+    // in the document (a layout cleanup runs before React removes the node),
+    // lets the browser hand focus back to the element that had it when the
+    // dialog opened, as a dialog closed by its prop does. Removed while open,
+    // a modal dialog leaves focus on the body (WCAG 2.4.3).
+    useLayoutEffect(() => {
+        const node = nodeRef.current;
+        return () => {
+            if (!node?.open)
+                return;
+            openRef.current = false;
+            node.close();
+        };
+    }, []);
     function handleKeyDown(event) {
         onKeyDown?.(event);
         // A nested control (a menu, a listbox, a tooltip, an inner dialog) or the

package/dist/css/css-context-switcher-trigger.js

@@ -1,6 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
-import { quietFill } from './quiet-fill.js';
+import { mutedReadsAsText, quietFill } from './quiet-fill.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
 export const contextSwitcherTriggerAppearances = [
@@ -91,6 +91,13 @@ ${trigger}[aria-expanded='true'] {
   }
 }
 
+/* The consumer's muted words on the quiet fill read as the text colour (4.14:1 before). */
+${mutedReadsAsText([`${trigger}[aria-expanded='true'] *`])}
+
+@media (hover: hover) {
+  ${mutedReadsAsText([`${trigger}:hover *`])}
+}
+
 ${trigger}:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);

package/dist/styles.css

@@ -7128,6 +7128,17 @@ html:has(.sw-site-header-sticky) {
   }
 }
 
+/* The consumer's muted words on the quiet fill read as the text colour (4.14:1 before). */
+.sw-context-switcher-trigger[aria-expanded='true'] * {
+  --sw-color-muted: var(--sw-color-text);
+}
+
+@media (hover: hover) {
+  .sw-context-switcher-trigger:hover * {
+  --sw-color-muted: var(--sw-color-text);
+}
+}
+
 .sw-context-switcher-trigger:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.59.2",
+  "version": "1.59.3",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",