@astryxdesign/core 0.7.5 → 0.7.6-canary.5cd7a15

package/src/Drawer/DrawerHeader.spec.md

@@ -0,0 +1,181 @@
+---
+schema_version: 3
+template_version: 7
+kind: component
+id: component:DrawerHeader
+authority: current
+archive_reason: null
+superseded_by: null
+approved_by: cixzhang
+approved_at: 2026-10-30
+owners: [cixzhang, imdreamrunner]
+review_triggers: [public-api, behavior, layout, theming, accessibility]
+verified_by:
+  [
+    packages/core/src/Drawer/DrawerHeader.test.tsx,
+    apps/storybook/stories/DrawerHeader.stories.tsx,
+    scripts/check-knowledge.mjs,
+  ]
+modules: []
+families: [family:layout-regions]
+design_specs: []
+architecture:
+  [architecture:component-theming-surface, architecture:container-padding]
+contributing: []
+system_specs: []
+---
+
+# DrawerHeader component contract
+
+## Contract at a glance
+
+| Area                    | Contract                                                                                                                                                                                        |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Public contract         | `DrawerHeader` with `title`, `subtitle`, `onOpenChange`, `startContent`, `endContent`, `endContentEdgeCompensation` (`inline`, `block`, `all`), and `hasDivider`; five `drawer-header` targets. |
+| Behavior                | A Layout header row for a Drawer: optional start content, an h2 title with optional subtitle, optional end content, and a close button only when `onOpenChange` is given.                       |
+| End-user impact         | Users see the drawer's title and, when the caller provides one, a named close button; focus is not moved when the header mounts.                                                                |
+| Builder impact          | None.                                                                                                                                                                                           |
+| Compatibility/readiness | Records shipped behavior; no public change.                                                                                                                                                     |
+| Review checks           | Reject a close button rendered without `onOpenChange`, a header that names the Drawer or moves focus on mount, or a title that is not an h2.                                                    |
+| Governing rules         | `component:Drawer` (the panel and naming); `family:layout-regions`; `architecture:component-theming-surface`.                                                                                   |
+
+This table is a review projection; the body below is authoritative.
+
+## Intent
+
+DrawerHeader is the optional title row a caller composes in a Drawer's Layout
+header slot. It owns the row's parts, its close button, and its targets.
+Consumer usage lives in `DrawerHeader.doc.mjs`.
+
+## Compatibility and migration
+
+- Released default preserved: `yes`
+- Compatibility class: records shipped behavior; no public change
+- Controlled/uncontrolled behavior: the close button calls the caller's
+  `onOpenChange(false)` and owns no state
+- Migration decision: none
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- The header row, its slots, title semantics, close button, end-content edge
+  compensation, and five targets (FR1–FR5).
+
+**Does not own / non-goals**
+
+- The Drawer's name, focus entry, and open state — owned by `component:Drawer`.
+- The header region's padding, divider default, and place in the Layout — owned
+  by `family:layout-regions` through `LayoutHeader`.
+- The close Button — owned by `component:Button`.
+
+## Public concepts
+
+| Concept                  | Closed values or states           | Meaning                                                                                       | Availability by variant/orientation/state | Default                                              | Owner                    | Stability | Invalid-value behavior           |
+| ------------------------ | --------------------------------- | --------------------------------------------------------------------------------------------- | ----------------------------------------- | ---------------------------------------------------- | ------------------------ | --------- | -------------------------------- |
+| End-content compensation | `inline`, `block`, `all`, omitted | Which edges of the end slot pull outward to align a trailing control with the container edge. | End slot.                                 | Both axes when `onOpenChange` is set, none otherwise | `component:DrawerHeader` | Stable    | TypeScript rejects other values. |
+
+## Behavioral and layout contract
+
+| ID  | Invariant                                                                                                                                                                                                                                 | Basis                    |
+| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| FR1 | DrawerHeader renders inside a LayoutHeader that receives `ref`, `hasDivider`, `xstyle`, `className`, `style`, and other DOM props. Its row carries `drawer-header` and shows, in order, start content, the title block, and the end slot. | Current source and tests |
+| FR2 | The title renders as an h2; a renderable `subtitle` (including `0`) renders below it as secondary small body text, and an empty one renders nothing. Start and end slots render when their content is renderable, including `0`.          | Current source and tests |
+| FR3 | With `onOpenChange`, the end slot ends with an icon-only ghost Button named and tooltipped by `@astryx.dialog.close` that calls `onOpenChange(false)`; without it there is no close button.                                               | Current source and tests |
+| FR4 | The end slot pulls outward by `--spacing-2` on the block axis, the inline-end edge, or both, per `endContentEdgeCompensation`; when omitted, both apply only if there is a close button.                                                  | Current source           |
+| FR5 | The start slot, title block, end slot, and close glyph carry `drawer-header-start-content`, `drawer-header-title-block`, `drawer-header-end-content`, and `drawer-header-close-icon`.                                                     | Current source and tests |
+| FR6 | Mounting the header does not move focus, and the header does not name the Drawer.                                                                                                                                                         | Current source and tests |
+
+### Allowed variation
+
+- **AV1 — Slots.** Start, end, and subtitle content vary or are absent.
+
+### Representative states
+
+| State               | Required invariant                                | Allowed variation |
+| ------------------- | ------------------------------------------------- | ----------------- |
+| Title only          | h2 title; no close button.                        | —                 |
+| With `onOpenChange` | Named close button at the end; edges compensated. | End content.      |
+| Start and end slots | Order: start, title block, end.                   | Content.          |
+
+### Transformation and precedence order
+
+- **ORD1 — Compensation.** `endContentEdgeCompensation`, then the close-button
+  default (FR4).
+
+### Performance and resources
+
+- No resource rule.
+
+## Accessibility contract
+
+- **AR1 — Heading.** The title is an h2.
+- **AR2 — Close name.** FR3's translated name and tooltip.
+- **AR3 — Focus.** FR6.
+
+## Design relationships
+
+| Anatomy or state | Design requirement                            | Representation authority       | Hierarchy role | Component contract |
+| ---------------- | --------------------------------------------- | ------------------------------ | -------------- | ------------------ |
+| Header row       | Start, title block, end in one row.           | Current source and public docs | Supporting     | FR1                |
+| Start content    | Leading caller content.                       | Current source and public docs | Supporting     | FR2, FR5           |
+| Title block      | Title and optional subtitle.                  | Current source and public docs | Prominent      | FR2, FR5           |
+| End content      | Trailing caller content and the close button. | Current source and public docs | Supporting     | FR3–FR5            |
+| Close icon       | Close glyph inside the button.                | Current source and public docs | Supporting     | FR3, FR5           |
+
+### Theming anatomy
+
+<!-- anatomy-theming:v1 -->
+
+```json
+{
+  "Header row": {"target": "drawer-header"},
+  "Start content": {"target": "drawer-header-start-content"},
+  "Title block": {"target": "drawer-header-title-block"},
+  "End content": {"target": "drawer-header-end-content"},
+  "Close icon": {"target": "drawer-header-close-icon"}
+}
+```
+
+## Family and system relationships
+
+- `component:Drawer` hosts the header in its Layout and owns naming and focus.
+- `family:layout-regions` owns the header region it renders into.
+
+## Verification map
+
+| Contract            | Verification                                 | Representative states                    | Mutation or failure expectation                    | Audit section                      |
+| ------------------- | -------------------------------------------- | ---------------------------------------- | -------------------------------------------------- | ---------------------------------- |
+| FR1, FR2, AR1       | `DrawerHeader.test.tsx` title and slot tests | Title, subtitle, `0` values, empty slots | Wrong heading level or dropped content fails.      | `audit:DrawerHeader/anatomy`       |
+| FR3, AR2            | `DrawerHeader.test.tsx` close-button tests   | With and without `onOpenChange`          | A button without a callback, or no name, fails.    | `audit:DrawerHeader/accessibility` |
+| FR5                 | `DrawerHeader.test.tsx` theming target test  | All slots                                | A missing target fails.                            | `audit:DrawerHeader/theming`       |
+| FR6, AR3            | `DrawerHeader.test.tsx` focus test           | Mount                                    | Focus moved on mount fails.                        | `audit:DrawerHeader/accessibility` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                | Consumer anatomy and current targets     | Missing, extra, or stale mappings fail validation. | `audit:DrawerHeader/theming`       |
+
+FR4 is read from source; no focused test checks it yet.
+
+Read from source, with no focused test yet:
+
+- FR1: `ref`, `hasDivider`, `xstyle`, `className`, `style`, and other DOM
+  props reaching the LayoutHeader.
+- FR3: the close button's tooltip.
+- FR4: the end slot's edge compensation.
+- FR6: the header not naming the Drawer.
+
+## Decision log
+
+No component-local decision is recorded.
+
+## Open questions
+
+- How do `endContentEdgeCompensation`'s `inline`, `block`, and `all` axis
+  values map onto `endContentEdge` treatment values
+  (`architecture:container-padding`), and when does the old prop enter its
+  compatibility window? Today the prop stays supported as released.
+
+## Content boundary
+
+This file does not duplicate consumer prop tables, examples, or Drawer
+behavior. It links to their owners.

