@scalewing/react 1.59.2 → 1.59.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @scalewing/react
 
+## 1.59.4
+
+### Patch Changes
+
+- 29e682e: Focus stays clear of sticky chrome (WCAG 2.4.11). `AppShell` measures its `pageBar` (as it does the compact bar) and gives everything in `main` a `scroll-margin-block-start` past the page bar and, below `lg`, the compact bar, so a control the browser scrolls into view on focus stops under them, not behind them. A stuck `ActionBar` gives the document a `scroll-padding-block-end` of its one-row height and lift, so a control above it is not scrolled behind it. No API change.
+
+## 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/AppShell.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from 'react';
 import { breakpointQuery } from '../css/breakpoints.js';
 import { appShellWideQuery } from '../css/css-app-shell.js';
-import { appShellBarHeightVariable } from '../css/css-app-shell-page-bar.js';
+import { appShellBarHeightVariable, appShellPageBarHeightVariable, } from '../css/css-app-shell-page-bar.js';
 import { AppShellBar } from './app-shell/AppShellBar.js';
 import { AppShellDrawer } from './app-shell/AppShellDrawer.js';
 import { AppShellSidebar } from './app-shell/AppShellSidebar.js';
@@ -47,9 +47,20 @@ export function AppShell({ barEnd, barTitle, children, footer, groups, header, l
     // make it; the generated CSS falls back to the bar's usual height.
     const hasPageBar = pageBar !== undefined && pageBar !== null && pageBar !== false;
     const barHeight = useElementHeight(barRef, hasPageBar);
-    const shellStyle = barHeight === null
+    // The page bar's own height keeps a focused control clear of it when the
+    // browser scrolls it into view (WCAG 2.4.11), however much it wraps.
+    const pageBarRef = useRef(null);
+    const pageBarHeight = useElementHeight(pageBarRef, hasPageBar);
+    const shellStyle = barHeight === null && pageBarHeight === null
         ? undefined
-        : { [appShellBarHeightVariable]: `${barHeight}px` };
+        : {
+            ...(barHeight === null
+                ? {}
+                : { [appShellBarHeightVariable]: `${barHeight}px` }),
+            ...(pageBarHeight === null
+                ? {}
+                : { [appShellPageBarHeightVariable]: `${pageBarHeight}px` }),
+        };
     // The drawer belongs to the bar, which is gone from `lg` up: a window
     // widened while it is open closes it.
     if (sidebarShown && menuOpen)
@@ -63,7 +74,7 @@ export function AppShell({ barEnd, barTitle, children, footer, groups, header, l
         refocusRef.current = false;
         menuRef.current?.focus();
     }, [menuOpen]);
-    return (_jsxs("div", { className: "sw-app-shell", style: shellStyle, children: [skipLink ? (_jsx(SkipToMain, { label: skipLink.label, mainId: mainId, mainRef: mainRef })) : null, _jsx(AppShellBar, { barEnd: barEnd, barRef: barRef, barTitle: barTitle, menuCount: menuCount, menuCountLabel: menuCountLabel, menuCountTone: menuCountTone, menuIcon: menuIcon, menuOpen: menuOpen, menuRef: menuRef, onOpenMenu: () => setMenuOpen(true), openMenuLabel: labels.openMenu }), _jsx(AppShellSidebar, { footer: footer, groups: groups, header: header, navLabel: navLabel, onNavigate: onNavigate, rail: sidebarShown && !wide, railFooter: railFooter, railHeader: railHeader }), _jsxs("main", { ref: mainRef, className: "sw-app-shell-main", id: skipLink ? mainId : undefined, tabIndex: skipLink ? -1 : undefined, children: [hasPageBar ? (_jsx("div", { className: "sw-app-shell-page-bar", children: pageBar })) : null, children] }), _jsx(AppShellDrawer, { closeLabel: labels.closeMenu, footer: footer, groups: groups, header: header, navLabel: navLabel, onChoose: () => setMenuOpen(false), onClose: () => {
+    return (_jsxs("div", { className: "sw-app-shell", style: shellStyle, children: [skipLink ? (_jsx(SkipToMain, { label: skipLink.label, mainId: mainId, mainRef: mainRef })) : null, _jsx(AppShellBar, { barEnd: barEnd, barRef: barRef, barTitle: barTitle, menuCount: menuCount, menuCountLabel: menuCountLabel, menuCountTone: menuCountTone, menuIcon: menuIcon, menuOpen: menuOpen, menuRef: menuRef, onOpenMenu: () => setMenuOpen(true), openMenuLabel: labels.openMenu }), _jsx(AppShellSidebar, { footer: footer, groups: groups, header: header, navLabel: navLabel, onNavigate: onNavigate, rail: sidebarShown && !wide, railFooter: railFooter, railHeader: railHeader }), _jsxs("main", { ref: mainRef, className: "sw-app-shell-main", id: skipLink ? mainId : undefined, tabIndex: skipLink ? -1 : undefined, children: [hasPageBar ? (_jsx("div", { ref: pageBarRef, className: "sw-app-shell-page-bar", children: pageBar })) : null, children] }), _jsx(AppShellDrawer, { closeLabel: labels.closeMenu, footer: footer, groups: groups, header: header, navLabel: navLabel, onChoose: () => setMenuOpen(false), onClose: () => {
                     refocusRef.current = true;
                     setMenuOpen(false);
                 }, onNavigate: onNavigate, open: menuOpen })] }));

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-action-bar.d.ts

@@ -1,4 +1,5 @@
 import { type Breakpoint } from './breakpoints.js';
 export declare function actionBarStickyClass(stickyBelow: Breakpoint | undefined): string;
+export declare const actionBarClearance = "calc(var(--sw-control-md-min-height) + 2 * var(--sw-space-3) + 2px + 2 * var(--sw-space-2) + env(safe-area-inset-bottom, 0px))";
 export declare function cssActionBarClasses(): string;
 export declare function actionBarClassCatalog(): string[];

package/dist/css/css-action-bar.js

@@ -18,18 +18,33 @@ export function actionBarStickyClass(stickyBelow) {
         ? `sw-action-bar-sticky-below-${stickyBelow}`
         : 'sw-action-bar-sticky';
 }
+/*
+ * While a bar is stuck to the bottom, the document keeps a focused control
+ * clear of it when the browser scrolls it into view (WCAG 2.4.11): the
+ * bar's one-row height (an md control in its space-3 padding and hairline
+ * border), its lift off the edge, and a space-2 gap. A bar that wraps to a
+ * second row is taller than this.
+ */
+export const actionBarClearance = 'calc(var(--sw-control-md-min-height) + 2 * var(--sw-space-3) + 2px + 2 * var(--sw-space-2) + env(safe-area-inset-bottom, 0px))';
+function clearOf(stickyClass, indent) {
+    return `${indent}:root:has(.${stickyClass}) { scroll-padding-block-end: ${actionBarClearance}; }`;
+}
 function stickyRules() {
     const below = breakpoints
         .map((breakpoint) => `@media ${breakpointQuery('below', breakpoint)} {
   .${actionBarStickyClass(breakpoint)} {
 ${stuckToBottom('    ')}
   }
+
+${clearOf(actionBarStickyClass(breakpoint), '  ')}
 }`)
         .join('\n\n');
     return `.sw-action-bar-sticky {
 ${stuckToBottom('  ')}
 }
 
+${clearOf('sw-action-bar-sticky', '')}
+
 ${below}`;
 }
 export function cssActionBarClasses() {

package/dist/css/css-app-shell-page-bar.d.ts

@@ -1,3 +1,5 @@
 export declare const appShellBarHeightVariable = "--sw-app-shell-bar-height";
+/** The page bar's measured height, set beside the bar's. */
+export declare const appShellPageBarHeightVariable = "--sw-app-shell-page-bar-height";
 export declare function cssAppShellPageBarClasses(): string;
 export declare function appShellPageBarClassCatalog(): string[];

package/dist/css/css-app-shell-page-bar.js

@@ -7,6 +7,8 @@ import { coarsePointerQuery, touchTarget } from './touch-target.js';
  * the bar whatever its end controls make it.
  */
 export const appShellBarHeightVariable = '--sw-app-shell-bar-height';
+/** The page bar's measured height, set beside the bar's. */
+export const appShellPageBarHeightVariable = '--sw-app-shell-page-bar-height';
 /*
  * The bar's usual height before it is measured (and without script): the
  * sm menu button, or the touch target on a coarse pointer, inside the
@@ -51,6 +53,33 @@ function pageBarRules() {
     padding-inline: var(--sw-space-6);
     top: 0;
   }
+}
+
+${focusClearRules()}`;
+}
+/*
+ * Focus clear of the sticky chrome (WCAG 2.4.11): when the browser scrolls a
+ * focused control into view, it stops a space-2 below the page bar (and the
+ * compact bar over it below `lg`), not under them. The page bar's measured
+ * height falls back to its usual one: an sm control in its space-2 padding
+ * and hairline.
+ */
+function focusClearRules() {
+    const pageBar = `var(${appShellPageBarHeightVariable}, ${barHeightFallback('var(--sw-control-sm-min-height)')})`;
+    return `.sw-app-shell-main:has(> .sw-app-shell-page-bar) * {
+  scroll-margin-block-start: calc(var(${appShellBarHeightVariable}, ${barHeightFallback('var(--sw-control-sm-min-height)')}) + ${pageBar} + var(--sw-space-2));
+}
+
+@media ${coarsePointerQuery} {
+  .sw-app-shell-main:has(> .sw-app-shell-page-bar) * {
+    scroll-margin-block-start: calc(var(${appShellBarHeightVariable}, ${barHeightFallback(touchTarget)}) + ${pageBar} + var(--sw-space-2));
+  }
+}
+
+@media ${fromLg} {
+  .sw-app-shell-main:has(> .sw-app-shell-page-bar) * {
+    scroll-margin-block-start: calc(${pageBar} + var(--sw-space-2));
+  }
 }`;
 }
 /*

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

@@ -6029,6 +6029,22 @@ html:has(.sw-site-header-sticky) {
   }
 }
 
+.sw-app-shell-main:has(> .sw-app-shell-page-bar) * {
+  scroll-margin-block-start: calc(var(--sw-app-shell-bar-height, calc(var(--sw-control-sm-min-height) + 2 * var(--sw-space-2) + 1px)) + var(--sw-app-shell-page-bar-height, calc(var(--sw-control-sm-min-height) + 2 * var(--sw-space-2) + 1px)) + var(--sw-space-2));
+}
+
+@media (pointer: coarse) {
+  .sw-app-shell-main:has(> .sw-app-shell-page-bar) * {
+    scroll-margin-block-start: calc(var(--sw-app-shell-bar-height, calc(var(--sw-control-md-min-height) + 2 * var(--sw-space-2) + 1px)) + var(--sw-app-shell-page-bar-height, calc(var(--sw-control-sm-min-height) + 2 * var(--sw-space-2) + 1px)) + var(--sw-space-2));
+  }
+}
+
+@media (min-width: 64rem) {
+  .sw-app-shell-main:has(> .sw-app-shell-page-bar) * {
+    scroll-margin-block-start: calc(var(--sw-app-shell-page-bar-height, calc(var(--sw-control-sm-min-height) + 2 * var(--sw-space-2) + 1px)) + var(--sw-space-2));
+  }
+}
+
 .sw-app-shell-menu {
   position: relative;
 }
@@ -7128,6 +7144,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);
@@ -7913,12 +7940,16 @@ html:has(.sw-site-header-sticky) {
   z-index: 3;
 }
 
+:root:has(.sw-action-bar-sticky) { scroll-padding-block-end: calc(var(--sw-control-md-min-height) + 2 * var(--sw-space-3) + 2px + 2 * var(--sw-space-2) + env(safe-area-inset-bottom, 0px)); }
+
 @media not all and (min-width: 48rem) {
   .sw-action-bar-sticky-below-md {
     bottom: calc(var(--sw-space-2) + env(safe-area-inset-bottom, 0px));
     position: sticky;
     z-index: 3;
   }
+
+  :root:has(.sw-action-bar-sticky-below-md) { scroll-padding-block-end: calc(var(--sw-control-md-min-height) + 2 * var(--sw-space-3) + 2px + 2 * var(--sw-space-2) + env(safe-area-inset-bottom, 0px)); }
 }
 
 .sw-switch {

package/package.json

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