@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/hooks/useBusyAnnouncement.ts

@@ -13,72 +13,50 @@
  * The busy Spinner inside a control is decorative (hidden, no live role); the
  * control announces its busy state instead (`spec:AST-086` FR8), once per busy
  * start (FR6): rerenders and StrictMode replay do not repeat it, and settling
- * re-arms it. While a native modal is open, the body-level channel is not
- * exposed, so a control inside it announces through one persistent polite
- * region in that dialog, inserted empty and filled a frame later (Platform
- * support, FR3).
+ * re-arms it. The returned function is called by an owner announcing the
+ * busy operation's outcome: a busy start not yet announced is dropped, so it
+ * never follows its own outcome (FR8). While a native modal is open, the body-level channel is not
+ * exposed, so a control inside it announces through that dialog's polite
+ * container, the one `useAnnounce` uses for every message from inside the
+ * modal (FR14), inserted empty and filled a frame later (FR3); the control's
+ * own element locates the modal, so a busy start inside a native modal an app
+ * renders without Astryx is heard inside it too.
  *
  * SYNC: deliberately NOT exported from /packages/core/src/hooks/index.ts —
  * this is a shared implementation detail of Astryx's busy controls.
  */
 
-import {useEffect, useRef, type RefObject} from 'react';
-import {useAnnounce} from './useAnnounce';
-
-const REGION_ATTR = 'data-astryx-modal-busy-region';
-const VISUALLY_HIDDEN_CSS =
-  'position:absolute;width:1px;height:1px;margin:-1px;padding:0;' +
-  'overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;';
-const CLEAR_DELAY_MS = 2000; // Matches useAnnounce.
-
-// The pending write and clear of each in-dialog region; a new write cancels
-// them so an earlier message can neither land late nor clear a later one.
-const pendingByRegion = new WeakMap<
-  HTMLElement,
-  {frame: number; timer?: ReturnType<typeof setTimeout>}
->();
-
-function announceInModal(dialog: HTMLDialogElement, message: string): void {
-  let region = dialog.querySelector<HTMLElement>(`:scope > [${REGION_ATTR}]`);
-  if (region == null) {
-    region = document.createElement('div');
-    region.setAttribute(REGION_ATTR, '');
-    region.setAttribute('role', 'status');
-    region.setAttribute('aria-live', 'polite');
-    region.setAttribute('aria-atomic', 'true');
-    region.style.cssText = VISUALLY_HIDDEN_CSS;
-    dialog.appendChild(region);
-  }
-  const target = region;
-  const previous = pendingByRegion.get(target);
-  if (previous != null) {
-    cancelAnimationFrame(previous.frame);
-    clearTimeout(previous.timer);
-  }
-  target.textContent = '';
-  const pending: {frame: number; timer?: ReturnType<typeof setTimeout>} = {
-    frame: 0,
-  };
-  pending.frame = requestAnimationFrame(() => {
-    target.textContent = message;
-    pending.timer = setTimeout(() => {
-      target.textContent = '';
-      pendingByRegion.delete(target);
-    }, CLEAR_DELAY_MS);
-  });
-  pendingByRegion.set(target, pending);
-}
+import {useCallback, useEffect, useRef, type RefObject} from 'react';
+import {
+  announceInModal,
+  enclosingModalDialog,
+  takeJoinedAnnouncement,
+  useAnnounce,
+  withdrawFromModalPending,
+  withdrawPendingAnnouncement,
+} from './useAnnounce';
 
 export function useBusyAnnouncement(
   isBusy: boolean,
   message: string,
   elementRef: RefObject<Element | null>,
-): void {
+): () => void {
   const announce = useAnnounce();
   const hasAnnouncedRef = useRef(false);
+  const frameRef = useRef<number | null>(null);
+  // This busy start's share of the shared channel's pending text, until it
+  // settles.
+  const channelMessageRef = useRef<object | null>(null);
+  // Or its write inside a modal's container, until it settles.
+  const modalMessageRef = useRef<{
+    dialog: HTMLDialogElement;
+    message: string;
+  } | null>(null);
   useEffect(() => {
     if (!isBusy) {
       hasAnnouncedRef.current = false;
+      channelMessageRef.current = null;
+      modalMessageRef.current = null;
       return;
     }
     if (hasAnnouncedRef.current) {
@@ -87,14 +65,46 @@ export function useBusyAnnouncement(
     // Choose the route a frame later: a Dialog opening in the same commit
     // calls showModal() in its own Effect, which runs after this one.
     const frame = requestAnimationFrame(() => {
+      frameRef.current = null;
       hasAnnouncedRef.current = true;
-      const dialog = elementRef.current?.closest('dialog');
-      if (dialog?.open && dialog.matches(':modal')) {
+      // The nearest open native modal around the control's own element,
+      // Astryx or app-rendered, so a busy start inside a modal an app renders
+      // without Astryx is still heard inside it (`spec:AST-086` FR14); the
+      // shared `useAnnounce` route otherwise, which itself follows the
+      // nearest Astryx modal around this hook's caller.
+      const dialog = enclosingModalDialog(elementRef.current);
+      if (dialog != null) {
         announceInModal(dialog, message);
+        modalMessageRef.current = {dialog, message};
       } else {
         announce(message, 'polite');
+        channelMessageRef.current = takeJoinedAnnouncement();
       }
     });
-    return () => cancelAnimationFrame(frame);
+    frameRef.current = frame;
+    return () => {
+      cancelAnimationFrame(frame);
+      frameRef.current = null;
+    };
   }, [announce, elementRef, isBusy, message]);
+
+  return useCallback(() => {
+    if (frameRef.current != null) {
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+      // Still busy until the settled state commits; do not schedule again.
+      hasAnnouncedRef.current = true;
+    }
+    // Written to the channel, or inside the modal, but not yet exposed:
+    // withdraw it too.
+    if (channelMessageRef.current != null) {
+      withdrawPendingAnnouncement(channelMessageRef.current, 'polite');
+      channelMessageRef.current = null;
+    }
+    if (modalMessageRef.current != null) {
+      const {dialog, message} = modalMessageRef.current;
+      withdrawFromModalPending(dialog, message, 'polite');
+      modalMessageRef.current = null;
+    }
+  }, []);
 }

package/src/hooks/useFocusTrap.doc.mjs

@@ -39,7 +39,7 @@ export const docs = {
   ],
   usage: {
     description:
-      'Traps focus within a container element following the WAI-ARIA dialog focus trap pattern. Listens to focus events on the document and redirects focus back into the container if it escapes via keyboard navigation. Handles both Tab and Shift+Tab wrapping. When the trap deactivates or unmounts, focus is restored to the element that was focused before activation, unless focus was already moved elsewhere or never entered the trap (so popups that keep focus on their trigger, like comboboxes, are unaffected). Mouse clicks outside the container are not intercepted; use a light-dismiss handler for that.',
+      'Traps focus within a container element following the WAI-ARIA dialog focus trap pattern. Listens to focus events on the document and redirects focus back into the container if a Tab from inside it moves focus out. Handles both Tab and Shift+Tab wrapping. A Tab pressed while focus is outside the container is left to the page, so an open non-modal surface never takes over the focus order of the page. When the trap deactivates or unmounts, focus is restored to the element that was focused before activation, unless focus was already moved elsewhere or never entered the trap (so popups that keep focus on their trigger, like comboboxes, are unaffected). Mouse clicks outside the container are not intercepted; use a light-dismiss handler for that.',
     bestPractices: [
       { guidance: true, description: 'Call focusFirst() when opening a dialog/modal to move focus into the trapped region.' },
       { guidance: true, description: 'Provide an onEscape callback to close the dialog when Escape is pressed.' },
@@ -56,7 +56,7 @@ export const docs = {
 /** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
-    'Traps focus within container element following WAI-ARIA dialog focus trap pattern. Listens to document focus events + redirects focus back into container if it escapes via keyboard navigation. Handles both Tab + Shift+Tab wrapping. Mouse clicks outside container not intercepted; use light-dismiss handler for that.',
+    'Traps focus within container element following WAI-ARIA dialog focus trap pattern. Listens to document focus events + redirects focus back into container if a Tab from inside moves focus out. Handles both Tab + Shift+Tab wrapping. Tab pressed while focus outside container left to the page. Mouse clicks outside container not intercepted; use light-dismiss handler for that.',
   paramDescriptions: {
     options: 'config for focus trap.',
     'options.isActive': 'whether focus trap currently active.',
@@ -68,7 +68,7 @@ export const docsDense = {
   },
   usage: {
     description:
-      'Traps focus within container element following WAI-ARIA dialog focus trap pattern. Listens to document focus events + redirects focus back into container if it escapes via keyboard navigation. Handles both Tab + Shift+Tab wrapping. On deactivate/unmount, restores focus to the element focused before activation unless focus already moved elsewhere or never entered the trap. Mouse clicks outside container not intercepted; use light-dismiss handler for that.',
+      'Traps focus within container element following WAI-ARIA dialog focus trap pattern. Listens to document focus events + redirects focus back into container if a Tab from inside moves focus out. Handles both Tab + Shift+Tab wrapping. Tab pressed while focus outside container left to the page. On deactivate/unmount, restores focus to the element focused before activation unless focus already moved elsewhere or never entered the trap. Mouse clicks outside container not intercepted; use light-dismiss handler for that.',
     bestPractices: [
       { guidance: true, description: 'Call focusFirst() when opening dialog/modal to move focus into trapped region.' },
       { guidance: true, description: 'Provide onEscape callback to close dialog when Escape pressed.' },

package/src/hooks/useFocusTrap.test.tsx

@@ -9,8 +9,15 @@
  * SYNC: When useFocusTrap.ts changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
+import {
+  render,
+  screen,
+  fireEvent,
+  within,
+  cleanup,
+} from '@testing-library/react';
+import {createPortal} from 'react-dom';
 import {FOCUSABLE_SELECTOR} from './focusableSelector';
 import {useFocusTrap} from './useFocusTrap';
 
@@ -249,6 +256,70 @@ describe('useFocusTrap tabbable model (infra-8)', () => {
     expect(screen.getByTestId('outside')).not.toHaveFocus();
   });
 
+  it('leaves Tab alone when focus is outside a trap with tabbable controls', () => {
+    render(
+      <Trap>
+        <button type="button" data-testid="inside">
+          Inside
+        </button>
+      </Trap>,
+    );
+    const outside = screen.getByTestId('outside');
+    const next = screen.getByTestId('focus-first');
+    outside.focus();
+
+    // The browser moves focus on to the next page control after an unhandled
+    // Tab; the trap must not pull that focus into itself.
+    expect(fireEvent.keyDown(outside, {key: 'Tab'})).toBe(true);
+    next.focus();
+
+    expect(next).toHaveFocus();
+    expect(screen.getByTestId('inside')).not.toHaveFocus();
+  });
+
+  it('wraps Tab from an SVG control that is the last tabbable inside the trap', () => {
+    render(
+      <Trap>
+        <button type="button" data-testid="first">
+          First
+        </button>
+        <svg tabIndex={0} data-testid="svg-control" aria-label="Chart point">
+          <circle r={4} />
+        </svg>
+      </Trap>,
+    );
+    const svgControl = screen.getByTestId('svg-control');
+    (svgControl as unknown as SVGElement).focus();
+    expect(svgControl).toHaveFocus();
+
+    expect(fireEvent.keyDown(svgControl, {key: 'Tab'})).toBe(false);
+    expect(screen.getByTestId('first')).toHaveFocus();
+  });
+
+  it('pulls focus back in when a Tab from inside leaves the trap', () => {
+    render(
+      <Trap>
+        <button type="button" data-testid="first">
+          First
+        </button>
+        <button type="button" data-testid="inside">
+          Inside
+        </button>
+      </Trap>,
+    );
+    const first = screen.getByTestId('first');
+    first.focus();
+
+    // A Tab the trap does not wrap itself, where focus still leaves the
+    // container: the escaped focus is redirected back inside.
+    fireEvent.keyDown(first, {key: 'Tab'});
+    screen.getByTestId('focus-first').focus();
+
+    expect(screen.getByTestId('trap')).toContainElement(
+      document.activeElement as HTMLElement,
+    );
+  });
+
   it('leaves Tab alone when focus is outside a trap with no tabbable controls', () => {
     render(
       <Trap>
@@ -500,3 +571,65 @@ describe('useFocusTrap focus restoration', () => {
     expect(prev).toHaveFocus();
   });
 });
+
+describe('useFocusTrap in a second document', () => {
+  // A same-origin iframe stands in for any second document an app renders a
+  // trap into through a portal, Document Picture-in-Picture included. Its
+  // elements belong to the iframe's own window, and its key presses and focus
+  // changes never reach this document.
+  let frame: HTMLIFrameElement;
+  let secondDocument: Document;
+
+  beforeEach(() => {
+    frame = document.createElement('iframe');
+    document.body.appendChild(frame);
+    secondDocument = frame.contentDocument!;
+  });
+
+  afterEach(() => {
+    // Unmount before the frame goes, or React removes nodes from a document
+    // that no longer exists.
+    cleanup();
+    frame.remove();
+  });
+
+  it('keeps Tab on a programmatic focus target when nothing inside is tabbable', () => {
+    render(
+      createPortal(
+        <Trap>
+          <div tabIndex={-1} data-testid="programmatic-target">
+            Read-only dialog content
+          </div>
+        </Trap>,
+        secondDocument.body,
+      ),
+    );
+    const target = within(secondDocument.body).getByTestId(
+      'programmatic-target',
+    );
+    target.focus();
+
+    expect(fireEvent.keyDown(target, {key: 'Tab'})).toBe(false);
+    expect(target).toHaveFocus();
+  });
+
+  it('returns focus to the element focused before it in that document', () => {
+    const {rerender} = render(
+      createPortal(<RestoreFixture isActive={false} />, secondDocument.body),
+    );
+    const view = within(secondDocument.body);
+    const prev = view.getByTestId('prev');
+    prev.focus();
+
+    rerender(
+      createPortal(<RestoreFixture isActive={true} />, secondDocument.body),
+    );
+    view.getByTestId('inside').focus();
+    (secondDocument.activeElement as HTMLElement).blur();
+
+    rerender(
+      createPortal(<RestoreFixture isActive={false} />, secondDocument.body),
+    );
+    expect(prev).toHaveFocus();
+  });
+});

package/src/hooks/useFocusTrap.ts

@@ -102,6 +102,26 @@ export function getFocusableElements(container: HTMLElement): HTMLElement[] {
   ).filter(isVisiblyFocusable);
 }
 
+/**
+ * The document a trap lives in: its container's. An app that renders into a
+ * same-origin iframe or a Document Picture-in-Picture window through a portal
+ * puts the trap in that window's document, whose key presses and focus
+ * changes never reach this module's global `document`.
+ */
+function trapDocument(container: HTMLElement | null): Document {
+  return container?.ownerDocument ?? document;
+}
+
+/**
+ * `instanceof HTMLElement`, asked of the node's own window: an element of a
+ * second document is an instance of that window's `HTMLElement`, not of this
+ * one's.
+ */
+function isHTMLElement(node: Node | null): node is HTMLElement {
+  const view = node?.ownerDocument?.defaultView;
+  return view != null && node instanceof view.HTMLElement;
+}
+
 /**
  * Attempt to focus an element. Returns true if focus was successful.
  */
@@ -111,7 +131,7 @@ function attemptFocus(element: HTMLElement): boolean {
   } catch {
     // Some elements may throw on focus
   }
-  return document.activeElement === element;
+  return element.ownerDocument.activeElement === element;
 }
 
 /**
@@ -176,7 +196,7 @@ export interface UseFocusTrapReturn<T extends HTMLElement = HTMLElement> {
  * Hook for trapping focus within a container element.
  *
  * Implements the WAI-ARIA dialog focus trap pattern:
- * - Listens to focus events on the document
+ * - Listens to focus events on the container's document
  * - Redirects focus back into the container if it escapes
  * - Handles both Tab and Shift+Tab navigation
  * - Restores focus to the element that was focused before activation when the
@@ -278,15 +298,16 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
       return;
     }
 
-    const previouslyFocused = document.activeElement as HTMLElement | null;
     // Snapshot the container now; by cleanup it may be detached or unmounted.
     const container = containerRef.current;
+    const doc = trapDocument(container);
+    const previouslyFocused = doc.activeElement as HTMLElement | null;
 
     // Whether focus ever entered the trap container while it was active.
     // Initialized from the current active element in case focus was already
     // inside at activation (e.g. a programmatic focus before the effect ran).
     let hadFocusInside =
-      container != null && container.contains(document.activeElement);
+      container != null && container.contains(doc.activeElement);
 
     const markFocusInside = (event: FocusEvent) => {
       const target = event.target as Node | null;
@@ -294,20 +315,20 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
         hadFocusInside = true;
       }
     };
-    document.addEventListener('focusin', markFocusInside, true);
+    doc.addEventListener('focusin', markFocusInside, true);
 
     return () => {
-      document.removeEventListener('focusin', markFocusInside, true);
+      doc.removeEventListener('focusin', markFocusInside, true);
 
       if (!hadFocusInside) {
         return;
       }
 
-      const active = document.activeElement;
+      const active = doc.activeElement;
       const focusWasLost =
         active == null ||
-        active === document.body ||
-        active === document.documentElement ||
+        active === doc.body ||
+        active === doc.documentElement ||
         (container != null && container.contains(active));
 
       if (!focusWasLost) {
@@ -333,6 +354,8 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
       return;
     }
 
+    const doc = trapDocument(containerRef.current);
+
     const handleFocus = (event: FocusEvent) => {
       const container = containerRef.current;
       if (!container) {
@@ -350,11 +373,11 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
 
         // If we're back at the same element (Shift+Tab from first element),
         // try focusing the last element instead
-        if (focusedFirst && lastFocusRef.current === document.activeElement) {
+        if (focusedFirst && lastFocusRef.current === doc.activeElement) {
           focusLastDescendant(container);
         } else if (
           !focusedFirst &&
-          lastFocusRef.current instanceof HTMLElement &&
+          isHTMLElement(lastFocusRef.current) &&
           container.contains(lastFocusRef.current)
         ) {
           // A modal surface may intentionally have no tabbable controls and
@@ -363,7 +386,7 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
           attemptFocus(lastFocusRef.current);
         }
 
-        lastFocusRef.current = document.activeElement;
+        lastFocusRef.current = doc.activeElement;
       }
       // If focus escaped via mouse click, don't redirect - let light dismiss handle it
 
@@ -372,10 +395,10 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
     };
 
     // Use capture phase to intercept focus before it settles
-    document.addEventListener('focus', handleFocus, true);
+    doc.addEventListener('focus', handleFocus, true);
 
     return () => {
-      document.removeEventListener('focus', handleFocus, true);
+      doc.removeEventListener('focus', handleFocus, true);
     };
   }, [isActive]);
 
@@ -393,6 +416,8 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
       return;
     }
 
+    const doc = trapDocument(containerRef.current);
+
     const handleKeyDown = (event: KeyboardEvent) => {
       const container = containerRef.current;
       if (!container) {
@@ -400,18 +425,25 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
       }
 
       if (event.key === 'Tab') {
-        // Mark that keyboard navigation is happening
+        const active = doc.activeElement;
+        // Any focused node counts, not only HTML elements: an SVG control
+        // inside the container is still inside.
+        if (active == null || !container.contains(active)) {
+          // The trap contains focus that is inside it; it does not pull in a
+          // Tab pressed elsewhere on the page. A layer can be open while focus
+          // legitimately sits outside it — a listbox popup anchored to its own
+          // input, a non-modal popover beside the content it annotates — and
+          // capturing that Tab would take the rest of the page away from
+          // keyboard users.
+          return;
+        }
+
+        // Mark that keyboard navigation is leaving from inside the trap, so a
+        // focus that lands outside is redirected back in.
         isKeyboardNavigationRef.current = true;
 
         const focusable = getFocusableElements(container);
         if (focusable.length === 0) {
-          const active = document.activeElement;
-          if (!(active instanceof HTMLElement) || !container.contains(active)) {
-            // A layer can be open while focus legitimately sits outside it —
-            // a listbox popup anchored to its own input. Cancelling there
-            // would take Tab away from the whole page.
-            return;
-          }
           // There is nowhere to advance to. Keep focus on the current
           // programmatic target (for example a dialog panel with tabIndex=-1)
           // rather than allowing the browser to move into background content.
@@ -424,7 +456,7 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
         const first = focusable[0];
         const last = focusable[focusable.length - 1];
 
-        if (document.activeElement === container) {
+        if (doc.activeElement === container) {
           // Programmatic initial focus can sit on the trap container itself
           // (for example a dialog panel with no content controls). Move into
           // the tabbable cycle instead of letting Tab escape to the page.
@@ -439,13 +471,13 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
 
         if (event.shiftKey) {
           // Shift+Tab: if on first element, wrap to last
-          if (document.activeElement === first) {
+          if (doc.activeElement === first) {
             event.preventDefault();
             last.focus();
           }
         } else {
           // Tab: if on last element, wrap to first
-          if (document.activeElement === last) {
+          if (doc.activeElement === last) {
             event.preventDefault();
             first.focus();
           }
@@ -453,10 +485,10 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
       }
     };
 
-    document.addEventListener('keydown', handleKeyDown);
+    doc.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      doc.removeEventListener('keydown', handleKeyDown);
     };
   }, [isActive, onEscape]);
 

package/src/hooks/useMenuHover.ts

@@ -40,6 +40,7 @@ import {useCallback, useEffect, useRef} from 'react';
 import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
 import {useListFocus} from './useListFocus';
 import {useMediaQuery} from './useMediaQuery';
+import {focusForLastInput} from '../utils/focusReturn';
 
 const DEFAULT_CLICK_GUARD_MS = 500;
 
@@ -279,8 +280,11 @@ export function useMenuHover<T extends HTMLElement = HTMLElement>(
     const menuHadFocus =
       menuRef.current?.contains(document.activeElement) ?? false;
     hide();
-    if (menuHadFocus) {
-      triggerElRef.current?.focus();
+    const trigger = triggerElRef.current;
+    if (menuHadFocus && trigger != null) {
+      // A pointer's pick leaves no keyboard ring on the trigger; a keyboard's
+      // keeps it (`architecture:interaction-modality` INV1).
+      focusForLastInput(trigger);
     }
   }, [hide, menuRef]);
 

package/src/hooks/useMenuPress.doc.mjs

@@ -55,7 +55,7 @@ export const docs = {
       name: 'options.onHighlight',
       type: '(row: HTMLElement | null) => void',
       description:
-        'Move the highlight; null clears it. Defaults to moving DOM focus with preventScroll onto the row, and onto the menu root when there is no row. A picker that highlights through aria-activedescendant supplies its own.',
+        'Move the highlight; null clears it. Defaults to moving DOM focus with preventScroll onto the row, and onto the menu root when there is no row; after a pointer press that focus does not match :focus-visible. A picker that highlights through aria-activedescendant supplies its own.',
     },
     {
       name: 'options.onActivate',
@@ -164,7 +164,7 @@ export const docsDense = {
     'options.onTriggerPress':
       'mouse press / held finger on trigger: open, return whether it opened (false = the press closed it).',
     'options.onHighlight':
-      'move highlight (null clears); default = focus w/ preventScroll, menu root when no row.',
+      'move highlight (null clears); default = focus w/ preventScroll (not :focus-visible after a pointer press), menu root when no row.',
     'options.onActivate':
       'act on row under release; default = dispatch click w/ release button + modifiers.',
     'options.onDismiss': 'MOUSE released outside: close. Finger: never called.',

package/src/hooks/useMenuPress.test.tsx

@@ -171,7 +171,7 @@ describe('useMenuPress — tracking inside the menu', () => {
     }
   });
 
-  it('moves the highlight as focus with preventScroll', () => {
+  it('moves the highlight as focus with preventScroll and without :focus-visible', () => {
     render(<Harness />);
     const b = row('B');
     const focusSpy = vi.spyOn(b, 'focus');
@@ -179,7 +179,10 @@ describe('useMenuPress — tracking inside the menu', () => {
     expect(row('A')).toHaveFocus();
     fireEvent.pointerMove(b, touch());
     expect(b).toHaveFocus();
-    expect(focusSpy).toHaveBeenCalledWith({preventScroll: true});
+    expect(focusSpy).toHaveBeenCalledWith({
+      preventScroll: true,
+      focusVisible: false,
+    });
   });
 
   it('clears the highlight over a disabled row or a divider and acts on nothing there', () => {