@astryxdesign/core 0.7.2-canary.55d8dff → 0.7.2-canary.577a62e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.2-canary.55d8dff",
+  "version": "0.7.2-canary.577a62e",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -792,8 +792,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.2-canary.55d8dff",
-    "@astryxdesign/cli": "0.7.2-canary.55d8dff",
+    "@astryxdesign/a11y-spec": "0.7.2-canary.577a62e",
+    "@astryxdesign/cli": "0.7.2-canary.577a62e",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/scripts/agent-doc-state.mjs

@@ -145,15 +145,37 @@ function findRepositoryRoot(start) {
 }
 
 /**
- * The one-line next-step both postinstall nudges print. Kept here so layer 1
- * (core) and layer 2 (cli) can never word it differently.
- *
- * Scoped package form (`@astryxdesign/cli`) — always resolves to us, even before
- * the CLI is installed. Bare `npx astryx` would fetch an unrelated look-alike
+ * The invocation the setup nudge falls back to when the CLI's picker
+ * (`getCliInvocation`) cannot be loaded. Scoped package form
+ * (`@astryxdesign/cli`) — always resolves to us, even before the CLI is
+ * installed. npx with the unscoped name would fetch an unrelated look-alike
  * package (see PR #4151).
  */
-export const SETUP_NUDGE =
-  '\nNext step: run `npx @astryxdesign/cli init` to finish setup and install the Astryx agent prompt.\n\n';
+export const SETUP_INVOCATION = 'npx @astryxdesign/cli';
+
+/**
+ * The one-line next-step every setup layer prints. Kept here so layer 1
+ * (core), layer 2 (cli postinstall) and layer 3 (each command) can never word
+ * it differently. Each layer passes the stem from the CLI's picker when it can
+ * load it.
+ *
+ * @param {string} [invocation] the CLI invocation stem, e.g. `pnpm exec astryx`
+ * @param {{before?: string | null}} [options] `before`: a command to run
+ *   first, such as the one that adds the CLI to a project that has none
+ * @returns {string}
+ */
+export function setupNudge(
+  invocation = SETUP_INVOCATION,
+  {before = null} = {},
+) {
+  const run = before
+    ? `\`${before}\`, then \`${invocation} init\``
+    : `\`${invocation} init\``;
+  return `\nNext step: run ${run} to finish setup and install the Astryx agent prompt.\n\n`;
+}
+
+/** The nudge with the fallback invocation. */
+export const SETUP_NUDGE = setupNudge();
 
 /**
  * Pure decision: should a postinstall print the setup nudge? Shared by BOTH

package/scripts/postinstall.mjs

@@ -1,7 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file @astryxdesign/core postinstall — nudge to run `npx @astryxdesign/cli init`.
+ * @file @astryxdesign/core postinstall — nudge to run `astryx init`, prefixed
+ * the way the project's installed CLI prints commands.
  *
  * Enforcement layer 1 of making `astryx init` foolproof: when the design system
  * is installed and the project hasn't run init yet, print a one-line next-step
@@ -19,6 +20,8 @@
  * during npx's fetch, and once set up.
  */
 
+import * as fs from 'node:fs';
+import * as path from 'node:path';
 import {fileURLToPath, pathToFileURL} from 'node:url';
 
 const HERE = fileURLToPath(import.meta.url);
@@ -37,6 +40,39 @@ async function loadContract() {
   }
 }
 
+/**
+ * The stem the project's installed CLI would print, from its picker
+ * (`getCliInvocation`). Core cannot depend on the CLI, so this looks for an
+ * installed copy from the project upward and imports the picker by path; with
+ * no CLI there, or one too old to have the picker, it returns undefined and
+ * the contract's scoped fallback is printed. At install time no integration is
+ * loaded, so this is the package-manager guess.
+ * @param {string} root
+ * @returns {Promise<string | undefined>}
+ */
+export async function cliInvocation(root) {
+  try {
+    let dir = path.resolve(root);
+    for (;;) {
+      const picker = path.join(
+        dir,
+        'node_modules/@astryxdesign/cli/foundation/env/package-manager.mjs',
+      );
+      if (fs.existsSync(picker)) {
+        const {getCliInvocation} = await import(pathToFileURL(picker).href);
+        return typeof getCliInvocation === 'function'
+          ? getCliInvocation(root)
+          : undefined;
+      }
+      const parent = path.dirname(dir);
+      if (parent === dir) return undefined;
+      dir = parent;
+    }
+  } catch {
+    return undefined;
+  }
+}
+
 async function main() {
   const contract = await loadContract();
   if (!contract) return;
@@ -48,7 +84,12 @@ async function main() {
       isSetUp: contract.isAstryxPromptInReach(root),
     })
   ) {
-    process.stdout.write(contract.SETUP_NUDGE);
+    const invocation = await cliInvocation(root);
+    process.stdout.write(
+      typeof contract.setupNudge === 'function'
+        ? contract.setupNudge(invocation)
+        : contract.SETUP_NUDGE,
+    );
   }
 }
 

