@scalewing/react 1.59.3 → 1.59.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/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/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;
 }
@@ -7924,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.3",
+  "version": "1.59.4",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",