@astryxdesign/core 0.7.3 → 0.7.4-canary.1a552f2

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/ChatMessageList.test.tsx

@@ -182,9 +182,13 @@ describe('ChatMessageList', () => {
         );
       });
       expect(action).toHaveBeenCalledTimes(1);
-      expect(screen.getByRole('status', {name: 'Loading'})).toBeTruthy();
+      // The loader Spinner inside the log is silent (spec:AST-086 FR4, FR8).
+      expect(document.querySelector('.astryx-spinner')).toHaveAttribute(
+        'aria-hidden',
+        'true',
+      );
       await act(async () => complete());
-      expect(screen.queryByRole('status', {name: 'Loading'})).toBeNull();
+      expect(document.querySelector('.astryx-spinner')).toBeNull();
       unmount();
       expect(disconnect).toHaveBeenCalledTimes(1);
     } finally {

package/src/Chat/ChatMessageList.tsx

@@ -37,6 +37,8 @@ import {Spinner} from '../Spinner';
 import type {BaseProps} from '../BaseProps';
 import type {SpacingStep} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 
 export interface ChatMessageListProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element */
@@ -238,6 +240,10 @@ export function ChatMessageList({
   const sentinelRef = useRef<HTMLDivElement>(null);
   const innerRef = useRef<HTMLDivElement>(null);
   const [isLoadingTop, startTransition] = useTransition();
+  const t = useTranslator();
+  // The top loading Spinner sits inside the log and is silent; the list
+  // announces its loading through the channel (spec:AST-086 FR4, FR8).
+  useBusyAnnouncement(isLoadingTop, t('@astryx.spinner.loading'), innerRef);
 
   // Register inner content element with the layout for height observation
   useEffect(() => {
@@ -309,7 +315,7 @@ export function ChatMessageList({
           {/* Loading spinner at top */}
           {isLoadingTop && (
             <div {...stylex.props(styles.loadingTop)}>
-              <Spinner size="md" />
+              <Spinner size="md" aria-hidden="true" />
             </div>
           )}
 

package/src/Chat/__tests__/ChatMessageList.a11y.chromium.spec.ts

@@ -42,7 +42,8 @@ interface Case {
   direction?: 'ltr' | 'rtl';
   coarsePointer?: boolean;
   requiresOverflow?: boolean;
-  statusName?: string;
+  /** The top loader is shown, silent inside the log (spec:AST-086 FR4, FR8). */
+  hiddenLoader?: boolean;
 }
 
 // Expectations are authored from the public fixture and component source, not
@@ -153,7 +154,7 @@ const CASES: Case[] = [
     density: 'balanced',
     busy: false,
     text: 'Earlier message remains readable',
-    statusName: 'Loading',
+    hiddenLoader: true,
   },
 ];
 
@@ -228,8 +229,10 @@ async function capture(page: Page, scenario: Case, mode: 'light' | 'dark') {
     );
     const logs = page.getByRole('log');
     await logs.first().waitFor();
-    if (scenario.statusName) {
-      await page.getByRole('status', {name: scenario.statusName}).waitFor();
+    if (scenario.hiddenLoader) {
+      await page
+        .locator('[role="log"] .astryx-spinner[aria-hidden="true"]')
+        .waitFor();
     }
     await holdMotionStill(page);
     await page.evaluate(async () => document.fonts.ready);
@@ -260,17 +263,21 @@ async function capture(page: Page, scenario: Case, mode: 'light' | 'dark') {
               parentClientHeight: node.parentElement?.clientHeight ?? 0,
             }
           : {}),
-        ...(measures.status
+        ...(measures.loader
           ? {
-              statusName: node
-                .querySelector('[role="status"]')
-                ?.getAttribute('aria-label'),
+              hiddenLoader:
+                node
+                  .querySelector('.astryx-spinner')
+                  ?.closest('[aria-hidden="true"]') != null,
+              exposedStatus: [...node.querySelectorAll('[role="status"]')].some(
+                status => status.closest('[aria-hidden="true"]') == null,
+              ),
             }
           : {}),
       }),
       {
         overflow: Boolean(scenario.requiresOverflow),
-        status: Boolean(scenario.statusName),
+        loader: Boolean(scenario.hiddenLoader),
       },
     );
     const environment = await page.evaluate(() => ({
@@ -323,8 +330,9 @@ async function capture(page: Page, scenario: Case, mode: 'light' | 'dark') {
     if (scenario.text != null) {
       expect(observed.text).toContain(scenario.text);
     }
-    if (scenario.statusName != null) {
-      expect(observed.statusName).toBe(scenario.statusName);
+    if (scenario.hiddenLoader) {
+      expect(observed.hiddenLoader).toBe(true);
+      expect(observed.exposedStatus).toBe(false);
     }
     expect(observed.width).toBeGreaterThan(0);
     expect(observed.height).toBeGreaterThan(0);
@@ -371,7 +379,7 @@ async function capture(page: Page, scenario: Case, mode: 'light' | 'dark') {
         text: scenario.text,
         coarsePointer: scenario.coarsePointer ?? false,
         ...(scenario.requiresOverflow ? {requiresOverflow: true} : {}),
-        ...(scenario.statusName ? {statusName: scenario.statusName} : {}),
+        ...(scenario.hiddenLoader ? {hiddenLoader: true} : {}),
       },
       observed: {
         build: storybookSha,

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/CheckboxInput/CheckboxInput.tsx

@@ -46,7 +46,9 @@ import {useTooltip} from '../Tooltip';
 import {mergeProps, rtlStyles} from '../utils';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
+import {useTranslator} from '../i18n';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {usePressFeedback} from '../hooks/usePressFeedback';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useIndicator} from '../Indicator';
@@ -371,6 +373,10 @@ export function CheckboxInput({
   // `opacity: 0`, and only the indicator's own element can shape the outline
   // to match it. See useIndicatorFocusRing.
   const indicatorRef = useRef<HTMLSpanElement>(null);
+  const t = useTranslator();
+  // The busy Spinner sits in the decorative, aria-hidden indicator, so this
+  // control announces its busy start itself (spec:AST-086 FR8).
+  useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), indicatorRef);
   const {focusProps} = useIndicatorFocusRing(indicatorRef);
 
   const isIndeterminate = optimisticValue === 'indeterminate';

package/src/CommandPalette/CommandPalette.test.tsx

@@ -729,7 +729,7 @@ describe('CommandPalette', () => {
       });
     });
 
-    it('does not announce on initial open (bootstrap)', async () => {
+    it('announces no result count on initial open (bootstrap)', async () => {
       render(
         <CommandPalette
           isOpen={true}
@@ -742,7 +742,9 @@ describe('CommandPalette', () => {
       await act(async () => {
         await new Promise(resolve => setTimeout(resolve, 50));
       });
-      expect(politeRegion()?.textContent ?? '').toBe('');
+      // The bootstrap's busy start may say "Loading" (spec:AST-086 FR3, FR8);
+      // its results are never counted aloud.
+      expect(['', 'Loading']).toContain(politeRegion()?.textContent ?? '');
     });
   });
 });

package/src/CommandPalette/CommandPalette.tsx

@@ -318,11 +318,11 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
   const searchVersionRef = useRef(0);
   const emptyStateRef = useRef<HTMLDivElement>(null);
 
-  // Announce search status to screen readers through the shared polite live
+  // Announce search results to screen readers through the shared polite live
   // region (comboboxes-7 announce path, mirroring Selector / BaseTypeahead).
-  // The busy spinner and the empty states are otherwise purely visual, so a
-  // screen-reader user typing a query would hear nothing when loading starts
-  // or results disappear.
+  // The empty states are otherwise purely visual, so a screen-reader user
+  // typing a query would hear nothing when results disappear. The busy start
+  // is announced by CommandPaletteInput.
   const announce = useAnnounce();
 
   const value = controlledValue ?? internalValue;
@@ -407,13 +407,8 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
       startTransition(async () => {
         const isBootstrap = query === '';
 
-        // Loading started for a user query: tell screen-reader users the
-        // spinner appeared. The polite region coalesces rapid updates, so for
-        // fast sources the result-count announcement below simply replaces
-        // this instead of stacking one "Loading" per keystroke.
-        if (!isBootstrap) {
-          announce(t('@astryx.commandPalette.loading'));
-        }
+        // The busy start ("Loading") is announced by CommandPaletteInput,
+        // from a region inside the palette's dialog (spec:AST-086 FR8, FR3).
 
         // Client-filter previous results for instant narrowing while fetch is in flight
         if (!isBootstrap && searchResults.length > 0) {

package/src/CommandPalette/CommandPaletteInput.test.tsx

@@ -377,7 +377,9 @@ describe('CommandPaletteInput popup context', () => {
       </CommandPaletteContext>,
     );
 
-    const spinner = screen.getByRole('status');
+    // The Spinner is decorative (spec:AST-086 FR8), so find it by its class.
+    const spinner = document.querySelector('.astryx-spinner') as HTMLElement;
+    expect(spinner).toHaveAttribute('aria-hidden', 'true');
     const trailingContent = screen.getByTestId('trailing-content');
     expect(trailingContent.parentElement?.firstElementChild).toContainElement(
       spinner,

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -36,6 +36,7 @@ import {
 import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 const styles = stylex.create({
   wrapper: {
     display: 'flex',
@@ -190,6 +191,14 @@ export function CommandPaletteInput({
   const hasListbox = ctx ? ctx.selectableItems.length > 0 : true;
   const dialogContext = useDialogContext();
   const inputRef = useRef<HTMLInputElement>(null);
+  // The search Spinner is decorative; the input announces each busy start,
+  // including the load on opening or clearing the query. Inside the palette's
+  // native modal it does so from a region in the dialog (spec:AST-086 FR8, FR3).
+  useBusyAnnouncement(
+    ctx?.isBusy === true,
+    t('@astryx.commandPalette.loading'),
+    inputRef,
+  );
   const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
 
   // Text-entry controls match :focus-visible after pointer focus in Chromium.
@@ -335,7 +344,7 @@ export function CommandPaletteInput({
         <span {...stylex.props(styles.end)}>
           {ctx?.isBusy && (
             <span {...stylex.props(styles.icon, styles.spinner)}>
-              <Spinner size="sm" />
+              <Spinner size="sm" aria-hidden="true" />
             </span>
           )}
           {hasEndContent && endContent}

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