package/src/Drawer/__tests__/DrawerNonModalPageScroll.a11y.chromium.spec.ts

@@ -0,0 +1,267 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file DrawerNonModalPageScroll.a11y.chromium.spec.ts
+ * @input The built Drawer stories "Row Inspector" (non-modal) and "Showcase"
+ *   (modal), real Chromium touch input (CDP `Input.dispatchTouchEvent`) in a
+ *   phone context
+ * @output Browser evidence that under a finger the page beside an open
+ *   non-modal drawer still scrolls, because the panel is no scroll container
+ *   whose overscroll containment could hold the drag, while a modal drawer
+ *   still holds the page behind its scrim. With `overflow: hidden` on the
+ *   panel, Chromium held every such drag while the drawer was open, whether it
+ *   had opened from code (a selection, a deep link, an assistive
+ *   technology's click) or from a tap.
+ * @position Chromium proof for Drawer.tsx's `overflow: clip`; the declaration
+ *   itself is pinned in Drawer.test.tsx
+ *
+ * Each check plays one drag, proves the page received it (a capture-phase
+ * touch probe), and measures the page by the visual viewport's place in the
+ * document, so a pan that moves only the visual viewport counts too.
+ */
+
+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();
+});
+
+test.use({
+  hasTouch: true,
+  isMobile: true,
+  viewport: {width: 402, height: 714},
+  deviceScaleFactor: 1,
+});
+
+/** In the strip the drawer leaves free on the phone. */
+const STRIP_X = 20;
+
+async function frames(page: Page, count = 2): Promise<void> {
+  await page.evaluate(async n => {
+    for (let i = 0; i < n; i++) {
+      await new Promise(resolve => requestAnimationFrame(resolve));
+    }
+  }, count);
+}
+
+const sleep = async (ms: number) =>
+  new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
+
+/**
+ * A finger dragging up the strip, 350 px in 200 ms at 60 Hz, then resting
+ * 150 ms before it lifts so no fling outlives the pan. Paced in real time, as
+ * a finger is: each event goes out at its own time, stamped with it.
+ */
+async function dragUp(page: Page): Promise<void> {
+  const cdp = await page.context().newCDPSession(page);
+  const from = 600;
+  const to = 250;
+  const steps = 12;
+  const at = (y: number) => [
+    {x: STRIP_X, y, id: 0, radiusX: 1, radiusY: 1, force: 1},
+  ];
+  type Point = {
+    x: number;
+    y: number;
+    id: number;
+    radiusX: number;
+    radiusY: number;
+    force: number;
+  };
+  const send = async (
+    type: 'touchStart' | 'touchMove' | 'touchEnd',
+    touchPoints: Point[],
+  ) =>
+    cdp.send('Input.dispatchTouchEvent', {
+      type,
+      touchPoints,
+      timestamp: Date.now() / 1000,
+    });
+  await send('touchStart', at(from));
+  for (let i = 1; i <= steps; i++) {
+    await sleep(200 / steps);
+    await send('touchMove', at(from + ((to - from) * i) / steps));
+  }
+  await sleep(150);
+  await send('touchEnd', []);
+  await cdp.detach();
+}
+
+/**
+ * Records every touch the page receives, and whether the browser took one to
+ * pan something (a `pointercancel`): a window capture listener added before
+ * the page's own scripts. Install it before opening the story.
+ */
+async function installTouchProbe(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    const seen: string[] = [];
+    (window as unknown as {__touchProbe: string[]}).__touchProbe = seen;
+    for (const type of [
+      'touchstart',
+      'touchmove',
+      'touchend',
+      'touchcancel',
+      'pointercancel',
+    ]) {
+      window.addEventListener(type, () => seen.push(type), {
+        capture: true,
+        passive: true,
+      });
+    }
+  });
+}
+
+/**
+ * Plays one drag up the strip and returns what the page received: its touch
+ * events, and whether the browser took the touch to pan something. A drag the
+ * page never received shows here, so it cannot pass as one that scrolled
+ * nothing.
+ */
+async function playDrag(
+  page: Page,
+): Promise<{received: string[]; panned: boolean}> {
+  const take = async () =>
+    page.evaluate(() =>
+      (window as unknown as {__touchProbe: string[]}).__touchProbe.splice(0),
+    );
+  await take();
+  await dragUp(page);
+  await frames(page, 4);
+  const seen = await take();
+  return {
+    received: seen.filter(type => type.startsWith('touch')),
+    panned: seen.includes('pointercancel'),
+  };
+}
+
+/** The whole drag reached the page: a touchstart, its moves and its touchend. */
+function expectDelivered(played: {received: string[]}): void {
+  expect(played.received[0], 'the drag reached the page').toBe('touchstart');
+  expect(played.received).toContain('touchmove');
+  expect(played.received.at(-1)).toBe('touchend');
+}
+
+/**
+ * Where the visual viewport is in the document. A page wider than the phone
+ * (main's story stage) lets a pan first move the visual viewport inside the
+ * layout viewport, which `window.scrollY` does not report.
+ */
+const pageTop = async (page: Page) =>
+  page.evaluate(() => {
+    if (window.visualViewport == null) {
+      throw new Error('the page has no visual viewport');
+    }
+    return window.visualViewport.pageTop;
+  });
+
+/**
+ * Opens the story on a page taller than the screen, checks that a drag
+ * scrolls it, then opens the drawer (with a tap, or from code: a click with no
+ * input behind it) and waits until it is in.
+ */
+async function openOnTallPage(
+  page: Page,
+  story: string,
+  opener: string,
+  how: 'tap' | 'code' = 'tap',
+) {
+  await installTouchProbe(page);
+  await page.goto(`${storybook.origin}/iframe.html?id=${story}&viewMode=story`);
+  const button = page.getByRole('button', {name: opener});
+  await expect(button).toBeVisible();
+  await page.evaluate(() => {
+    const spacer = document.createElement('div');
+    spacer.style.height = '300vh';
+    document.body.append(spacer);
+  });
+  const before = await playDrag(page);
+  expectDelivered(before);
+  expect(before.panned, 'the browser took the drag to scroll').toBe(true);
+  expect(
+    await pageTop(page),
+    'the page scrolls before the drawer opens',
+  ).toBeGreaterThan(0);
+  await button.evaluate(element => element.scrollIntoView({block: 'center'}));
+  await frames(page);
+
+  if (how === 'tap') {
+    await button.tap();
+  } else {
+    await button.evaluate(element => (element as HTMLElement).click());
+  }
+  const drawer = page.locator('dialog[open], dialog:popover-open');
+  await expect(drawer).toHaveCount(1);
+  await drawer.evaluate(async element => {
+    await Promise.all(
+      element.getAnimations().map(async animation =>
+        animation.finished.catch((error: unknown) => {
+          // A canceled animation's `finished` rejects with an AbortError:
+          // it ended. Anything else is a failure, and it surfaces.
+          if (!(error instanceof DOMException && error.name === 'AbortError')) {
+            throw error;
+          }
+        }),
+      ),
+    );
+  });
+  await frames(page);
+}
+
+for (const how of ['code', 'tap'] as const) {
+  test(`a drag on the page beside a non-modal drawer opened from ${how === 'tap' ? 'a tap' : 'code'} scrolls the page`, async ({
+    page,
+  }) => {
+    await openOnTallPage(
+      page,
+      'core-drawer--row-inspector',
+      'Open drawer',
+      how,
+    );
+
+    // Measured from where the open left the page: a tap scrolls the opener
+    // into view first.
+    const start = await pageTop(page);
+    const played = await playDrag(page);
+    expectDelivered(played);
+    expect(played.panned, 'the browser took the drag to scroll').toBe(true);
+    expect(await pageTop(page)).toBeGreaterThan(start);
+  });
+}
+
+test('a modal drawer still holds the page behind its scrim', async ({page}) => {
+  await openOnTallPage(page, 'core-drawer--showcase', 'Open inspector');
+
+  // Measured from where the open left the page, whatever the scroll lock
+  // reports there.
+  const start = await pageTop(page);
+  expectDelivered(await playDrag(page));
+  expect(await pageTop(page)).toBe(start);
+  await expect(
+    page.getByRole('dialog', {name: 'Deployment details'}),
+  ).toBeVisible();
+});
+
+test('the story fits the phone: the page does not scroll sideways', async ({
+  page,
+}) => {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-drawer--row-inspector&viewMode=story`,
+  );
+  await expect(page.getByRole('button', {name: 'Open drawer'})).toBeVisible();
+  expect(
+    await page.evaluate(() => document.documentElement.scrollWidth),
+  ).toBeLessThanOrEqual(402);
+});

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -127,6 +127,47 @@ describe('DropdownMenu', () => {
     ).not.toBeInTheDocument();
   });
 
+  it("forwards the button's ref object to the popover trigger", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(
+      <DropdownMenu
+        button={{label: 'Project actions', ref}}
+        items={[{label: 'Edit project', onClick: vi.fn()}]}
+      />,
+    );
+    expect(ref.current).toBe(
+      screen.getByRole('button', {name: /Project actions/}),
+    );
+  });
+
+  it("forwards the button's ref object to the bottom-sheet trigger", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(
+      <DropdownMenu
+        button={{label: 'Project actions', ref}}
+        presentation="bottom-sheet"
+        items={[{label: 'Edit project', onClick: vi.fn()}]}
+      />,
+    );
+    expect(ref.current).toBe(
+      screen.getByRole('button', {name: /Project actions/}),
+    );
+  });
+
+  it("forwards the button's callback ref to the bottom-sheet trigger", () => {
+    const ref = vi.fn();
+    render(
+      <DropdownMenu
+        button={{label: 'Project actions', ref}}
+        presentation="bottom-sheet"
+        items={[{label: 'Edit project', onClick: vi.fn()}]}
+      />,
+    );
+    expect(ref).toHaveBeenCalledWith(
+      screen.getByRole('button', {name: /Project actions/}),
+    );
+  });
+
   it('renders data-driven actions in a bottom sheet when requested', async () => {
     const user = userEvent.setup();
     const onEdit = vi.fn();

package/src/DropdownMenu/DropdownMenu.tsx

@@ -67,6 +67,7 @@ import {
   type DropdownMenuSurfaceValue,
 } from './DropdownMenuContext';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
+import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useListFocus} from '../hooks/useListFocus';
 import {useMenuPress} from '../hooks/useMenuPress';
 import type {MenuPressPointerType} from '../hooks/menuPressGesture';
@@ -621,6 +622,11 @@ function DropdownMenuBottomSheet({
   const button = buttonFromProps ?? {label: t(DEFAULT_BUTTON_I18N_KEY)};
   const backLabel = t('@astryx.dropdownMenu.back');
   const buttonRef = useRef<HTMLElement>(null);
+  // The caller's `button.ref` rides along with the sheet's own trigger ref.
+  const triggerRef = useMergedRefs<HTMLButtonElement>(
+    buttonRef as React.Ref<HTMLButtonElement>,
+    button.ref,
+  );
   const triggerId = useId();
   const sheetId = useId();
   const actionListRef = useRef<HTMLDivElement>(null);
@@ -806,7 +812,7 @@ function DropdownMenuBottomSheet({
       ) : (
         <Button
           {...button}
-          ref={buttonRef as React.Ref<HTMLButtonElement>}
+          ref={triggerRef}
           xstyle={[
             isOpen && styles.triggerOpen,
             button.xstyle,

package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx

@@ -647,6 +647,40 @@ describe('DropdownMenu data-driven submenus', () => {
     expect(onMove).toHaveBeenCalledWith('b');
   });
 
+  it('renders a submenu for an item with nested items inside a section', async () => {
+    const user = userEvent.setup();
+    const onWork = vi.fn();
+    render(
+      <DropdownMenu
+        button={{label: 'Share'}}
+        items={[
+          {
+            type: 'section',
+            title: 'Send',
+            items: [
+              {label: 'Copy link', onClick: () => {}},
+              {
+                label: 'Email',
+                items: [
+                  {label: 'Work', onClick: onWork},
+                  {label: 'Personal', onClick: () => {}},
+                ],
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: /Share/}));
+    const trigger = screen.getByRole('menuitem', {name: /Email/, hidden: true});
+    expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
+    await user.click(trigger);
+    await user.click(
+      await screen.findByRole('menuitem', {name: 'Work', hidden: true}),
+    );
+    expect(onWork).toHaveBeenCalled();
+  });
+
   it('keyboard-reaches an item positioned after a submenu row', async () => {
     // Regression: the submenu flyout renders inline inside the root menu, so
     // the root's item query swept in the (hidden) flyout items. Arrow nav then

package/src/DropdownMenu/MenuBottomSheetActionList.tsx

@@ -11,13 +11,14 @@
 
 import React, {useRef, type ReactElement} from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {Divider} from '../Divider';
-import {Heading} from '../Heading';
-import {Icon, renderIconSlot} from '../Icon';
-import {List, ListItem} from '../List';
+import {Divider} from '../Divider/Divider';
+import {Heading} from '../Heading/Heading';
+import {Icon, renderIconSlot} from '../Icon/Icon';
+import {List} from '../List/List';
+import {ListItem} from '../List/ListItem';
 import {useMenuPress} from '../hooks/useMenuPress';
 import {colorVars, spacingVars} from '../theme/tokens.stylex';
-import {rtlStyles} from '../utils';
+import {rtlStyles} from '../utils/rtlStyles';
 import {getInteractionModality} from '../utils/interactionModality';
 import type {DropdownMenuItemData, DropdownMenuOption} from './DropdownMenu';
 import {isModifiedClick} from './menuItemRoles';

package/src/DropdownMenu/__tests__/Menu.a11y.chromium.spec.ts

@@ -120,16 +120,28 @@ async function runState(
   });
 }
 
-test('every menu expectation is exercised by a DropdownMenu state', async ({
-  page,
-}) => {
-  const cdp = await page.context().newCDPSession(page);
+// Checking coverage runs every state again, which on a loaded runner nears
+// the per-test timeout as one test. It runs as one serial part per state,
+// sharing their results, then one check over all of them.
+test.describe('every menu expectation is exercised by a DropdownMenu state', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of MENU_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
+    test(`runs ${state.id}`, async ({page}) => {
+      const cdp = await page.context().newCDPSession(page);
+      results.push(await runState(page, cdp, state));
+    });
   }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(MENU_KNOWN_FAILURES, results)).toEqual([]);
+
+  test('no expectation is left unexercised', () => {
+    // Every part ran in this worker; this test alone proves nothing.
+    expect(results.map(result => result.state).sort()).toEqual(
+      MENU_BINDING_STATES.map(state => state.id).sort(),
+    );
+    expect(neverExercised(results)).toEqual([]);
+    expect(unmatchedKnownFailures(MENU_KNOWN_FAILURES, results)).toEqual([]);
+  });
 });
 
 for (const state of MENU_BINDING_STATES) {

package/src/DropdownMenu/__tests__/MenuButton.a11y.chromium.spec.ts

@@ -107,18 +107,30 @@ async function runState(
   });
 }
 
-test('every menu-button expectation is exercised by a DropdownMenu or MoreMenu state', async ({
-  page,
-}) => {
-  const cdp = await page.context().newCDPSession(page);
+// Checking coverage runs every state again, which on a loaded runner nears
+// the per-test timeout as one test. It runs as one serial part per state,
+// sharing their results, then one check over all of them.
+test.describe('every menu-button expectation is exercised by a DropdownMenu or MoreMenu state', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of MENU_BUTTON_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
+    test(`runs ${state.id}`, async ({page}) => {
+      const cdp = await page.context().newCDPSession(page);
+      results.push(await runState(page, cdp, state));
+    });
   }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(MENU_BUTTON_KNOWN_FAILURES, results)).toEqual(
-    [],
-  );
+
+  test('no expectation is left unexercised', () => {
+    // Every part ran in this worker; this test alone proves nothing.
+    expect(results.map(result => result.state).sort()).toEqual(
+      MENU_BUTTON_BINDING_STATES.map(state => state.id).sort(),
+    );
+    expect(neverExercised(results)).toEqual([]);
+    expect(unmatchedKnownFailures(MENU_BUTTON_KNOWN_FAILURES, results)).toEqual(
+      [],
+    );
+  });
 });
 
 for (const state of MENU_BUTTON_BINDING_STATES) {