@astryxdesign/core 0.7.7 → 0.7.8-canary.07ee4b5

package/src/Stepper/Stepper.tsx

@@ -23,14 +23,7 @@
  * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
  */
 
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
+import {useCallback, useMemo, useRef, useState, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 
 import {spacingVars} from '../theme/tokens.stylex';
@@ -360,32 +353,22 @@ export function Stepper({
   // still owns the ref and DOM pass-throughs and fills that frame, so its width
   // is the effective component width to observe.
   const [rootWidth, setRootWidth] = useState(0);
-  const stopObservingRootRef = useRef<(() => void) | null>(null);
   const attachRoot = useCallback(
     (el: HTMLOListElement | null) => {
-      stopObservingRootRef.current?.();
-      stopObservingRootRef.current = null;
-      if (el && isHorizontal) {
-        // observeResize calls back once, synchronously, as it subscribes. That
-        // is what keeps the collapse off the screen: a ref callback runs during
-        // commit, so the width lands and the re-render happens before the
-        // browser has painted the uncollapsed stepper it would otherwise show
-        // first.
-        stopObservingRootRef.current = observeResize(el, entry =>
-          setRootWidth(entry.target.clientWidth),
-        );
+      if (el == null || !isHorizontal) {
+        return;
       }
+      // observeResize calls back once, synchronously, as it subscribes. That
+      // is what keeps the collapse off the screen: a ref callback runs during
+      // commit, so the width lands and the re-render happens before the
+      // browser has painted the uncollapsed stepper it would otherwise show
+      // first. React calls the returned unsubscribe when the list detaches or
+      // when the orientation changes.
+      return observeResize(el, entry => setRootWidth(entry.target.clientWidth));
     },
     [isHorizontal],
   );
   const rootRef = useMergedRefs(ref, attachRoot);
-  useEffect(
-    () => () => {
-      stopObservingRootRef.current?.();
-      stopObservingRootRef.current = null;
-    },
-    [],
-  );
 
   // Width is measured rather than asked of a container query because the
   // answer changes what is *rendered*, not just how it looks: the labels and

package/src/Switch/Switch.tsx

@@ -52,7 +52,6 @@ import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {useAnnounce} from '../hooks/useAnnounce';
-import {useResolvedRequired} from '../hooks/useResolvedRequired';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {usePressFeedback} from '../hooks/usePressFeedback';
@@ -867,10 +866,6 @@ export function Switch({
   const pressable = usePressFeedback();
   const descriptionID = useId();
   const statusMessageID = useId();
-  // Announce the effective required state (form default included) while the
-  // native `required` stays bound to the explicit `isRequired` so a layout
-  // default never switches on browser validation.
-  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
 
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
@@ -1003,7 +998,8 @@ export function Switch({
         aria-disabled={isDisabled ? 'true' : undefined}
         form={isDisabled ? '' : undefined}
         required={isRequired}
-        aria-required={isEffectivelyRequired ? 'true' : undefined}
+        // A form's required default sets nothing here: an off switch is an answer.
+        aria-required={isRequired ? 'true' : undefined}
         onChange={e => {
           if (isDisabled || isBusy) {
             return;

package/src/Switch/useSwitchTouch.ts

@@ -23,7 +23,7 @@ import type {GestureTouch} from '../gestures/types';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {
-  createAnimator,
+  createMotionAnimator,
   type Animator,
   type MotionCurve,
 } from '../motion/animator';
@@ -282,15 +282,15 @@ export class SwitchTouchController {
       return;
     }
     registerSwitchTable();
-    this.thumb = createAnimator(elements.thumb);
+    this.thumb = createMotionAnimator(elements.thumb);
     // The layer rests clear (its class's opacity 0) while the visuals show
     // the value; from here its opacity is the animator's.
-    this.fade = createAnimator(elements.track, {
+    this.fade = createMotionAnimator(elements.track, {
       pseudoElement: '::after',
       initial: {opacity: 0},
     });
     this.fade.set({opacity: 0});
-    this.shadow = createAnimator(elements.thumb, {
+    this.shadow = createMotionAnimator(elements.thumb, {
       pseudoElement: '::after',
       initial: {opacity: 0},
     });

package/src/Table/BaseTable.tsx

@@ -14,7 +14,14 @@
  * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
-import {memo, useRef, type ReactElement, type ReactNode, type Ref} from 'react';
+import {
+  memo,
+  useId,
+  useRef,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react';
 import {isRenderable} from '../utils/isRenderable';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
@@ -423,6 +430,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
   } satisfies TableRenderProps);
 
   // --- Plugin pipeline: header cells ---
+  const headerLabelIdBase = useId();
   const headerCells = resolvedColumns.map((col, columnIndex) => {
     const headerContent = col.header ?? col.key;
 
@@ -477,28 +485,54 @@ function BaseTableInner<T extends Record<string, unknown>>({
     const hasSlots =
       before != null || after != null || overlay != null || below != null;
 
-    const headerInner = hasSlots ? (
+    const labelRow = isRenderable(after) ? (
+      <div {...stylex.props(styles.headerLabelRow)}>
+        {resolvedContent}
+        {after}
+      </div>
+    ) : (
+      resolvedContent
+    );
+
+    // The overlay is a control of its own. Keep its name and value out of the
+    // header's name.
+    const namesOwnHeader =
+      isRenderable(overlay) &&
+      mergedHtmlProps['aria-label'] == null &&
+      mergedHtmlProps['aria-labelledby'] == null;
+    const labelId = `${headerLabelIdBase}-label-${columnIndex}`;
+    const belowId = `${headerLabelIdBase}-below-${columnIndex}`;
+    const hasBelow = isRenderable(below);
+
+    const headerInner = !hasSlots ? (
+      resolvedContent
+    ) : namesOwnHeader ? (
+      <>
+        {/* Inline, so the cell's text-overflow still reaches the label. */}
+        <span id={labelId}>
+          {before}
+          {labelRow}
+        </span>
+        {overlay}
+        {hasBelow && <div id={belowId}>{below}</div>}
+      </>
+    ) : (
       <>
         {before}
-        {isRenderable(after) ? (
-          <div {...stylex.props(styles.headerLabelRow)}>
-            {resolvedContent}
-            {after}
-          </div>
-        ) : (
-          resolvedContent
-        )}
+        {labelRow}
         {overlay}
         {below}
       </>
-    ) : (
-      resolvedContent
     );
+    const headerNameProps = namesOwnHeader
+      ? {'aria-labelledby': hasBelow ? `${labelId} ${belowId}` : labelId}
+      : {};
 
     return (
       <HeaderCellComponent
         key={col.key}
         {...mergedHtmlProps}
+        {...headerNameProps}
         {...headerTitleProp}
         contextMenuActions={cellRenderProps.contextMenuActions}
         xstyle={cellRenderProps.xstyle}>

package/src/Table/plugins/columnResize/useTableColumnResize.tsx

@@ -865,7 +865,7 @@ export function useTableColumnResize<T extends Record<string, unknown>>(
     }
   }, []);
 
-  // Clean up observer on unmount
+  // Releases the table resize observer on unmount.
   useEffect(() => {
     return () => {
       unobserveTableRef.current?.();
@@ -934,6 +934,7 @@ export function useTableColumnResize<T extends Record<string, unknown>>(
     };
   }, []);
 
+  // Releases the resize gate on unmount.
   useEffect(() => {
     return () => {
       gateCleanupRef.current?.();

package/src/Table/plugins/filtering/useTableFiltering.tsx

@@ -820,6 +820,7 @@ function StringListFilterControl({
       }}
       size={size}
       hasClear={hasClear}
+      presentation="popover"
     />
   );
 }

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -439,6 +439,8 @@ function PanelDividerModeWatch({
   const {mode} = useTheme();
   const themeName = useThemeName();
   const lastRef = useRef({mode, themeName});
+  // Syncs the panel dividers with the computed theme CSS after a color mode or
+  // theme change.
   useLayoutEffect(() => {
     const last = lastRef.current;
     if (last.mode === mode && last.themeName === themeName) {
@@ -703,6 +705,8 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
       }
     }
   }, []);
+  // Syncs the chevron transitions with the `animatedLayout` handle. Without a
+  // handle, the chevrons use the theme's turn.
   useLayoutEffect(() => {
     if (animatedLayout == null) {
       resetChevrons();

package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx

@@ -432,6 +432,8 @@ function PinnedDividerModeWatch({
   const {mode} = useTheme();
   const themeName = useThemeName();
   const lastRef = useRef({mode, themeName});
+  // Syncs the pinned divider with the computed theme CSS after a color mode or
+  // theme change.
   useLayoutEffect(() => {
     const last = lastRef.current;
     if (last.mode !== mode || last.themeName !== themeName) {

package/src/TextArea/TextArea.tsx

@@ -45,6 +45,7 @@ import {
 } from '../Field';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import {isRenderable} from '../utils/isRenderable';
+import {withholdCallerHandlers} from '../utils/disabledInteraction';
 import {Spinner} from '../Spinner';
 import {useTooltip} from '../Tooltip';
 import {mergeProps} from '../utils';
@@ -476,13 +477,7 @@ export function TextArea({
   const showsDisabledMessage = isDisabled && !!disabledMessage;
   // A disabled field keeps its tab stop but, like a natively disabled one,
   // runs no caller event handler other than focus and blur (`spec:AST-085` FR2).
-  const fieldProps = isDisabled
-    ? Object.fromEntries(
-        Object.entries(rest).filter(
-          ([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key),
-        ),
-      )
-    : rest;
+  const fieldProps = withholdCallerHandlers(rest, isDisabled);
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
     // The container div is not naturally focusable; focusin bubbles up from

package/src/TextInput/TextInput.tsx

@@ -35,21 +35,23 @@ import {
   typographyVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
+import {Field} from '../Field/Field';
+import {InputClearButton} from '../Field/InputClearButton';
 import {
-  Field,
-  InputClearButton,
-  type InputStatus,
   inputWrapperStyles,
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
-} from '../Field';
-import {renderIconSlot, type IconType} from '../Icon';
+} from '../Field/inputStyles.stylex';
+import type {InputStatus} from '../Field/types';
+import {renderIconSlot, type IconType} from '../Icon/Icon';
 import {isRenderable} from '../utils/isRenderable';
-import {Spinner} from '../Spinner';
-import {useTooltip} from '../Tooltip';
-import {VisuallyHidden} from '../VisuallyHidden';
-import {getInputARIA, isImeKeyEvent} from '../utils';
+import {withholdCallerHandlers} from '../utils/disabledInteraction';
+import {Spinner} from '../Spinner/Spinner';
+import {useTooltip} from '../Tooltip/useTooltip';
+import {VisuallyHidden} from '../VisuallyHidden/VisuallyHidden';
+import {getInputARIA} from '../utils/inputAria';
+import {isImeKeyEvent} from '../utils/ime';
 import {
   textEntryTraitAttributes,
   type TextEntryTraitProps,
@@ -109,7 +111,7 @@ export type {
   InputStatus as TextInputStatus,
   InputStatusType as TextInputStatusType,
 } from '../Field';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInputContainer} from '../hooks/useInputContainer';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
@@ -373,13 +375,7 @@ export function TextInput({
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   // A disabled field keeps its tab stop but, like a natively disabled one,
   // runs no caller event handler other than focus and blur (`spec:AST-085` FR2).
-  const fieldProps = isDisabled
-    ? Object.fromEntries(
-        Object.entries(rest).filter(
-          ([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key),
-        ),
-      )
-    : rest;
+  const fieldProps = withholdCallerHandlers(rest, isDisabled);
   const size = useSize(sizeProp, 'md');
 
   const generatedID = useId();

package/src/TimeInput/TimeInput.tsx

@@ -491,6 +491,8 @@ function TimeField({
   // region mounted together with its content is not reliably announced.
   // Ungrouped mode delegates to Field -> FieldStatus, which announces itself.
   const announce = useAnnounce();
+  // Syncs the live region with `status.message` when the field is in an
+  // InputGroup.
   useEffect(() => {
     if (inputGroup && status?.message) {
       announce(

package/src/TimeInput/TouchTimeField.tsx

@@ -378,6 +378,8 @@ export function TouchTimeField({
       return {
         value: hour,
         label: String(hour),
+        // Keys step in time order: 12 PM comes before 1 PM.
+        order: hour24,
         isDisabled: !rangeOverlaps(
           hour24 * 3600,
           hour24 * 3600 + 3599,

package/src/Timer/Timer.tsx

@@ -186,6 +186,7 @@ export function Timer({
   const resolvedFormat = resolveFormat(format);
   const initialPresentation = getPresentation(0, resolvedFormat);
 
+  // Syncs the elapsed-time text with a timer.
   useEffect(() => {
     const resolvedStartTime =
       startTime !== undefined && Number.isFinite(startTime)

package/src/Timestamp/Timestamp.tsx

@@ -378,7 +378,7 @@ export function Timestamp({
     ? formatInstant(date, 'full', locale, {timeZoneNameStyle: 'long'})
     : '';
 
-  // Live updates
+  // Syncs the relative time with an interval timer while the timestamp is live.
   useEffect(() => {
     if (!isLive || !isValidDate || !isRelativeFormat(effectiveFormat)) {
       return;

package/src/Timestamp/formatInstant.ts

@@ -29,7 +29,7 @@
  * - /packages/core/src/Timestamp/Timestamp.test.tsx
  */
 
-import {SHARED_DATE_FORMAT_OPTIONS, getTimeZoneParts} from '../utils/plainDate';
+import {SHARED_DATE_FORMAT_OPTIONS, getWallClock} from '../utils/plainDate';
 import type {Locale} from '../i18n/types';
 import type {TimestampFormat} from './Timestamp';
 
@@ -125,38 +125,6 @@ function pad(n: number): string {
   return String(n).padStart(2, '0');
 }
 
-/** The fields a `system_*` string is assembled from. */
-interface WallClock {
-  year: number;
-  month: number;
-  day: number;
-  hour: number;
-  minute: number;
-  second: number;
-}
-
-/**
- * Wall-clock fields for an instant: in the named zone, or — with no zone —
- * the viewer's own, read straight off the `Date`. The zone-less branch
- * deliberately stays on plain getters so the default rendering never gains a
- * dependency on `Intl` zone data it did not have before.
- *
- * The explicit return type is load-bearing: it is what forces the two branches
- * to keep producing the same shape.
- */
-function getWallClock(date: Date, timeZone: string | undefined): WallClock {
-  return timeZone === undefined
-    ? {
-        year: date.getFullYear(),
-        month: date.getMonth() + 1,
-        day: date.getDate(),
-        hour: date.getHours(),
-        minute: date.getMinutes(),
-        second: date.getSeconds(),
-      }
-    : getTimeZoneParts(date.getTime(), timeZone);
-}
-
 /**
  * Renders one instant in one absolute format.
  *

package/src/Toast/Toast.doc.mjs

@@ -89,7 +89,7 @@ export const docs = {
       name: 'renderContent',
       type: '(toast: ToastContentRenderProps) => ReactNode',
       description:
-        "Replaces the content of this toast's card with your own layout. Astryx keeps the card, its astryx-toast theme target, the live-region role and auto-hide behavior, then hands the renderer the message, endContent, resolved toast settings and a dismiss callback. The custom renderer owns every control in its layout: compose the control you want and call dismiss from it. Astryx does not inject a fallback close into custom content. Per-toast: an app shares one layout by wrapping useToast and passing it on every call, while a toast raised by library code that never passes it renders as an ordinary Astryx toast. The argument is {body, endContent, type, isAutoHide, autoHideDuration, dismiss}, where type is 'info' | 'error'.",
+        "Replaces the content of this toast's card with your own layout. Astryx keeps the card, its astryx-toast theme target and auto-hide behavior (inside a ToastViewport the viewport announces the toast, and while a modal hosts the viewport the card announces itself), then hands the renderer the message, endContent, resolved toast settings and a dismiss callback. The custom renderer owns every control in its layout: compose the control you want and call dismiss from it. Astryx does not inject a fallback close into custom content. Per-toast: an app shares one layout by wrapping useToast and passing it on every call, while a toast raised by library code that never passes it renders as an ordinary Astryx toast. The argument is {body, endContent, type, isAutoHide, autoHideDuration, dismiss}, where type is 'info' | 'error'.",
     },
   ],
   theming: {
@@ -211,7 +211,7 @@ export const docsZh = {
     collisionBehavior: '当已存在相同 uniqueID 的 toast 时的行为。',
     onHide: '当 toast 被移除时触发的回调。',
     renderContent:
-      "用你自己的布局替换该 toast 卡片内部的内容。Astryx 保留卡片本身、astryx-toast 主题目标、实时区域角色和自动关闭行为，并把消息、endContent、解析后的 toast 设置和 dismiss 回调交给渲染函数。自定义渲染函数完全拥有布局中的控件：请组合所需的控件并通过它调用 dismiss。Astryx 不会向自定义内容注入后备关闭按钮。按 toast 单独设置：应用可通过封装 useToast 并在每次调用时传入来共享同一套布局；而由库代码发起、从不传入该参数的 toast 会渲染为普通的 Astryx toast。传入参数为 {body, endContent, type, isAutoHide, autoHideDuration, dismiss}，其中 type 为 'info' | 'error'。",
+      "用你自己的布局替换该 toast 卡片内部的内容。Astryx 保留卡片本身、astryx-toast 主题目标和自动关闭行为（在 ToastViewport 中由视口播报该 toast；当模态框承载视口时由卡片自行播报），并把消息、endContent、解析后的 toast 设置和 dismiss 回调交给渲染函数。自定义渲染函数完全拥有布局中的控件：请组合所需的控件并通过它调用 dismiss。Astryx 不会向自定义内容注入后备关闭按钮。按 toast 单独设置：应用可通过封装 useToast 并在每次调用时传入来共享同一套布局；而由库代码发起、从不传入该参数的 toast 会渲染为普通的 Astryx toast。传入参数为 {body, endContent, type, isAutoHide, autoHideDuration, dismiss}，其中 type 为 'info' | 'error'。",
   },
   usage: {
     description:
@@ -328,6 +328,7 @@ export const docsDense = {
     uniqueID: 'unique id for dedup',
     collisionBehavior: 'behavior when matching uniqueID exists',
     onHide: 'callback when toast removed',
-    renderContent: 'custom inner layout; receives content, resolved settings + dismiss callback; no injected fallback control',
+    renderContent:
+      'custom inner layout; receives content, resolved settings + dismiss callback; no injected fallback control',
   },
 };

package/src/Toast/Toast.tsx

@@ -154,6 +154,16 @@ export interface ToastProps {
 
 interface ToastSurfaceProps extends ToastProps {
   gestureDirection: ToastGestureDirection;
+  /**
+   * Changes when a uniqueID overwrite updates this card in place: the new
+   * toast's auto-hide timer starts over.
+   */
+  timerKey?: string;
+  /**
+   * False when the viewport announces the toast: the card then carries no
+   * live region of its own, so an update in place is announced once.
+   */
+  isLiveRegion?: boolean;
 }
 
 /**
@@ -193,6 +203,8 @@ export function ToastSurface({
   onDismiss,
   renderContent,
   gestureDirection,
+  timerKey,
+  isLiveRegion = true,
 }: ToastSurfaceProps) {
   const t = useComponentTranslator();
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -226,34 +238,28 @@ export function ToastSurface({
     }, remainingRef.current);
   }, [isAutoHide]);
 
-  const pauseTimer = useCallback(
-    (source: PauseSource) => {
-      if (!isAutoHide) {
-        return;
-      }
-      const sources = pauseSourcesRef.current;
-      const wasRunning = sources.size === 0;
-      sources.add(source);
-      if (!wasRunning) {
-        return;
-      }
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-      if (startTimeRef.current != null) {
-        const elapsed = Date.now() - startTimeRef.current;
-        remainingRef.current = Math.max(remainingRef.current - elapsed, 1000);
-      }
-    },
-    [isAutoHide],
-  );
+  // Pointer, focus and gesture holds are tracked whatever isAutoHide is: an
+  // overwrite can turn a toast that does not auto-hide into one that does
+  // while a hold is in place. The window hold leaves with its listeners.
+  const pauseTimer = useCallback((source: PauseSource) => {
+    const sources = pauseSourcesRef.current;
+    const wasRunning = sources.size === 0;
+    sources.add(source);
+    if (!wasRunning) {
+      return;
+    }
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (startTimeRef.current != null) {
+      const elapsed = Date.now() - startTimeRef.current;
+      remainingRef.current = Math.max(remainingRef.current - elapsed, 1000);
+    }
+  }, []);
 
   const resumeTimer = useCallback(
     (source: PauseSource) => {
-      if (!isAutoHide) {
-        return;
-      }
       const sources = pauseSourcesRef.current;
       if (!sources.delete(source)) {
         return;
@@ -271,20 +277,31 @@ export function ToastSurface({
       }
       startTimer();
     },
-    [isAutoHide, startTimer],
+    [startTimer],
   );
 
   useEffect(() => {
     remainingRef.current = autoHideDuration;
+    // An update in place can remove the focused control, which fires no blur:
+    // a focus hold whose focus has left the card is stale.
+    const root = cardRootRef.current?.current;
+    if (
+      pauseSourcesRef.current.has('focus') &&
+      root != null &&
+      !root.contains(root.ownerDocument.activeElement)
+    ) {
+      pauseSourcesRef.current.delete('focus');
+    }
     startTimer();
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
       }
     };
-    // startTimer's identity is stable per isAutoHide, so this runs on mount
-    // and on a genuine duration change — not on unrelated viewport renders.
-  }, [autoHideDuration, startTimer]);
+    // startTimer's identity is stable per isAutoHide, so this runs on mount,
+    // on a genuine duration change and on an overwrite (timerKey), not on
+    // unrelated viewport renders.
+  }, [autoHideDuration, startTimer, timerKey]);
 
   // Pause the auto-hide timer while the window is not focused, so a toast
   // doesn't silently expire while the user is in another window or tab.
@@ -292,6 +309,7 @@ export function ToastSurface({
     if (!isAutoHide) {
       return;
     }
+    const pauseSources = pauseSourcesRef.current;
     const pauseForWindow = () => pauseTimer('window');
     const resumeForWindow = () => resumeTimer('window');
     window.addEventListener('blur', pauseForWindow);
@@ -304,6 +322,8 @@ export function ToastSurface({
     return () => {
       window.removeEventListener('blur', pauseForWindow);
       window.removeEventListener('focus', resumeForWindow);
+      // With the listeners gone, no focus event would clear the window hold.
+      pauseSources.delete('window');
     };
   }, [isAutoHide, pauseTimer, resumeTimer]);
 
@@ -368,9 +388,9 @@ export function ToastSurface({
   return (
     <div
       ref={rootRef}
-      role={isError ? 'alert' : 'status'}
-      aria-live={isError ? 'assertive' : 'polite'}
-      aria-atomic="true"
+      role={isLiveRegion ? (isError ? 'alert' : 'status') : undefined}
+      aria-live={isLiveRegion ? (isError ? 'assertive' : 'polite') : undefined}
+      aria-atomic={isLiveRegion ? 'true' : undefined}
       onMouseEnter={pauseForPointer}
       onMouseLeave={resumeForPointer}
       onFocusCapture={pauseForFocus}