@astryxdesign/core 0.7.0 → 0.7.1-canary.4285bdd

package/src/CodeBlock/__tests__/CodeBlockOverflowStop.a11y.chromium.spec.ts

@@ -0,0 +1,125 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CodeBlockOverflowStop.a11y.chromium.spec.ts
+ * @input Built CodeBlock story and real Chromium layout
+ * @output Browser evidence that the code viewport is a Tab stop only while it overflows
+ * @position CodeBlock FR8 / AST-025 FR12–FR13 proof over the shared scroll capability
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+const STORY = 'core-codeblock--overflow-stop';
+const WIDE = 'const wide = "' + 'x'.repeat(400) + '";';
+const TALL = Array.from({length: 40}, (_, i) => `const line${i} = ${i};`).join(
+  '\n',
+);
+
+async function mount(page: Page) {
+  await page.setViewportSize({width: 600, height: 500});
+  await page.goto(`${storybook.origin}/iframe.html?id=${STORY}&viewMode=story`);
+  await expect(page.getByRole('group', {name: 'tsx'})).toBeVisible();
+}
+
+async function setArgs(page: Page, args: Record<string, unknown>) {
+  await page.evaluate(
+    async ({storyId, updatedArgs}) =>
+      new Promise<void>(resolve => {
+        const channel = (
+          window as unknown as {
+            __STORYBOOK_ADDONS_CHANNEL__: {
+              emit: (event: string, payload: unknown) => void;
+              once: (event: string, handler: () => void) => void;
+            };
+          }
+        ).__STORYBOOK_ADDONS_CHANNEL__;
+        channel.once('storyRendered', () => resolve());
+        channel.emit('updateStoryArgs', {storyId, updatedArgs});
+        setTimeout(resolve, 1500);
+      }),
+    {storyId: STORY, updatedArgs: args},
+  );
+}
+
+function viewport(page: Page) {
+  return page.getByRole('group', {name: 'tsx'});
+}
+
+test('a fitting viewport is not a Tab stop', async ({page}) => {
+  await mount(page);
+  await expect(viewport(page)).not.toHaveAttribute('tabindex', /.*/);
+  // Tab from the document start lands on the copy button, never the viewport.
+  await page.keyboard.press('Tab');
+  const active = await page.evaluate(() =>
+    document.activeElement?.getAttribute('role'),
+  );
+  expect(active).not.toBe('group');
+});
+
+test('inline overflow adds the stop; block overflow adds it too', async ({
+  page,
+}) => {
+  await mount(page);
+  await setArgs(page, {code: WIDE});
+  await expect(viewport(page)).toHaveAttribute('tabindex', '0');
+  await expect(viewport(page)).toHaveAttribute(
+    'data-scrollable-inline',
+    'true',
+  );
+
+  await setArgs(page, {code: TALL, maxHeight: 160});
+  await expect(viewport(page)).toHaveAttribute('tabindex', '0');
+  await expect(viewport(page)).toHaveAttribute('data-scrollable-block', 'true');
+});
+
+test('losing overflow removes the stop without moving focus', async ({
+  page,
+}) => {
+  await mount(page);
+  await setArgs(page, {code: WIDE});
+  await expect(viewport(page)).toHaveAttribute('tabindex', '0');
+  await viewport(page).focus();
+  await expect(viewport(page)).toBeFocused();
+
+  await setArgs(page, {code: 'const fits = true;'});
+  // Focus stays on the element that had it; the stop is gone for the next Tab.
+  await expect(viewport(page)).toBeFocused();
+  await expect(viewport(page)).toHaveAttribute('tabindex', '-1');
+  // Leaving and coming back by keyboard skips it: it is out of the Tab order.
+  await page.keyboard.press('Shift+Tab');
+  await page.keyboard.press('Tab');
+  await expect(viewport(page)).not.toBeFocused();
+  await expect(viewport(page)).not.toHaveAttribute('tabindex', '0');
+});
+
+test('a root height set from outside bounds the viewport, which then scrolls', async ({
+  page,
+}) => {
+  await mount(page);
+  // The IDE template's pattern: the block fills a parent of fixed height.
+  await setArgs(page, {code: TALL, style: {height: 160}});
+  const vp = viewport(page);
+  await expect(vp).toHaveAttribute('tabindex', '0');
+  await expect(vp).toHaveAttribute('data-scrollable-block', 'true');
+  const box = await vp.boundingBox();
+  expect(box?.height ?? 0).toBeLessThan(160);
+  const scrollable = await vp.evaluate(
+    node => node.scrollHeight > node.clientHeight + 1,
+  );
+  expect(scrollable).toBe(true);
+});

