@astryxdesign/core 0.7.3 → 0.7.4-canary.b25f95e

package/src/BottomSheet/BottomSheetSwitcherContext.ts

@@ -5,11 +5,22 @@
 /**
  * @file BottomSheetSwitcherContext.ts
  * @input Uses React context
- * @output Internal phase and lifecycle context shared by BottomSheetSwitcher and BottomSheet
+ * @output Internal phase, lifecycle, and host-dialog context shared by BottomSheetSwitcher and BottomSheet
  * @position Private coordination layer for mutually exclusive BottomSheets
+ *
+ * Every child sheet renders its own native `<dialog>`; the switcher's only
+ * element is a flow wrapper. This context carries the phase machine, the
+ * host-dialog selection, and the switcher's dialog-level props and handlers
+ * down to those sheet hosts.
  */
 
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  SyntheticEvent,
+} from 'react';
 import {createContext} from 'react';
+import type {BaseProps} from '../BaseProps';
 import type {DialogPurpose} from '../Dialog';
 
 export type BottomSheetSwitcherPhase =
@@ -26,23 +37,67 @@ export interface BottomSheetSwitcherTransitionEvent {
   phase: 'entering' | 'aligning' | 'fading' | 'exiting';
 }
 
+/**
+ * The switcher's own dialog surface, applied by every sheet host. `ref` is not
+ * part of it: the switcher resolves its ref to the host sheet's dialog, and
+ * the single-instance attributes (`id`, `data-testid`) render there only.
+ */
+export type BottomSheetSwitcherDialogProps = Omit<
+  BaseProps<HTMLDialogElement>,
+  'onClick' | 'onKeyDown'
+>;
+
 export interface BottomSheetSwitcherContextValue {
   activeSheet: string | null;
   hasScrim: boolean;
   onActiveSheetChange: (sheetId: string | null) => void;
   getSheetPhase: (sheetId: string) => BottomSheetSwitcherPhase;
   getSheetAlignmentOffset: (sheetId: string) => number;
+  /**
+   * The sheet whose dialog hosts the flow: the active sheet, the exiting
+   * sheet through its exit, and the last host (or the first mounted sheet)
+   * while the flow is closed. The switcher's ref and its single-instance
+   * attributes resolve to this sheet's dialog.
+   */
+  hostSheet: string | null;
+  /**
+   * Whether this sheet's dialog paints the flow's one scrim right now. During
+   * a handoff the retained sheet keeps it, so the entering dialog's backdrop
+   * stays transparent above the still-visible previous panel.
+   */
+  isScrimOwner: (sheetId: string) => boolean;
+  /** The flow is closing: the owning backdrop fades out on the exit curve. */
+  isFlowClosing: boolean;
   registerSheetElement: (sheetId: string, element: HTMLElement | null) => void;
-  registerSheetLabel: (sheetId: string, label: string | null) => void;
+  registerSheetDialog: (
+    sheetId: string,
+    dialog: HTMLDialogElement | null,
+  ) => void;
   registerSheetPurpose: (
     sheetId: string,
     purpose: DialogPurpose | null,
   ) => void;
+  /**
+   * Called by a sheet host just before it presents its dialog modally, so the
+   * switcher can remember the page element that opened the flow.
+   */
+  onBeforeSheetPresent: (sheetId: string) => void;
+  /**
+   * Whether a modal sheet dialog that is already open sits beneath another
+   * open sheet dialog in the top layer, so it must re-present to become the
+   * topmost layer again.
+   */
+  isCoveredInTopLayer: (sheetId: string) => boolean;
   onSheetEnterStart: (sheetId: string) => void;
   onSheetTransitionComplete: (
     event: BottomSheetSwitcherTransitionEvent,
   ) => void;
   onSheetScrimOpacityChange: (sheetId: string, opacity: number) => void;
+  /** Consumer dialog props the switcher forwards to every sheet dialog. */
+  dialogProps: BottomSheetSwitcherDialogProps;
+  onDialogCancel: (event: SyntheticEvent<HTMLDialogElement>) => void;
+  onDialogClick: (event: ReactMouseEvent<HTMLDialogElement>) => void;
+  onDialogKeyDown: (event: ReactKeyboardEvent<HTMLDialogElement>) => void;
 }
 
 export const BottomSheetSwitcherContext =

package/src/Carousel/Carousel.test.tsx