package/src/Avatar/Avatar.tsx

@@ -387,9 +387,18 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
 /**
  * A character that can stand for a word in initials: a letter, a digit, or an
  * emoji. Punctuation and other symbols, such as `(`, `"` or `-`, cannot.
+ *
+ * Built at runtime, not written as a literal: for targets without property
+ * escapes, or when no browserslist is set, Babel's
+ * transform-unicode-property-regex rewrites a `\p{…}` literal, and the copy
+ * bundled with Next.js lacks the Unicode data it needs, so a source build fails
+ * with "Unknown property". A literal is safe once Next's bundled Babel ships
+ * that data.
  */
-const INITIAL_CHARACTER =
-  /[\p{L}\p{N}\p{Extended_Pictographic}\p{Regional_Indicator}]/u;
+const INITIAL_CHARACTER = new RegExp(
+  '[\\p{L}\\p{N}\\p{Extended_Pictographic}\\p{Regional_Indicator}]',
+  'u',
+);
 
 /**
  * The first character of a word that can stand for it in initials, skipping

package/src/AvatarGroup/AvatarGroupOverflow.test.tsx

@@ -21,6 +21,29 @@ describe('AvatarGroupOverflow', () => {
     expect(overflow).toHaveTextContent('+5');
   });
 
+  it('exposes the static overflow as a named image', () => {
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" />
+        <AvatarGroupOverflow count={5} />
+      </AvatarGroup>,
+    );
+
+    const overflow = screen.getByRole('img', {name: '5 more'});
+    expect(overflow).toHaveAttribute('role', 'img');
+  });
+
+  it('keeps a caller-supplied role on the static overflow', () => {
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" />
+        <AvatarGroupOverflow count={5} role="note" />
+      </AvatarGroup>,
+    );
+
+    expect(screen.getByLabelText('5 more')).toHaveAttribute('role', 'note');
+  });
+
   it('reflects the group size on the overflow chip', () => {
     render(
       <AvatarGroup size="lg">
@@ -66,7 +89,7 @@ describe('AvatarGroupOverflow', () => {
       </AvatarGroup>,
     );
 
-    const overflow = screen.getByLabelText('3 more');
+    const overflow = screen.getByRole('button', {name: '3 more'});
     expect(overflow.tagName).toBe('BUTTON');
   });
 

package/src/AvatarGroup/AvatarGroupOverflow.tsx

@@ -208,6 +208,8 @@ export function AvatarGroupOverflow({
   return (
     <span
       ref={ref}
+      // Before the caller's props so a caller-supplied role still wins.
+      role="img"
       {...rest}
       aria-label={label}
       {...mergeProps(

package/src/Chat/ChatLayoutScrollButton.test.tsx

@@ -70,6 +70,19 @@ describe('ChatLayoutScrollButton', () => {
     ).toHaveFocus();
   });
 
+  it('makes the pill inert whenever the visible state turns off', () => {
+    const {container, rerender} = render(
+      <ChatLayoutScrollButton isVisible onClick={() => {}} />,
+    );
+    const pill = container.querySelector('.astryx-chat-layout-scroll-button');
+
+    expect(pill).not.toHaveAttribute('inert');
+
+    rerender(<ChatLayoutScrollButton isVisible={false} onClick={() => {}} />);
+
+    expect(pill).toHaveAttribute('inert');
+  });
+
   it('is not keyboard reachable while hidden', async () => {
     const user = userEvent.setup();
     render(

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -86,8 +86,9 @@ const styles = stylex.create({
     opacity: 0,
     pointerEvents: 'none',
     // The hidden pill paints nothing, so focus landing on it would have no
-    // visible indicator (WCAG 2.2 SC 2.4.7). `opacity` and `pointer-events`
-    // leave the button in sequential focus navigation; `visibility` removes it.
+    // visible indicator (WCAG 2.2 SC 2.4.7). `visibility` removes it from
+    // sequential navigation after the fade; `inert` immediately prevents new
+    // focus and makes an already-focused descendant relinquish focus.
     visibility: 'hidden',
     maxWidth: sizeVars['--size-element-md'],
   },
@@ -151,6 +152,7 @@ export function ChatLayoutScrollButton({
       {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}
       {...rest}>
       <div
+        inert={!isVisible}
         {...mergeProps(
           themeProps('chat-layout-scroll-button'),
           stylex.props(

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

@@ -44,6 +44,7 @@ const STORY_ID = 'core-chatlayout--scroll-affordance-states';
  * a stable handle for it.
  */
 const PILL = '.astryx-chat-layout-scroll-button';