package/src/ContextMenu/ContextMenu.spec.md

@@ -146,7 +146,7 @@ the highlight is DOM focus per `module:DropdownMenu/useMenuPress` AR1.
 | Touch action row     | Presents one data-driven touch action or drill-in entry using ListItem.           | `component:List`               | Prominent         | FR1, FR3, FR4      |
 
 The `context-menu` target intentionally appears on both alternative painted
-menu surfaces. Trigger area content stays caller-owned and the zero-size cursor
+menu surfaces. Trigger area content stays caller-owned and the 1px cursor
 anchor is positioning infrastructure rather than consumer anatomy.
 
 ### Theming anatomy

package/src/ContextMenu/ContextMenu.test.tsx

@@ -658,7 +658,7 @@ describe('ContextMenu compound mode', () => {
   });
 
   describe('cursor anchor positioning (#3465)', () => {
-    // The menu is anchored to a zero-size element placed at the cursor point
+    // The menu is anchored to a 1px element placed at the cursor point
     // *inside the trigger*, so it is positioned relative to the trigger's
     // context (scroll-follow + auto-flip) rather than the viewport.
     function getCursorAnchor(trigger: HTMLElement): HTMLElement {
@@ -669,7 +669,7 @@ describe('ContextMenu compound mode', () => {
       return anchor;
     }
 
-    it('renders a zero-size cursor anchor inside the trigger', () => {
+    it('renders a 1px cursor anchor inside the trigger', () => {
       render(
         <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
           <div>Right-click me</div>
@@ -680,6 +680,9 @@ describe('ContextMenu compound mode', () => {
       // Carries an anchor-name so the menu can be anchored to it via CSS
       // anchor positioning (context mode), not fixed viewport coordinates.
       expect(anchor.style.anchorName).toMatch(/^--astryx-layer-/);
+      // Owns a box: WebKit counts an empty anchor box inside a scroll
+      // container as clipped, and `position-visibility` hides the menu.
+      expect(anchor).toHaveStyle({width: '1px', height: '1px'});
     });
 
     it('places the cursor anchor at the pointer position relative to the trigger', () => {
@@ -725,7 +728,37 @@ describe('ContextMenu compound mode', () => {
       fireEvent.contextMenu(trigger, {clientX: 0, clientY: 0, detail: 0});
       const anchor = getCursorAnchor(trigger);
       expect(anchor.style.left).toBe('0px');
-      expect(anchor.style.top).toBe('20px');
+      // The 1px anchor steps back into the trigger's last pixel row, so its
+      // bottom edge (where the menu starts) is still the trigger's bottom.
+      expect(anchor.style.top).toBe('19px');
+    });
+
+    it('keeps the anchor inside the trigger at its end edges, and nowhere else', () => {
+      render(
+        <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
+          <div>Right-click me</div>
+        </ContextMenu>,
+      );
+      const trigger = screen.getByTestId('ctx');
+      trigger.getBoundingClientRect = () =>
+        ({
+          left: 100,
+          top: 50,
+          right: 300,
+          bottom: 150,
+          width: 200,
+          height: 100,
+        }) as DOMRect;
+      const anchor = getCursorAnchor(trigger);
+      // A point on the trigger's end edges steps back by the anchor's pixel.
+      fireEvent.contextMenu(trigger, {clientX: 300, clientY: 150, detail: 1});
+      expect(anchor.style.left).toBe('199px');
+      expect(anchor.style.top).toBe('99px');
+      // A point past the trigger (content overflowing it) stays at the
+      // pointer, as does a point on the trigger's start edges.
+      fireEvent.contextMenu(trigger, {clientX: 320, clientY: 50, detail: 1});
+      expect(anchor.style.left).toBe('220px');
+      expect(anchor.style.top).toBe('0px');
     });
   });
 });

package/src/ContextMenu/ContextMenu.tsx

@@ -9,7 +9,7 @@
  * @position Core implementation; consumed by index.ts
  *
  * Right-click context menu positioned at the cursor. The cursor point is
- * captured as an offset *inside the trigger* and materialized as a zero-size
+ * captured as an offset *inside the trigger* and materialized as a 1px
  * anchor element, so the menu is positioned relative to the trigger's context
  * (via CSS anchor positioning) rather than the viewport. It therefore follows
  * the content on scroll and auto-flips at viewport edges, while still appearing
@@ -112,14 +112,16 @@ const styles = stylex.create({
     WebkitUserSelect: 'none',
     userSelect: 'none',
   },
-  // Zero-size anchor placed at the cursor point within the trigger. The menu
-  // is anchored to this element, so it sits under the cursor yet is positioned
+  // 1px anchor placed at the cursor point within the trigger. The menu is
+  // anchored to this element, so it sits under the cursor yet is positioned
   // relative to the trigger's context — it follows the content on scroll and
-  // the browser can auto-flip it against the viewport edges.
+  // the browser can auto-flip it against the viewport edges. It owns a box
+  // because WebKit counts an empty anchor box as clipped, and the default
+  // `position-visibility: anchors-visible` then hides the menu.
   cursorAnchor: {
     position: 'absolute',
-    width: 0,
-    height: 0,
+    width: '1px',
+    height: '1px',
     pointerEvents: 'none',
   },
   menu: {
@@ -185,6 +187,17 @@ const styles = stylex.create({
   },
 });
 
+/**
+ * Keeps the 1px cursor anchor inside the trigger along one axis. A point in
+ * the trigger's last pixel (Shift+F10 opens on its bottom edge) steps back by
+ * that pixel: past the edge the anchor would add scrollable overflow, and a
+ * scroller whose edge meets the trigger's would clip it and hide the menu.
+ * Any other point, inside the trigger or not, stays where it is.
+ */
+function keepAnchorInside(offset: number, size: number): number {
+  return offset > size - 1 && offset <= size ? Math.max(size - 1, 0) : offset;
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -324,7 +337,7 @@ export function ContextMenu({
 
   const menuId = useId();
   // Cursor point in the trigger's local coordinate space (offset from the
-  // trigger's top-left, in-flow). Stored here and written to the zero-size
+  // trigger's top-left, in-flow). Stored here and written to the cursor
   // anchor element so the menu is positioned relative to the trigger context
   // — it scrolls with the content instead of sitting at a fixed viewport point.
   const positionRef = useRef({x: 0, y: 0});
@@ -520,18 +533,21 @@ export function ContextMenu({
     [listNavKeyDown, closeMenu, typeahead, ownsEvent],
   );
 
-  // Place the zero-size cursor anchor at a point in the trigger's local
+  // Place the 1px cursor anchor at a point in the trigger's local
   // coordinate space and open the menu. Positioning the anchor inside the
   // trigger (rather than storing viewport coordinates on the menu itself) is
   // what makes the menu context-relative: it scrolls with the content and the
   // browser auto-flips it against the viewport edges via CSS anchor positioning.
   const openAtLocalPoint = useCallback(
     (localX: number, localY: number, focusEl: HTMLElement | null) => {
-      positionRef.current = {x: localX, y: localY};
+      const rect = triggerRef.current?.getBoundingClientRect();
+      const x = rect ? keepAnchorInside(localX, rect.width) : localX;
+      const y = rect ? keepAnchorInside(localY, rect.height) : localY;
+      positionRef.current = {x, y};
       const anchorEl = cursorAnchorRef.current;
       if (anchorEl) {
-        anchorEl.style.left = `${localX}px`;
-        anchorEl.style.top = `${localY}px`;
+        anchorEl.style.left = `${x}px`;
+        anchorEl.style.top = `${y}px`;
       }
       // Remember the element focused before opening so we can restore it on
       // close (Escape or outside-click), instead of dropping focus to <body>.

package/src/ContextMenu/__tests__/ContextMenuCursorAnchor.a11y.browser.spec.ts

@@ -0,0 +1,153 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ContextMenuCursorAnchor.a11y.browser.spec.ts
+ * @input The built "Inside a scroll container" ContextMenu story and real
+ *   Chromium/WebKit layout and paint
+ * @output Browser evidence that the menu paints at its cursor anchor inside a
+ *   scroll container, hides while the container clips that anchor, and that
+ *   the anchor adds no scrollable overflow
+ * @position Cross-browser proof; jsdom has no layout, anchor positioning or
+ *   paint.
+ *
+ * The menu is anchored to a box at the pointer. The initial
+ * `position-visibility: anchors-visible` hides an anchored box whose anchor
+ * is clipped, and WebKit counts an empty anchor box inside a scroll container
+ * as clipped. Whether the menu painted is read from pixels: WebKit still
+ * hit-tests, and reports as visible, a box that rule hides.
+ */
+
+import {expect, test, type Locator, type Page} from '@playwright/test';
+import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+/** Mounts the story with the trigger scrolled fully into the box. */
+async function mount(
+  page: Page,
+): Promise<{trigger: Locator; scroller: Locator}> {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-contextmenu--in-scroll-container&viewMode=story`,
+  );
+  await holdMotionStill(page);
+  const scroller = page.getByTestId('context-menu-scroller');
+  // The trigger is the box's last child: at the end of the scroll its bottom
+  // edge is the box's bottom edge.
+  await scroller.evaluate(el => {
+    el.scrollTop = el.scrollHeight;
+  });
+  return {trigger: page.getByText('Right-click this area'), scroller};
+}
+
+/** Right-clicks the trigger 40px in and 30px down; returns that point. */
+async function rightClick(
+  page: Page,
+  trigger: Locator,
+): Promise<{x: number; y: number}> {
+  const box = await trigger.boundingBox();
+  const point = {
+    x: Math.round(box?.x ?? 0) + 40,
+    y: Math.round(box?.y ?? 0) + 30,
+  };
+  await page.mouse.click(point.x, point.y, {button: 'right'});
+  return point;
+}
+
+/** Whether the open menu is on screen: hiding it must change the pixels. */
+async function menuPainted(page: Page): Promise<boolean> {
+  const layer = page.locator('[popover]:has(> [role="menu"])');
+  const clip = await layer.boundingBox();
+  if (clip == null) {
+    return false;
+  }
+  const shown = await page.screenshot({clip});
+  await layer.evaluate(el => {
+    el.style.visibility = 'hidden';
+  });
+  const hidden = await page.screenshot({clip});
+  await layer.evaluate(el => {
+    el.style.visibility = '';
+  });
+  return !shown.equals(hidden);
+}
+
+test('a right-click inside a scroll container paints the menu at the pointer', async ({
+  page,
+}) => {
+  const {trigger} = await mount(page);
+  const point = await rightClick(page, trigger);
+  await expect(page.getByRole('menu')).toBeVisible();
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+
+  const anchor = await page
+    .locator('span[aria-hidden="true"][style*="anchor-name"]')
+    .boundingBox();
+  // The anchor owns a box, so WebKit does not count it as clipped.
+  expect(anchor).toMatchObject({width: 1, height: 1});
+  expect(anchor?.x).toBeCloseTo(point.x, 0);
+  expect(anchor?.y).toBeCloseTo(point.y, 0);
+});
+
+test('the menu hides while the box scrolls its anchor out of view, and returns with it', async ({
+  page,
+}) => {
+  const {trigger, scroller} = await mount(page);
+  await rightClick(page, trigger);
+  await expect(page.getByRole('menu')).toBeVisible();
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+
+  await scroller.evaluate(el => {
+    el.scrollTop -= el.clientHeight;
+  });
+  await expect(page.getByRole('menu')).toBeAttached();
+  await expect.poll(async () => menuPainted(page)).toBe(false);
+
+  await scroller.evaluate(el => {
+    el.scrollTop = el.scrollHeight;
+  });
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+});
+
+test('a keyboard open on the bottom edge paints and adds no scrollable overflow', async ({
+  page,
+}) => {
+  const {trigger, scroller} = await mount(page);
+  const scrollHeight = await scroller.evaluate(el => el.scrollHeight);
+  // Several browsers report Shift+F10 as a contextmenu at (0, 0), which
+  // anchors the menu to the trigger's bottom edge, here the box's own edge.
+  await trigger.evaluate(el => {
+    el.dispatchEvent(
+      new MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        clientX: 0,
+        clientY: 0,
+        detail: 0,
+      }),
+    );
+  });
+  await expect(page.getByRole('menu')).toBeVisible();
+  const anchor = await page
+    .locator('span[aria-hidden="true"][style*="anchor-name"]')
+    .boundingBox();
+  const area = await trigger.boundingBox();
+  expect((anchor?.y ?? 0) + (anchor?.height ?? 0)).toBeCloseTo(
+    (area?.y ?? 0) + (area?.height ?? 0),
+    0,
+  );
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+  expect(await scroller.evaluate(el => el.scrollHeight)).toBe(scrollHeight);
+});

package/src/Dialog/Dialog.tsx

@@ -70,38 +70,10 @@ import {DialogContext} from './DialogContext';
 import {themeProps} from '../utils/themeProps';
 import type {DialogVariantMap} from './index';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {
-  getInteractionModality,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
+import {focusForLastInput} from '../utils/focusReturn';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
-/**
- * Move focus programmatically so its ring follows the last input. Dialog does
- * not render the element that opened it or the consumer's autofocus target, so
- * the browser's focus option is the one way to reach them.
- */
-function focusForLastInput(element: HTMLElement): void {
-  // A text-entry field paints its own focus treatment to show where typing
-  // goes, and an extra blur there can run validation or mark it touched.
-  const isTextEntry =
-    element instanceof HTMLInputElement ||
-    element instanceof HTMLTextAreaElement ||
-    element instanceof HTMLSelectElement ||
-    element.isContentEditable;
-  if (isTextEntry || getInteractionModality() !== 'pointer') {
-    element.focus();
-    return;
-  }
-  // Focusing the element that already has focus does nothing, so a ring the
-  // browser already drew would stay. WebKit draws one when showModal() or its
-  // native close moves focus itself, so clear that focus first.
-  if (element.matches(':focus-visible')) {
-    element.blur();
-  }
-  element.focus({focusVisible: false});
-}
-
 /**
  * Calculate a directional translate offset for dialog entry animation.
  * Returns a normalized vector from the trigger element toward the viewport

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -9,7 +9,7 @@
  * SYNC: When DropdownMenu.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {readFileSync} from 'node:fs';
 import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -3040,6 +3040,102 @@ describe('DropdownMenu focus return after a pointer pick', () => {
       ),
     );
   });
+
+  it("asks the browser for no ring on the design system's Button too", async () => {
+    const user = userEvent.setup();
+    const trigger = renderMenu();
+    await user.click(trigger);
+    const focus = vi.spyOn(trigger, 'focus');
+    await user.click(item('Edit'));
+    expect(trigger).toHaveFocus();
+    expect(focus.mock.calls.at(-1)).toEqual([
+      {preventScroll: true, focusVisible: false},
+    ]);
+  });
+
+  describe('a trigger the caller renders', () => {
+    // The style that keeps the ring off the design system's Button cannot
+    // reach a caller's control, so the focus move itself has to: after
+    // pointer input the browser is asked not to match `:focus-visible`, which
+    // it otherwise does on the returned focus (Chromium after a mouse pick,
+    // WebKit after a touch).
+    function renderCustomMenu() {
+      render(
+        <DropdownMenu
+          renderTrigger={props => (
+            <button type="button" {...props}>
+              More
+            </button>
+          )}>
+          <DropdownMenuItem label="Edit" onClick={() => {}} />
+          <DropdownMenuItem label="Delete" onClick={() => {}} />
+        </DropdownMenu>,
+      );
+      return screen.getByRole('button', {name: 'More'});
+    }
+
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
+    it('returns focus after a pointer pick with the browser asked for no ring', async () => {
+      const user = userEvent.setup();
+      const trigger = renderCustomMenu();
+      await user.click(trigger);
+      const focus = vi.spyOn(trigger, 'focus');
+      await user.click(item('Edit'));
+      expect(trigger).toHaveFocus();
+      expect(focus.mock.calls.at(-1)).toEqual([
+        {preventScroll: true, focusVisible: false},
+      ]);
+    });
+
+    it('returns focus after a keyboard pick with the ring left to the browser', async () => {
+      const user = userEvent.setup();
+      const trigger = renderCustomMenu();
+      trigger.focus();
+      await user.keyboard('{ArrowDown}');
+      await waitFor(() => expect(item('Edit')).toHaveFocus());
+      const focus = vi.spyOn(trigger, 'focus');
+      await user.keyboard('{Enter}');
+      await waitFor(() => expect(trigger).toHaveFocus());
+      expect(focus.mock.calls.at(-1)).toEqual([{preventScroll: true}]);
+    });
+
+    it('clears a ring the browser already drew before refocusing after a pointer pick', async () => {
+      const user = userEvent.setup();
+      const trigger = renderCustomMenu();
+      await user.click(trigger);
+      // WebKit's own popover focus restoration can focus the trigger, with a
+      // ring, before the menu moves focus, and focusing the focused element
+      // changes nothing.
+      const hidePopover = HTMLElement.prototype.hidePopover;
+      HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+        hidePopover.call(this);
+        trigger.focus();
+      });
+      const matches = HTMLElement.prototype.matches;
+      vi.spyOn(HTMLElement.prototype, 'matches').mockImplementation(function (
+        this: HTMLElement,
+        selector: string,
+      ) {
+        return selector === ':focus-visible'
+          ? this === trigger
+          : matches.call(this, selector);
+      });
+      const blur = vi.spyOn(trigger, 'blur');
+      const focus = vi.spyOn(trigger, 'focus');
+      await user.click(item('Edit'));
+      expect(blur).toHaveBeenCalledTimes(1);
+      expect(focus.mock.calls.at(-1)).toEqual([
+        {preventScroll: true, focusVisible: false},
+      ]);
+      expect(blur.mock.invocationCallOrder[0]).toBeLessThan(
+        focus.mock.invocationCallOrder.at(-1) ?? 0,
+      );
+      expect(trigger).toHaveFocus();
+    });
+  });
 });
 
 describe('DropdownMenuItem href', () => {

package/src/DropdownMenu/DropdownMenu.tsx

@@ -68,6 +68,7 @@ import {useMenuPress} from '../hooks/useMenuPress';
 import type {MenuPressPointerType} from '../hooks/menuPressGesture';
 import {useTypeahead} from '../hooks/useTypeahead';
 import {useFocusReturnVisibility} from '../hooks/useFocusReturnVisibility';
+import {focusForLastInput} from '../utils/focusReturn';
 import {useMenuOverflow} from './useMenuOverflow';
 import {MenuRegionsContext} from './menuRegionsContext';
 import {getFocusableElements} from '../hooks/useFocusTrap';
@@ -932,7 +933,12 @@ function DropdownMenuPopover({
       return;
     }
     prepareFocusReturn();
-    trigger.focus({preventScroll: true});
+    // After pointer input the trigger takes focus without the focus-visible
+    // ring (`component:DropdownMenu/DEC-1`). The style the helper above adds
+    // reaches only the design system's own Button; the browser's focus option
+    // also reaches a control the caller renders, which the browser would
+    // otherwise ring (Chromium after a mouse pick, WebKit after a touch).
+    focusForLastInput(trigger, {preventScroll: true});
   }, [isControlled, onOpenChange, prepareFocusReturn]);
 
   // Defer item focus until the layer has committed open, so focus restore
@@ -1432,8 +1438,9 @@ function DropdownMenuPopover({
     onPointerDown: menuPress.triggerProps.onPointerDown,
     onContextMenu: menuPress.triggerProps.onContextMenu,
     onKeyDown: handleButtonKeyDown,
-    // The popover's focus-return hook is a separate change; until it lands
-    // the control's focus needs no bookkeeping here.
+    // The caller's control paints its own ring, and the menu's focus return
+    // keeps the browser from drawing one after pointer input (see
+    // handleLayerHide), so its focus needs no bookkeeping here.
     onFocus: () => {},
     'aria-haspopup': 'menu',
     'aria-expanded': isOpen,