@@ -519,7 +519,7 @@ describe('Carousel', () => {
       fireEvent.scroll(el);
     }
 
-    it('hands focus to the opposite button when the edge disables the one in use', async () => {
+    it('hands focus to the scroll area when the edge disables the one in use', async () => {
       const user = userEvent.setup();
       render(
         <Carousel aria-label="Gallery">
@@ -536,7 +536,7 @@ describe('Carousel', () => {
       await user.click(next);
 
       expect(next).toBeDisabled();
-      expect(document.activeElement).toBe(screen.getByLabelText('Scroll left'));
+      expect(document.activeElement).toBe(getScroller());
       expect(document.activeElement).not.toBe(document.body);
     });
 
@@ -559,9 +559,7 @@ describe('Carousel', () => {
       await user.click(previous);
 
       expect(previous).toBeDisabled();
-      expect(document.activeElement).toBe(
-        screen.getByLabelText('Scroll right'),
-      );
+      expect(document.activeElement).toBe(getScroller());
     });
 
     it('hands off under RTL, where the scroll axis is inverted', async () => {
@@ -605,7 +603,7 @@ describe('Carousel', () => {
       await user.click(next);
 
       expect(next).toBeDisabled();
-      expect(document.activeElement).toBe(screen.getByLabelText('Scroll left'));
+      expect(document.activeElement).toBe(getScroller());
     });
 
     it('hands off when scroll-snap carries the container past what the press asked for', async () => {
@@ -626,7 +624,7 @@ describe('Carousel', () => {
       await user.click(next);
 
       expect(next).toBeDisabled();
-      expect(document.activeElement).toBe(screen.getByLabelText('Scroll left'));
+      expect(document.activeElement).toBe(getScroller());
     });
 
     it('falls back to the scroll container when the carousel stops overflowing', async () => {
@@ -701,7 +699,7 @@ describe('Carousel', () => {
       // rather than loosening the guard -- is caught.
       await user.click(screen.getByLabelText('Scroll right'));
 
-      expect(document.activeElement).toBe(screen.getByLabelText('Scroll left'));
+      expect(document.activeElement).toBe(getScroller());
     });
 
     it('does not move focus on a press that leaves the direction available', async () => {
@@ -748,8 +746,7 @@ describe('Carousel', () => {
         </Carousel>,
       );
       makeScrollable(getScroller(), 400);
-      const previous = screen.getByLabelText('Scroll left');
-      const focus = vi.spyOn(previous, 'focus');
+      const focus = vi.spyOn(getScroller(), 'focus');
 
       await user.click(screen.getByLabelText('Scroll right'));
 
@@ -789,8 +786,7 @@ describe('Carousel', () => {
       makeScrollable(getScroller(), 400);
       await user.click(screen.getByLabelText('Scroll right'));
 
-      const previous = screen.getByLabelText('Scroll left');
-      expect(document.activeElement).toBe(previous);
+      expect(document.activeElement).toBe(getScroller());
       // Park focus outside and re-render: the transition is spent, so nothing
       // may pull focus back in.
       const outside = document.createElement('button');

package/src/Carousel/Carousel.tsx

@@ -504,9 +504,7 @@ export function Carousel({
   // the scroll, the position before it plus the step, and the settled position
   // reported by `scrollend` -- were each wrong somewhere, under reduced motion,
   // under mandatory scroll-snap, and on a browser that never fires the event.
-  // Running after the commit also makes the opposite button a valid receiver,
-  // which it is not during the press: at that moment it is still disabled and
-  // focus() on a disabled control does nothing. Ruled acceptable by the
+  // Ruled acceptable by the
   // maintainer, 2026-08-27, on the conditions encoded below: it acts only on
   // the transition that newly disables the focused button, it moves focus and
   // nothing else, and it cannot fire twice for one transition.
@@ -543,21 +541,16 @@ export function Carousel({
       return;
     }
 
-    const opposite =
-      side === 'start' ? endButtonRef.current : startButtonRef.current;
-    // The opposite button is the receiver. It is disabled only when the
-    // carousel stopped overflowing entirely, which happens when its content
-    // shrinks; the scroll container is then the nearest tab stop still inside
-    // the labelled region.
-    const receiver =
-      opposite != null && !opposite.disabled ? opposite : scrollElRef.current;
+    // The scroll area is the receiver (component:Carousel FR2). It takes focus
+    // programmatically even when it is out of the tab order.
+    const receiver = scrollElRef.current;
     if (receiver == null) {
       return;
     }
 
     // One move per transition: clearing the tracker first means a re-render or
     // a StrictMode double-invoke re-runs this and returns at the `side == null`
-    // guard above. Focusing the receiver sets it again, to the other side.
+    // guard above.
     focusedNavRef.current = null;
     // preventScroll: a plain focus() scrolls its element into view, which on
     // the scroll container cancels the scroll the press just started.
@@ -661,7 +654,7 @@ export function Carousel({
                 // button mounted (stable layout) but removes it from the tab
                 // order and a11y tree while it's visually hidden, so keyboard
                 // users don't land on an invisible control. The Effect above
-                // hands focus to the other button when the state behind this
+                // hands focus to the scroll area when the state behind this
                 // one flips it disabled.
                 isDisabled={!canScrollStart}
                 onFocus={() => {

package/src/Chat/ChatComposerInput.test.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it, expect, vi, afterEach} from 'vitest';
+import {StrictMode} from 'react';
+import {describe, it, expect, vi, afterEach, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {ChatComposer} from './ChatComposer';
@@ -13,6 +14,9 @@ import type {
 import {createStaticSource} from '../Typeahead/createStaticSource';
 import type {SearchableItem, SearchSource} from '../Typeahead/types';
 
+const announce = vi.hoisted(() => vi.fn());
+vi.mock('../hooks/useAnnounce', () => ({useAnnounce: () => announce}));
+
 // =============================================================================
 // Helpers
 // =============================================================================
@@ -1824,3 +1828,165 @@ describe('ChatComposerInput', () => {
     });
   });
 });
+
+describe('ChatComposerInput trigger loading announcement (spec:AST-086)', () => {
+  function typeAtEnd(editable: HTMLElement, text: string) {
+    editable.textContent = text;
+    const node = editable.firstChild!;
+    const range = document.createRange();
+    range.setStart(node, text.length);
+    range.collapse(true);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    fireEvent.input(editable);
+  }
+
+  /**
+   * Lets a settled search apply, as the browser would before the next frame,
+   * then lets the loading announcement's two frames run.
+   */
+  async function nextFrame() {
+    await act(async () => {});
+    await act(async () => {
+      for (let frame = 0; frame < 2; frame++) {
+        await new Promise(resolve => requestAnimationFrame(resolve));
+      }
+    });
+  }
+
+  /** An async source whose searches resolve only when the test says so. */
+  function createPendingSource() {
+    const resolvers: ((items: SearchableItem[]) => void)[] = [];
+    const source: SearchSource = {
+      bootstrap: async () => [],
+      search: async () =>
+        new Promise<SearchableItem[]>(resolve => {
+          resolvers.push(resolve);
+        }),
+    };
+    return {source, resolvers};
+  }
+
+  beforeEach(() => {
+    announce.mockClear();
+  });
+
+  it('shows the loading row without a live role (FR2)', () => {
+    const {source} = createPendingSource();
+    render(
+      <ChatComposerInput
+        triggers={[createMentionTrigger({searchSource: source})]}
+        debounceMs={0}
+      />,
+    );
+    const editable = screen.getByRole('combobox');
+    editable.focus();
+    typeAtEnd(editable, '@c');
+
+    const row = screen.getByText('Searching…');
+    expect(row).not.toHaveAttribute('role');
+    expect(screen.queryByRole('status')).toBeNull();
+  });
+
+  it('announces the loading text once per search, not on every keystroke (FR2, FR6)', async () => {
+    const {source, resolvers} = createPendingSource();
+    render(
+      <StrictMode>
+        <ChatComposerInput
+          triggers={[createMentionTrigger({searchSource: source})]}
+          debounceMs={0}
+        />
+      </StrictMode>,
+    );
+    const editable = screen.getByRole('combobox');
+    editable.focus();
+
+    typeAtEnd(editable, '@c');
+    await nextFrame();
+    typeAtEnd(editable, '@ci');
+    await nextFrame();
+    expect(announce.mock.calls).toEqual([['Searching…', 'polite']]);
+
+    await act(async () => {
+      resolvers.forEach(resolve =>
+        resolve([{id: 'cindy', label: 'Cindy Zhang'}]),
+      );
+    });
+    expect(screen.queryByText('Searching…')).toBeNull();
+
+    typeAtEnd(editable, '@cin');
+    await nextFrame();
+    expect(announce.mock.calls).toEqual([
+      ['Searching…', 'polite'],
+      ['Searching…', 'polite'],
+    ]);
+  });
+
+  it('announces nothing for a synchronous source, whose results are already listed (FR7)', async () => {
+    render(
+      <ChatComposerInput triggers={[createMentionTrigger()]} debounceMs={0} />,
+    );
+    const editable = screen.getByRole('combobox');
+    editable.focus();
+
+    typeAtEnd(editable, '@c');
+    await act(async () => {});
+    typeAtEnd(editable, '@ci');
+    await act(async () => {});
+
+    // jsdom gives the popover no semantics, so query the menu by its id.
+    const menu = document.getElementById(
+      editable.getAttribute('aria-controls')!,
+    );
+    expect(menu?.querySelector('[role="option"]')).toHaveTextContent(
+      'Cindy Zhang',
+    );
+    expect(screen.queryByText('Searching…')).toBeNull();
+    expect(announce).not.toHaveBeenCalled();
+  });
+
+  it('announces nothing for a search that settles before the row shows (FR7)', async () => {
+    const settled: SearchSource = {
+      bootstrap: async () => [],
+      search: async () => [{id: 'cindy', label: 'Cindy Zhang'}],
+    };
+    render(
+      <ChatComposerInput
+        triggers={[createMentionTrigger({searchSource: settled})]}
+        debounceMs={0}
+      />,
+    );
+    const editable = screen.getByRole('combobox');
+    editable.focus();
+
+    typeAtEnd(editable, '@c');
+    await nextFrame();
+    typeAtEnd(editable, '@ci');
+    await nextFrame();
+
+    expect(screen.queryByText('Searching…')).toBeNull();
+    expect(announce).not.toHaveBeenCalled();
+  });
+
+  it("announces a trigger's own loadingText", async () => {
+    const {source} = createPendingSource();
+    render(
+      <ChatComposerInput
+        triggers={[
+          createMentionTrigger({
+            searchSource: source,
+            loadingText: 'Looking up people…',
+          }),
+        ]}
+        debounceMs={0}
+      />,
+    );
+    const editable = screen.getByRole('combobox');
+    editable.focus();
+    typeAtEnd(editable, '@c');
+    await nextFrame();
+
+    expect(announce.mock.calls).toEqual([['Looking up people…', 'polite']]);
+  });
+});

package/src/Chat/useTriggerMenu.tsx

@@ -32,6 +32,7 @@ import {
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {usePopover} from '../Popover/usePopover';
+import {useAnnounce} from '../hooks/useAnnounce';
 import {useHighlightedOptionScroll} from '../hooks/useHighlightedOptionScroll';
 import {
   colorVars,
@@ -353,6 +354,38 @@ export function useTriggerMenu(
     isHidden: false,
   });
 
+  // The loading row carries no live role: it mounts already holding its text
+  // and is removed when results arrive, so it would be skipped. The shared
+  // channel announces each loading episode once instead (spec:AST-086 FR2,
+  // FR6), once the row has been painted: the second animation frame runs
+  // after the first paint, and a search that settles before then never shows
+  // the row, so it announces nothing (FR7). The flag clears when the loading
+  // row goes away, so the next search is a new occasion.
+  const announce = useAnnounce();
+  const hasAnnouncedLoadingRef = useRef(false);
+  // Mirrors renderMenu: no row exists without an active trigger or while hidden.
+  const isLoadingRowShown =
+    state.isLoading && !state.isHidden && state.activeTrigger !== null;
+  // One catalog string serves the row and the announcement (FR7).
+  const loadingText =
+    state.activeTrigger?.loadingText ?? t('@astryx.chatTriggerMenu.searching');
+  useEffect(() => {
+    if (!isLoadingRowShown) {
+      hasAnnouncedLoadingRef.current = false;
+      return;
+    }
+    if (hasAnnouncedLoadingRef.current) {
+      return;
+    }
+    let frame = requestAnimationFrame(() => {
+      frame = requestAnimationFrame(() => {
+        hasAnnouncedLoadingRef.current = true;
+        announce(loadingText, 'polite');
+      });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [announce, isLoadingRowShown, loadingText]);
+
   const triggerStartRef = useRef<number>(-1);
   const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const searchRequestIdRef = useRef<number>(0);
@@ -382,6 +415,12 @@ export function useTriggerMenu(
       if (isMenuSuppressedRef.current) {
         return;
       }
+      // A search still waiting out its debounce must not start for a menu
+      // that is gone.
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+        searchTimeoutRef.current = null;
+      }
       searchRequestIdRef.current++;
       removeAnchorSpan();
       setState(prev => ({
@@ -555,8 +594,12 @@ export function useTriggerMenu(
         if (trigger.searchSource) {
           // Use SearchSource — cancel previous, then search
           trigger.searchSource.cancel?.();
-          setState(prev => ({...prev, isLoading: true}));
           const result = trigger.searchSource.search(query);
+          // A synchronous source already has its results, so it never shows
+          // or announces the loading row (spec:AST-086 FR7).
+          if (!Array.isArray(result)) {
+            setState(prev => ({...prev, isLoading: true}));
+          }
           Promise.resolve(result).then(
             items => {
               if (!isCurrent()) {
@@ -873,14 +916,11 @@ export function useTriggerMenu(
     }
 
     const emptyText = activeTrigger.emptySearchText ?? 'No results';
-    const loadingText = activeTrigger.loadingText ?? 'Searching\u2026';
 
     let listContent: ReactNode;
     if (state.isLoading) {
       listContent = (
-        <div role="status" {...stylex.props(styles.loadingState)}>
-          {loadingText}
-        </div>
+        <div {...stylex.props(styles.loadingState)}>{loadingText}</div>
       );
     } else if (state.items.length === 0 && state.isActive) {
       listContent = <div {...stylex.props(styles.emptyState)}>{emptyText}</div>;
@@ -951,7 +991,16 @@ export function useTriggerMenu(
         xstyle: styles.popoverSurface,
       },
     );
-  }, [popover, listboxId, state, selectItem, getItemId, highlightOnHover, t]);
+  }, [
+    popover,
+    listboxId,
+    state,
+    selectItem,
+    getItemId,
+    highlightOnHover,
+    t,
+    loadingText,
+  ]);
 
   return {
     state,

package/src/ComplexSelector/ComplexSelector.tsx

@@ -35,6 +35,7 @@ import {
 import {useDevWarning} from '../hooks/useDevWarning';
 import {mergeRefs} from '../utils/mergeRefs';
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {Field, inputWrapperStyles, type FieldStatusVariant} from '../Field';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import {Spinner} from '../Spinner';
@@ -547,6 +548,9 @@ export function ComplexSelector<Value>({
   const [isPending, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || isPending;
+  // The busy Spinner is decorative; this control announces its busy start
+  // (spec:AST-086 FR8).
+  useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), triggerRef);
 
   const handlePopoverShow = useCallback(() => {
     onOpenChange?.(true);
@@ -790,7 +794,7 @@ export function ComplexSelector<Value>({
           {...stylex.props(styles.trigger)}>
           <span {...stylex.props(styles.triggerText)}>{triggerContent}</span>
         </button>
-        {isBusy && <Spinner size="sm" />}
+        {isBusy && <Spinner size="sm" aria-hidden="true" />}
         <Icon
           icon="chevronDown"
           size="sm"

package/src/ContextMenu/ContextMenu.test.tsx

@@ -346,6 +346,40 @@ describe('ContextMenu', () => {
     expect(HTMLElement.prototype.hidePopover).toHaveBeenCalled();
   });
 
+  it.each(['open', 'closed', 'nested'] as const)(
+    'judges presses once inside a %s shadow root',
+    mode => {
+      const host = document.createElement('div');
+      document.body.append(host);
+      let root = host.attachShadow({mode: mode === 'open' ? 'open' : 'closed'});
+      if (mode === 'nested') {
+        const innerHost = document.createElement('div');
+        root.append(innerHost);
+        root = innerHost.attachShadow({mode: 'closed'});
+      }
+      const container = document.createElement('div');
+      root.append(container);
+      try {
+        render(
+          <ContextMenu items={[{label: 'Item 1'}]}>
+            <div>Right-click me</div>
+          </ContextMenu>,
+          {container},
+        );
+        fireEvent.contextMenu(container.querySelector('div div')!);
+        // At the document a press on the menu is retargeted to a shadow host.
+        const item = container.querySelector('[role="menuitem"]')!;
+        fireEvent.mouseDown(item, {composed: true});
+        expect(HTMLElement.prototype.hidePopover).not.toHaveBeenCalled();
+        // A press on the host itself is outside the menu.
+        fireEvent.mouseDown(host);
+        expect(HTMLElement.prototype.hidePopover).toHaveBeenCalled();
+      } finally {
+        host.remove();
+      }
+    },
+  );
+
   it('closes the menu when Tab is pressed inside it (APG menu pattern)', () => {
     render(
       <ContextMenu items={[{label: 'Item 1'}]}>

package/src/ContextMenu/ContextMenu.tsx

@@ -466,15 +466,27 @@ export function ContextMenu({
     if (!isOpen || usesBottomSheet) {
       return;
     }
-    const handleClickOutside = (e: MouseEvent) => {
+    // Inside a shadow root, even a closed or nested one, the document sees a
+    // press on the menu as a press on an outer shadow host, so the menu's own
+    // tree judges its presses first and the document skips those.
+    const tree = listRef.current?.getRootNode();
+    const shadow = tree instanceof ShadowRoot ? tree : null;
+    const judged = new WeakSet<Event>();
+    const handleClickOutside = (e: Event) => {
       const menu = listRef.current;
+      if (judged.has(e)) {
+        return;
+      }
+      judged.add(e);
       if (menu && !menu.contains(e.target as Node)) {
         closeMenu();
       }
     };
     document.addEventListener('mousedown', handleClickOutside);
+    shadow?.addEventListener('mousedown', handleClickOutside);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
+      shadow?.removeEventListener('mousedown', handleClickOutside);
     };
   }, [isOpen, closeMenu, listRef, usesBottomSheet]);
 

package/src/DateInput/DateInput.tsx

@@ -57,6 +57,7 @@ import {
 } from '../Calendar';
 import {useCalendarConstraints} from '../Calendar/hooks';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {usePopover} from '../Popover';
@@ -547,6 +548,9 @@ function PointerDateField({
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
+  // The busy Spinner is decorative; this control announces its busy start
+  // (spec:AST-086 FR8).
+  useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), inputRef);
   const isEffectivelyDisabled = isDisabled || isBusy;
 
   // A disabled or busy field never renders native `disabled` (spec:AST-085
@@ -932,7 +936,7 @@ function PointerDateField({
           onClick={handleClear}
         />
       )}
-      {isBusy && <Spinner size="sm" />}
+      {isBusy && <Spinner size="sm" aria-hidden="true" />}
       {statusIcon}
       {popover.render(
         <Calendar

package/src/DateInput/DateInputTouch.test.tsx

@@ -666,6 +666,51 @@ describe('DateInput — field parity', () => {
     resolve();
   });
 
+  it('announces a busy start from a pick inside the open sheet, not behind it (spec:AST-086 FR8, Platform support)', async () => {
+    // The stubbed showModal() opens the dialog but jsdom cannot match
+    // `:modal`; stand in for the sheet the browser presents modally.
+    const matches = Element.prototype.matches;
+    const modalSpy = vi
+      .spyOn(Element.prototype, 'matches')
+      .mockImplementation(function (this: Element, selector: string) {
+        return selector === ':modal'
+          ? this instanceof HTMLDialogElement && this.open
+          : matches.call(this, selector);
+      });
+    const changeAction = vi.fn(async () => new Promise<void>(() => {}));
+    withLayout(() => {
+      render(
+        <DateInput
+          nativePicker="never"
+          label="Ship date"
+          value="2026-03-10"
+          min="2026-03-01"
+          max="2026-03-31"
+          onChange={() => {}}
+          changeAction={changeAction}
+        />,
+      );
+      fireEvent.click(field());
+      fireEvent.click(
+        within(pane('March 2026')).getByRole('button', {
+          name: /March 25, 2026/,
+        }),
+      );
+    });
+    const sheet = document.querySelector('dialog[open]');
+    expect(sheet).not.toBeNull();
+    await waitFor(() => {
+      expect(
+        sheet!.querySelector('[data-astryx-modal-busy-region]'),
+      ).toHaveTextContent('Loading');
+    });
+    expect(
+      document.querySelector('[data-astryx-live-region="polite"]')
+        ?.textContent ?? '',
+    ).toBe('');
+    modalSpy.mockRestore();
+  });
+
   it('drops the Field wrapper inside an InputGroup', () => {
     render(
       <InputGroup label="Range">