+const AFFORDANCE = `${PILL} button`;
 
 /** One observed tab stop, identified structurally rather than by its text. */
 type FocusStop = {
@@ -126,7 +127,11 @@ test.afterAll(async () => {
 
 async function openStory(
   page: Page,
-  {theme = 'neutral', colorMode = 'light'} = {},
+  {
+    theme = 'neutral',
+    colorMode = 'light',
+    holdMotion = true,
+  }: {theme?: string; colorMode?: string; holdMotion?: boolean} = {},
 ): Promise<Locator> {
   page.on('pageerror', error => pageErrors.push(String(error)));
   browserVersion = page.context().browser()?.version() ?? 'unknown';
@@ -136,7 +141,9 @@ async function openStory(
   );
   const root = page.locator('.astryx-chat-layout');
   await root.waitFor({state: 'visible'});
-  await holdMotionStill(page);
+  if (holdMotion) {
+    await holdMotionStill(page);
+  }
   await page.evaluate(async () => document.fonts.ready);
   return root;
 }
@@ -169,21 +176,25 @@ async function pillVisibility(page: Page): Promise<string> {
 }
 
 /**
- * Can the affordance take focus at all? This is the mechanism under test:
- * `visibility: hidden` removes an element from sequential focus navigation AND
- * refuses programmatic focus, which `opacity: 0` does neither of. A CSS locator
- * is used rather than a role query because a hidden button is not in the
- * accessibility tree and a role query would not resolve it.
+ * Can the affordance take new focus at all? This is one half of the mechanism
+ * under test: `inert` refuses programmatic focus immediately, while delayed
+ * `visibility: hidden` removes the control from sequential navigation after the
+ * fade. A CSS locator is used rather than a role query because a hidden button
+ * is not in the accessibility tree and a role query would not resolve it.
  */
-async function affordanceAcceptsFocus(page: Page): Promise<boolean> {
-  return page
-    .locator('.astryx-chat-layout-scroll-button button')
-    .evaluate(element => {
-      // preventScroll: focusing must not move the scroll position, or the
-      // probe would change the very state the next assertion reads.
-      (element as HTMLElement).focus({preventScroll: true});
-      return document.activeElement === element;
-    });
+async function affordanceAcceptsFocus(
+  page: Page,
+  resetFocus: Locator,
+): Promise<boolean> {
+  // Start outside the affordance so this probe proves a NEW focus transfer;
+  // equality alone would also be true when a button stayed active as it hid.
+  await resetFocus.focus();
+  return page.locator(AFFORDANCE).evaluate(element => {
+    // preventScroll: focusing must not move the scroll position, or the
+    // probe would change the very state the next assertion reads.
+    (element as HTMLElement).focus({preventScroll: true});
+    return document.activeElement === element;
+  });
 }
 
 /**
@@ -340,6 +351,36 @@ async function capture(
   return receipt;
 }
 
+test('the hiding affordance releases focus before its fade finishes', async ({
+  page,
+}) => {
+  const root = await openStory(page, {holdMotion: false});
+  const pill = page.locator(PILL);
+  const affordance = page.locator(AFFORDANCE);
+
+  await scrollToTop(root);
+  await expect(pill).toHaveCSS('visibility', 'visible');
+  await affordance.focus();
+  await expect(affordance).toBeFocused();
+
+  await page.keyboard.press('Enter');
+  await expect
+    .poll(
+      async () =>
+        affordance.evaluate(element => document.activeElement === element),
+      {timeout: 5000},
+    )
+    .toBe(false);
+
+  // `visibility` flips only after the fade. Focus leaving while it is still
+  // visible proves the immediate `inert` state rather than the delayed CSS.
+  await expect(pill).toHaveCSS('visibility', 'visible');
+  await expect
+    .poll(async () => distanceFromBottom(root), {timeout: 5000})
+    .toBeLessThan(2);
+  await expect(pill).toHaveCSS('visibility', 'hidden');
+});
+
 test('the scroll affordance is keyboard reachable exactly while it is visible', async ({
   page,
 }) => {
@@ -367,7 +408,7 @@ test('the scroll affordance is keyboard reachable exactly while it is visible',
   expect(await distanceFromBottom(root)).toBeLessThan(2);
   await expect(pill).toHaveCSS('visibility', 'hidden');
   expect(
-    await affordanceAcceptsFocus(page),
+    await affordanceAcceptsFocus(page, before),
     'a control that paints nothing must refuse focus (WCAG 2.2 SC 2.4.7)',
   ).toBe(false);
   const restFrame = await capture(page, 'rest-hidden', {
@@ -384,7 +425,7 @@ test('the scroll affordance is keyboard reachable exactly while it is visible',
   await expect(pill).toHaveCSS('visibility', 'visible');
   expect(await distanceFromBottom(root)).toBeGreaterThan(100);
   expect(
-    await affordanceAcceptsFocus(page),
+    await affordanceAcceptsFocus(page, before),
     'the visible affordance must keep its keyboard access',
   ).toBe(true);
   await expect(
@@ -415,8 +456,12 @@ test('the scroll affordance is keyboard reachable exactly while it is visible',
     .poll(async () => distanceFromBottom(root), {timeout: 5000})
     .toBeLessThan(2);
   await expect(pill).toHaveCSS('visibility', 'hidden');
+  await expect(
+    page.locator(AFFORDANCE),
+    'the affordance must relinquish focus when it hides',
+  ).not.toBeFocused();
   expect(
-    await affordanceAcceptsFocus(page),
+    await affordanceAcceptsFocus(page, before),
     'after returning to the bottom the affordance must refuse focus again',
   ).toBe(false);
   const returnedFrame = await capture(page, 'returned-hidden', {

package/src/CheckboxList/CheckboxList.fr10.test.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it} from 'vitest';
-import {screen} from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
 import {expectFieldInputProps} from '../Field/fieldInputFamily.testing';
 import {describeFieldInputParts} from '../Field/fieldInputFamily.render-testing';
 import {CheckboxList, type CheckboxListProps} from './CheckboxList';
@@ -22,3 +22,30 @@ describeFieldInputParts('CheckboxList', {
   getControl: () => screen.getByRole('group'),
   inGroup: false,
 });
+
+describe('CheckboxList FR10 details', () => {
+  it("names the group by its label and then a caller's aria-labelledby", () => {
+    render(
+      <>
+        <span id="caller-name">Billing</span>
+        <CheckboxList
+          label="Preferences"
+          value={[]}
+          onChange={() => {}}
+          aria-labelledby="caller-name">
+          <CheckboxListItem label="A" value="a" />
+        </CheckboxList>
+      </>,
+    );
+    const group = screen.getByRole('group');
+    const ids = group.getAttribute('aria-labelledby')?.split(' ');
+    expect(ids).toHaveLength(2);
+    expect(document.getElementById(ids?.[0] ?? '')?.textContent).toContain(
+      'Preferences',
+    );
+    expect(ids?.[1]).toBe('caller-name');
+    expect(screen.getByRole('group', {name: 'Preferences Billing'})).toBe(
+      group,
+    );
+  });
+});

package/src/CheckboxList/CheckboxList.tsx

@@ -38,6 +38,7 @@ import {useTooltip} from '../Tooltip';
 import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
+import {joinAriaIDs} from '../utils/inputAria';
 import {
   CheckboxListContext,
   type CheckboxListContextValue,
@@ -170,6 +171,7 @@ export function CheckboxList({
   controlXstyle,
   controlClassName,
   controlStyle,
+  'aria-labelledby': ariaLabelledByProp,
   'aria-describedby': ariaDescribedByProp,
   ...restProps
 }: CheckboxListProps) {
@@ -290,7 +292,8 @@ export function CheckboxList({
             controlStyle,
           )}
           role="group"
-          aria-labelledby={labelID}
+          // A caller aria-labelledby names the group together with its label.
+          aria-labelledby={joinAriaIDs(labelID, ariaLabelledByProp)}
           aria-describedby={
             [
               ariaDescribedByProp,

package/src/ContextMenu/ContextMenu.test.tsx

@@ -10,7 +10,7 @@
 
 import {useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
-import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {describe, it, expect, vi, beforeAll, beforeEach} from 'vitest';
 import {render, screen, fireEvent, act, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {readFileSync} from 'node:fs';
@@ -26,6 +26,11 @@ import {
 import {DropdownMenuItem} from '../DropdownMenu/DropdownMenuItem';
 import {Divider} from '../Divider';
 import {useLayerDismissal} from '../Layer/useLayerDismissal';
+import {warmMenuBottomSheet} from '../DropdownMenu/__tests__/warmMenuBottomSheet';
+
+// The touch sheet is loaded lazily; resolve its modules once up front, so
+// ContextMenu's own lazy sheet renders within the cases' waitFor.
+beforeAll(warmMenuBottomSheet, 20000);
 
 function NestedDismissibleLayer({onDismiss}: {onDismiss: () => void}) {
   const [isOpen, setIsOpen] = useState(true);
@@ -268,7 +273,12 @@ describe('ContextMenu', () => {
     );
 
     fireEvent.contextMenu(screen.getByText('Right-click me'));
-    await user.click(screen.getByRole('button', {name: 'Move to project'}));
+    // The sheet is lazy: its first render suspends once even when the module
+    // is already loaded, so wait for the row rather than relying on an
+    // earlier case to have rendered a sheet.
+    await user.click(
+      await screen.findByRole('button', {name: 'Move to project'}),
+    );
 
     const submenuHeading = screen.getByRole('heading', {
       name: 'Move to project',

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -1567,10 +1567,9 @@ describe('DropdownMenuItem host attributes', () => {
 
 describe('DropdownMenuGroup (compound mode)', () => {
   it('a focusable node in the heading is not reachable by the arrow keys', async () => {
-    // A heading is not a menu row, so a control inside one lands in the
-    // group but outside the roving focus order. The type does not prevent
-    // this — a rich heading is a legitimate need — so the behavior is
-    // pinned rather than discovered.
+    // The public ReactNode type permits a focusable descendant, but the menu's
+    // roving focus model cannot reach it. Pin that shipped gap while the public
+    // title contract remains unsettled.
     const user = userEvent.setup();
     render(
       <DropdownMenu button={{label: 'Actions'}}>

package/src/DropdownMenu/DropdownMenu.tsx

@@ -72,7 +72,7 @@ import {useFocusReturnVisibility} from '../hooks/useFocusReturnVisibility';
 import {focusForLastInput} from '../utils/focusReturn';
 import {useMenuOverflow} from './useMenuOverflow';
 import {MenuRegionsContext} from './menuRegionsContext';
-import {getFocusableElements} from '../hooks/useFocusTrap';
+import {moveRegionsTab} from './menuRegionStops';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {useMenuDrillIn} from './useMenuDrillIn';
 import {resolveMenuWidth} from './menuWidth';
@@ -112,102 +112,6 @@ const MENU_MAX_BLOCK_SIZE = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBloc
 const MENU_MAX_BLOCK_SIZE_FALLBACK = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBlockSizeFallback})`;
 const MENU_TRIGGER_OPEN_BACKGROUND = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
 
-/**
- * The elements Tab reaches inside a header or footer region, in order. Hidden
- * controls (`hidden`, `display: none`, `visibility: hidden`, inert or
- * aria-hidden subtrees) are not reachable, judged by the popover focus trap's
- * own test so the two never disagree about where Tab can go.
- */
-/**
- * Collapse each named radio group to the one Tab stop a browser gives it: the
- * focused radio, else the checked one, else the first radio moving forward or
- * the last moving backward. The stop takes the group's first position.
- */
-function collapseRadioGroups(
-  elements: HTMLElement[],
-  active: Element | null,
-  isBackward: boolean,
-): HTMLElement[] {
-  const groups = new Map<string, HTMLInputElement[]>();
-  const groupKey = (el: HTMLElement): string | null =>
-    el instanceof HTMLInputElement &&
-    el.getAttribute('type') === 'radio' &&
-    el.name !== ''
-      ? `${el.form?.id ?? ''}\u0000${el.name}`
-      : null;
-  for (const el of elements) {
-    const key = groupKey(el);
-    if (key != null) {
-      const members = groups.get(key) ?? [];
-      members.push(el as HTMLInputElement);
-      groups.set(key, members);
-    }
-  }
-  const placed = new Set<string>();
-  const result: HTMLElement[] = [];
-  for (const el of elements) {
-    const key = groupKey(el);
-    if (key == null) {
-      result.push(el);
-      continue;
-    }
-    if (placed.has(key)) {
-      continue;
-    }
-    placed.add(key);
-    const members = groups.get(key) ?? [];
-    const stop =
-      members.find(radio => radio === active) ??
-      members.find(radio => radio.checked) ??
-      (isBackward ? members[members.length - 1] : members[0]);
-    result.push(stop);
-  }
-  return result;
-}
-
-function tabbablesIn(region: HTMLElement | null): HTMLElement[] {
-  if (region == null) {
-    return [];
-  }
-  return getFocusableElements(region).filter(
-    element => element.tabIndex >= 0 && !isInsideHiddenWrapper(element, region),
-  );
-}
-
-/**
- * Whether a `display: none` ancestor between the element and its region hides
- * it — a control in a wrapper hidden at some widths, say. The trap's test reads
- * only the element's own display.
- */
-function isInsideHiddenWrapper(
-  element: HTMLElement,
-  region: HTMLElement,
-): boolean {
-  if (typeof window === 'undefined' || !window.getComputedStyle) {
-    return false;
-  }
-  for (
-    let node = element.parentElement;
-    node != null && node !== region.parentElement;
-    node = node.parentElement
-  ) {
-    if (window.getComputedStyle(node).display === 'none') {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * Move focus to a Tab stop in the dialog. Reports whether focus actually
- * arrived, so a caller can fall back to the menu instead of stranding focus on
- * the page.
- */
-function focusRegionControl(element: HTMLElement): boolean {
-  element.focus();
-  return element.ownerDocument.activeElement === element;
-}
-
 const styles = stylex.create({
   triggerOpen: {
     backgroundImage: MENU_TRIGGER_OPEN_BACKGROUND,
@@ -1271,44 +1175,13 @@ function DropdownMenuPopover({
   // second time.
   const moveDialogTab = useCallback(
     (e: React.KeyboardEvent, isFromFlyout = false) => {
-      const menu = listRef.current;
-      if (menu == null) {
-        return;
-      }
-      e.preventDefault();
-      e.stopPropagation();
-      // A named radio group is one stop, as the browser's own Tab order has it.
-      const cycle = collapseRadioGroups(
-        [
-          ...tabbablesIn(headerRef.current),
-          menu,
-          ...tabbablesIn(footerRef.current),
-        ],
-        document.activeElement,
-        e.shiftKey,
+      moveRegionsTab(
+        e,
+        listRef.current,
+        headerRef.current,
+        footerRef.current,
+        isFromFlyout,
       );
-      if (cycle.length === 1) {
-        // Nothing else to reach: focus stays in the menu. From a flyout that
-        // has just closed itself, that is the menu's own stop.
-        if (isFromFlyout) {
-          menu.focus();
-        }
-        return;
-      }
-      const active = document.activeElement;
-      const menuIndex = cycle.indexOf(menu);
-      // A row, or a row of an open flyout, counts as the menu's stop.
-      let index = menu.contains(active)
-        ? menuIndex
-        : cycle.findIndex(el => el === active || el.contains(active));
-      if (index < 0) {
-        index = menuIndex;
-      }
-      const step = e.shiftKey ? -1 : 1;
-      const next = cycle[(index + step + cycle.length) % cycle.length];
-      if (!focusRegionControl(next)) {
-        menu.focus();
-      }
     },
     [listRef],
   );