@astryxdesign/core 0.7.2 → 0.7.3-canary.02f5fe4

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

@@ -0,0 +1,366 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file DropdownMenuItemAudit.a11y.chromium.spec.ts
+ * @input Exact-head DropdownMenuItem story across states, themes, direction, and viewport widths
+ * @output Screenshots and fail-closed sensor receipts for the DropdownMenuItem component audit
+ * @position Component-owned Night Watch browser evidence; CI runs it only for a DropdownMenuItem audit pull request
+ */
+
+import {createHash} from 'node:crypto';
+import {execFileSync} from 'node:child_process';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import {expect, test, type Page} from '@playwright/test';
+import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+const OUTPUT = path.resolve('dropdown-menu-item-audit-evidence');
+const STORY_ID = 'core-dropdownmenuitem--item-states';
+const WIDE = {width: 1024, height: 768};
+const NARROW = {width: 320, height: 720};
+
+type Mode = 'light' | 'dark';
+type Direction = 'ltr' | 'rtl';
+type Theme = 'neutral' | 'butter';
+type Interaction = 'rest' | 'focus' | 'hover';
+type AuditCase = {
+  key: string;
+  mode: Mode;
+  direction: Direction;
+  theme: Theme;
+  interaction: Interaction;
+  viewport: {width: number; height: number};
+};
+
+const cases: AuditCase[] = [
+  {
+    key: 'neutral-light',
+    mode: 'light',
+    direction: 'ltr',
+    theme: 'neutral',
+    interaction: 'rest',
+    viewport: WIDE,
+  },
+  {
+    key: 'neutral-dark',
+    mode: 'dark',
+    direction: 'ltr',
+    theme: 'neutral',
+    interaction: 'rest',
+    viewport: WIDE,
+  },
+  {
+    key: 'focus-light',
+    mode: 'light',
+    direction: 'ltr',
+    theme: 'neutral',
+    interaction: 'focus',
+    viewport: WIDE,
+  },
+  {
+    key: 'focus-dark',
+    mode: 'dark',
+    direction: 'ltr',
+    theme: 'neutral',
+    interaction: 'focus',
+    viewport: WIDE,
+  },
+  {
+    key: 'hover-light',
+    mode: 'light',
+    direction: 'ltr',
+    theme: 'neutral',
+    interaction: 'hover',
+    viewport: WIDE,
+  },
+  {
+    key: 'hover-dark',
+    mode: 'dark',
+    direction: 'ltr',
+    theme: 'neutral',
+    interaction: 'hover',
+    viewport: WIDE,
+  },
+  {
+    key: 'butter-light',
+    mode: 'light',
+    direction: 'ltr',
+    theme: 'butter',
+    interaction: 'rest',
+    viewport: WIDE,
+  },
+  {
+    key: 'butter-dark',
+    mode: 'dark',
+    direction: 'ltr',
+    theme: 'butter',
+    interaction: 'rest',
+    viewport: WIDE,
+  },
+  {
+    key: 'rtl-light',
+    mode: 'light',
+    direction: 'rtl',
+    theme: 'neutral',
+    interaction: 'rest',
+    viewport: WIDE,
+  },
+  {
+    key: 'rtl-dark',
+    mode: 'dark',
+    direction: 'rtl',
+    theme: 'neutral',
+    interaction: 'rest',
+    viewport: WIDE,
+  },
+  {
+    key: 'narrow-light',
+    mode: 'light',
+    direction: 'ltr',
+    theme: 'neutral',
+    interaction: 'rest',
+    viewport: NARROW,
+  },
+  {
+    key: 'narrow-dark',
+    mode: 'dark',
+    direction: 'ltr',
+    theme: 'neutral',
+    interaction: 'rest',
+    viewport: NARROW,
+  },
+];
+
+test.describe.configure({mode: 'serial', retries: 0});
+let server: StaticServer;
+let checkoutSha: string;
+let storybookSha: string;
+
+function storyUrl(item: AuditCase) {
+  return `${server.origin}/iframe.html?id=${STORY_ID}&viewMode=story&globals=colorMode:${item.mode};astryxTheme:${item.theme};direction:${item.direction}`;
+}
+
+async function settle(page: Page) {
+  await holdMotionStill(page);
+  await page.evaluate(async () => document.fonts.ready);
+  await page.waitForTimeout(40);
+}
+
+test.beforeAll(async () => {
+  fs.rmSync(OUTPUT, {recursive: true, force: true});
+  fs.mkdirSync(OUTPUT, {recursive: true});
+  checkoutSha = execFileSync('git', ['rev-parse', 'HEAD'], {
+    encoding: 'utf8',
+  }).trim();
+  const expected = process.env.ASTRYX_HEAD_SHA;
+  if (expected && expected !== checkoutSha) {
+    throw new Error(
+      `checkout ${checkoutSha} does not match expected head ${expected}`,
+    );
+  }
+  server = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+  const response = await fetch(`${server.origin}/astryx-build-sha.txt`);
+  if (!response.ok) {
+    throw new Error(`Storybook build has no SHA stamp (${response.status})`);
+  }
+  storybookSha = (await response.text()).trim();
+  if (storybookSha !== checkoutSha) {
+    throw new Error(
+      `Storybook ${storybookSha} does not match checkout ${checkoutSha}`,
+    );
+  }
+});
+
+test.afterAll(async () => {
+  await server?.close();
+});
+
+for (const item of cases) {
+  test(item.key, async ({browser}) => {
+    const context = await browser.newContext({
+      viewport: item.viewport,
+      colorScheme: item.mode,
+      reducedMotion: 'reduce',
+    });
+    const page = await context.newPage();
+    const pageErrors: string[] = [];
+    page.on('pageerror', error => pageErrors.push(String(error)));
+    await page.goto(storyUrl(item), {waitUntil: 'load'});
+    await page.locator('#storybook-root').waitFor();
+
+    const menu = page.getByRole('menu').last();
+    await expect(menu).toBeVisible();
+    const rows = menu.getByRole('menuitem');
+    await expect(rows).toHaveCount(5);
+    const defaultRow = page.getByTestId('default-row');
+    const supportingRow = page.getByTestId('supporting-row');
+    const destructiveRow = page.getByTestId('destructive-row');
+    const disabledRow = page.getByTestId('disabled-row');
+    const linkRow = page.getByTestId('link-row');
+    await expect(disabledRow).toHaveAttribute('aria-disabled', 'true');
+    await expect(destructiveRow).toHaveAttribute('data-variant', 'destructive');
+    await expect(linkRow).toHaveAttribute('href', '/settings');
+    await expect(linkRow).toHaveAttribute('role', 'menuitem');
+    await expect(menu.locator('button, [role="button"]')).toHaveCount(0);
+
+    if (item.interaction === 'focus') {
+      await defaultRow.focus();
+      await expect(defaultRow).toBeFocused();
+    } else if (item.interaction === 'hover') {
+      await supportingRow.hover();
+    }
+    await settle(page);
+
+    const observed = await menu.evaluate(element => {
+      const currentRows = Array.from(
+        element.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+      );
+      const describe = (row: HTMLElement | undefined) => {
+        if (!row) {
+          return null;
+        }
+        const style = getComputedStyle(row);
+        const box = row.getBoundingClientRect();
+        return {
+          tagName: row.tagName,
+          classTarget: row.classList.contains('astryx-dropdown-menu-item'),
+          role: row.getAttribute('role'),
+          disabled: row.getAttribute('aria-disabled'),
+          variant: row.getAttribute('data-variant'),
+          size: row.getAttribute('data-size'),
+          href: row.getAttribute('href'),
+          tabIndex: row.getAttribute('tabindex'),
+          backgroundColor: style.backgroundColor,
+          color: style.color,
+          opacity: style.opacity,
+          outlineStyle: style.outlineStyle,
+          outlineColor: style.outlineColor,
+          geometry: {x: box.x, y: box.y, width: box.width, height: box.height},
+        };
+      };
+      return {
+        theme: document
+          .querySelector('[data-astryx-theme]')
+          ?.getAttribute('data-astryx-theme'),
+        mode: document.documentElement.getAttribute('data-theme'),
+        direction: getComputedStyle(currentRows[0]).direction,
+        viewport: {width: innerWidth, height: innerHeight},
+        reducedMotion: matchMedia('(prefers-reduced-motion: reduce)').matches,
+        horizontalOverflow:
+          document.documentElement.scrollWidth > innerWidth + 1,
+        fonts: document.fonts.status,
+        activeText: document.activeElement?.textContent
+          ?.replace(/\s+/g, ' ')
+          .trim(),
+        rows: currentRows.map(describe),
+      };
+    });
+
+    const semanticPass =
+      observed.rows.length === 5 &&
+      observed.rows.every(row => row?.role === 'menuitem' && row.classTarget) &&
+      observed.rows[2]?.variant === 'destructive' &&
+      observed.rows[3]?.disabled === 'true' &&
+      observed.rows[4]?.tagName === 'A' &&
+      observed.rows[4]?.href === '/settings' &&
+      observed.rows.every(
+        row =>
+          row !== null && row.geometry.width > 0 && row.geometry.height > 0,
+      );
+    const paintPass =
+      observed.rows[2]?.color !== observed.rows[0]?.color &&
+      Number(observed.rows[3]?.opacity ?? 1) < 1;
+    const interactionPaintPass =
+      item.interaction === 'rest' ||
+      (item.interaction === 'focus' &&
+        observed.rows[0]?.backgroundColor !==
+          observed.rows[1]?.backgroundColor) ||
+      (item.interaction === 'hover' &&
+        observed.rows[1]?.backgroundColor !==
+          observed.rows[0]?.backgroundColor);
+    const interactionPass =
+      (item.interaction !== 'focus' ||
+        observed.activeText?.includes('Edit project')) &&
+      interactionPaintPass;
+
+    const png = await page.screenshot({animations: 'disabled', fullPage: true});
+    const image = `${item.key}.png`;
+    const receipt = {
+      schemaVersion: 1,
+      expected: {
+        build: checkoutSha,
+        storyId: STORY_ID,
+        mode: item.mode,
+        direction: item.direction,
+        theme: item.theme,
+        interaction: item.interaction,
+        viewport: item.viewport,
+      },
+      observed: {build: storybookSha, ...observed, pageErrors},
+      image: {
+        file: image,
+        sha256: createHash('sha256').update(png).digest('hex'),
+        width: png.readUInt32BE(16),
+        height: png.readUInt32BE(20),
+      },
+      checks: {
+        semanticPass,
+        paintPass,
+        interactionPaintPass,
+        interactionPass,
+      },
+      passed:
+        storybookSha === checkoutSha &&
+        pageErrors.length === 0 &&
+        observed.theme === item.theme &&
+        observed.mode === item.mode &&
+        observed.direction === item.direction &&
+        observed.viewport.width === item.viewport.width &&
+        observed.viewport.height === item.viewport.height &&
+        observed.reducedMotion &&
+        !observed.horizontalOverflow &&
+        observed.fonts === 'loaded' &&
+        semanticPass &&
+        paintPass &&
+        interactionPass,
+    };
+    fs.writeFileSync(path.join(OUTPUT, image), png);
+    fs.writeFileSync(
+      path.join(OUTPUT, `${item.key}.sensors.json`),
+      `${JSON.stringify(receipt, null, 2)}\n`,
+    );
+    expect(receipt.passed).toBe(true);
+    await context.close();
+  });
+}
+
+test('manifest is complete', () => {
+  const receipts = fs
+    .readdirSync(OUTPUT)
+    .filter(file => file.endsWith('.sensors.json'));
+  fs.writeFileSync(
+    path.join(OUTPUT, 'manifest.json'),
+    `${JSON.stringify(
+      {
+        schemaVersion: 1,
+        component: 'core/DropdownMenuItem',
+        build: checkoutSha,
+        frames: cases.map(item => ({
+          key: item.key,
+          image: `${item.key}.png`,
+          receipt: `${item.key}.sensors.json`,
+        })),
+      },
+      null,
+      2,
+    )}\n`,
+  );
+  expect(receipts).toHaveLength(cases.length);
+});

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

@@ -0,0 +1,267 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file SubMenuHeaderFooter.a11y.chromium.spec.ts
+ * @input The built Storybook "Submenu / header and footer" story (a Labels
+ *   sub-menu with a filter field above its checkbox rows and a "Create label"
+ *   button below them) and real Chromium, once as a laptop (fine pointer) and
+ *   once as a phone (coarse pointer, touch).
+ * @output Evidence for component:DropdownMenu FR20: a sub-menu's header and
+ *   footer sit with its rows in a modal dialog named by its row, beside every
+ *   menu element rather than inside one; the row says it opens a dialog; Tab
+ *   and Shift+Tab walk field, rows and button and wrap; typing filters the
+ *   rows and Escape returns to the row; a pick keeps the sub-menu open. On a
+ *   phone the drilled-in view holds the same regions while the root menu
+ *   steps aside. On the "Submenu / header with a choice" story, a flyout the
+ *   pointer has left stays open while an arrow moves the header's radio choice.
+ * @position Browser proof behind the jsdom suite: the accessibility tree, real
+ *   Tab order and the pointer decision are what jsdom cannot exercise.
+ */
+
+import {devices, expect, test, type Locator, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+const storyId = 'core-dropdownmenu--sub-menu-header-and-footer';
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+async function mount(page: Page) {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`,
+  );
+  await expect(page.getByTestId('submenu-regions-fixture')).toBeVisible();
+}
+
+/** Whether the element sits inside any role="menu" element. */
+async function isInsideAMenu(page: Page, testName: string): Promise<boolean> {
+  return page
+    .getByRole('dialog', {name: testName})
+    .evaluate(el => el.parentElement?.closest('[role="menu"]') != null);
+}
+
+async function bounds(locator: Locator) {
+  const rect = await locator.boundingBox();
+  if (rect == null) {
+    throw new Error('no rendered bounds');
+  }
+  return rect;
+}
+
+test.describe('on a laptop (fine pointer)', () => {
+  test('the sub-menu opens a dialog beside the menu, named by its row, holding field, rows and button', async ({
+    page,
+  }) => {
+    await mount(page);
+    await page.getByRole('button', {name: 'Session'}).click();
+    const row = page.getByRole('menuitem', {name: 'Labels'});
+    await expect(row).toHaveAttribute('aria-haspopup', 'dialog');
+    await row.click();
+
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    await expect(dialog).toBeVisible();
+    await expect(dialog).toHaveAttribute('aria-modal', 'true');
+    await expect(row).toHaveAttribute(
+      'aria-controls',
+      (await dialog.getAttribute('id')) ?? '',
+    );
+    expect(await isInsideAMenu(page, 'Labels')).toBe(false);
+    // The sub-menu's own menu holds only its rows.
+    const menu = dialog.getByRole('menu', {name: 'Labels'});
+    expect(
+      await menu.evaluate(el =>
+        Array.from(el.querySelectorAll('[role]')).map(child =>
+          child.getAttribute('role'),
+        ),
+      ),
+    ).toEqual(Array(5).fill('menuitemcheckbox'));
+    await expect(
+      dialog.getByRole('textbox', {name: 'Filter labels'}),
+    ).toBeVisible();
+    await expect(
+      dialog.getByRole('button', {name: 'Create label'}),
+    ).toBeVisible();
+  });
+
+  test('Tab and Shift+Tab walk field, rows and button and wrap; typing filters; Escape returns to the row', async ({
+    page,
+  }) => {
+    await mount(page);
+    const trigger = page.getByRole('button', {name: 'Session'});
+    await trigger.focus();
+    await page.keyboard.press('Enter');
+    // A keyboard open lands on the first row; let it land before moving on.
+    await expect(page.getByRole('menuitem', {name: 'Rename'})).toBeFocused();
+    const row = page.getByRole('menuitem', {name: 'Labels'});
+    await page.keyboard.press('ArrowDown');
+    await expect(row).toBeFocused();
+    await page.keyboard.press('ArrowRight');
+
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    const field = dialog.getByRole('textbox', {name: 'Filter labels'});
+    const create = dialog.getByRole('button', {name: 'Create label'});
+    const menu = dialog.getByRole('menu', {name: 'Labels'});
+    // A keyboard open lands on the first row, not the field.
+    await expect(
+      dialog.getByRole('menuitemcheckbox', {name: 'Bug'}),
+    ).toBeFocused();
+
+    await page.keyboard.press('Tab');
+    await expect(create).toBeFocused();
+    await page.keyboard.press('Tab');
+    await expect(field).toBeFocused();
+    await page.keyboard.press('Tab');
+    await expect(menu).toBeFocused();
+    await page.keyboard.press('Shift+Tab');
+    await expect(field).toBeFocused();
+    await page.keyboard.press('Shift+Tab');
+    await expect(create).toBeFocused();
+    await expect(dialog).toBeVisible();
+
+    // The field keeps its keys: letters type and filter the rows, and the
+    // arrow that closes a sub-menu from a row moves the caret instead.
+    await field.focus();
+    await page.keyboard.type('doc');
+    await page.keyboard.press('ArrowLeft');
+    await expect(field).toHaveValue('doc');
+    await expect(dialog.getByRole('menuitemcheckbox')).toHaveText([
+      'Documentation',
+    ]);
+
+    await page.keyboard.press('Escape');
+    await expect(dialog).toBeHidden();
+    await expect(row).toBeFocused();
+    await expect(page.getByRole('menu', {name: 'Session'})).toBeVisible();
+  });
+
+  test('a pick keeps the sub-menu open; the button acts without closing anything', async ({
+    page,
+  }) => {
+    await mount(page);
+    await page.getByRole('button', {name: 'Session'}).click();
+    await page.getByRole('menuitem', {name: 'Labels'}).click();
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    await dialog.getByRole('menuitemcheckbox', {name: 'Feature'}).click();
+    await expect(page.getByTestId('picked')).toHaveText('Bug, Feature');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', {name: 'Create label'}).click();
+    await expect(page.getByTestId('created')).toHaveText('1');
+    await expect(dialog).toBeVisible();
+  });
+});
+
+test.describe('the press model', () => {
+  test('a press on the row, dragged into the flyout and released on a row, picks it', async ({
+    page,
+  }) => {
+    await mount(page);
+    await page.getByRole('button', {name: 'Session'}).click();
+    const row = page.getByRole('menuitem', {name: 'Labels'});
+    await row.hover();
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    await expect(dialog).toBeVisible();
+    const feature = dialog.getByRole('menuitemcheckbox', {name: 'Feature'});
+    const [from, to] = await Promise.all([row, feature].map(bounds));
+    await page.mouse.move(from.x + from.width / 2, from.y + from.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(from.x + from.width - 4, from.y + from.height / 2, {
+      steps: 4,
+    });
+    await page.mouse.move(to.x + to.width / 2, to.y + to.height / 2, {
+      steps: 8,
+    });
+    await page.mouse.up();
+    await expect(page.getByTestId('picked')).toHaveText('Bug, Feature');
+    // A checkbox pick keeps the sub-menu, and the menu, open.
+    await expect(dialog).toBeVisible();
+  });
+});
+
+test.describe('on a phone (coarse pointer)', () => {
+  const {defaultBrowserType: _browser, ...phone} = devices['Pixel 7'];
+  test.use(phone);
+
+  test('the drilled-in view holds field, rows and button beside the root menu, which steps aside', async ({
+    page,
+  }) => {
+    await mount(page);
+    const trigger = page.getByRole('button', {name: 'Session'});
+    await trigger.tap();
+    const rootMenu = page.getByRole('menu', {name: 'Session'});
+    await expect(rootMenu).toBeVisible();
+    await page.getByRole('menuitem', {name: 'Labels'}).tap();
+
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    await expect(dialog).toBeVisible();
+    await expect(rootMenu).toBeHidden();
+    expect(await isInsideAMenu(page, 'Labels')).toBe(false);
+    // Same popover: the view replaces the root's rows in place.
+    expect(
+      await dialog.evaluate(
+        el =>
+          el.closest('[popover]') ===
+          document
+            .querySelector('[role="menu"][aria-label="Session"]')
+            ?.closest('[popover]'),
+      ),
+    ).toBe(true);
+    await expect(
+      dialog.getByRole('menuitem', {name: 'Back to Session'}),
+    ).toBeVisible();
+    await expect(
+      dialog.getByRole('textbox', {name: 'Filter labels'}),
+    ).toBeVisible();
+    await expect(
+      dialog.getByRole('button', {name: 'Create label'}),
+    ).toBeVisible();
+
+    await dialog.getByRole('menuitem', {name: 'Back to Session'}).tap();
+    await expect(dialog).toBeHidden();
+    await expect(rootMenu).toBeVisible();
+  });
+});
+
+test.describe('a header with a choice', () => {
+  test('a flyout the pointer has left stays open while an arrow moves the choice in its header', async ({
+    page,
+  }) => {
+    await page.goto(
+      `${storybook.origin}/iframe.html?id=core-dropdownmenu--sub-menu-header-choice&viewMode=story`,
+    );
+    await expect(page.getByTestId('submenu-choice-fixture')).toBeVisible();
+    await page.getByRole('button', {name: 'Filters'}).click();
+    const row = page.getByRole('menuitem', {name: 'Labels'});
+    await row.hover();
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    await expect(dialog).toBeVisible();
+    const anyLabel = dialog.getByRole('radio', {name: 'Any label'});
+    const allLabels = dialog.getByRole('radio', {name: 'All labels'});
+    await anyLabel.click();
+    await expect(anyLabel).toBeFocused();
+
+    // The pointer leaves the flyout and the menu, and its hide delay runs out
+    // with focus still inside.
+    const viewport = page.viewportSize() ?? {width: 1280, height: 720};
+    await page.mouse.move(viewport.width - 8, viewport.height - 8, {steps: 4});
+    await page.waitForTimeout(500);
+    await expect(dialog).toBeVisible();
+
+    // The browser moves focus and the choice for the arrow itself.
+    await page.keyboard.press('ArrowDown');
+    await expect(allLabels).toBeFocused();
+    await expect(allLabels).toBeChecked();
+    await expect(page.getByTestId('match')).toHaveText('all');
+    await expect(dialog).toBeVisible();
+  });
+});

package/src/DropdownMenu/menuRegionStops.ts

@@ -8,8 +8,8 @@
  * @output `tabbablesIn`, `focusRegionControl`, `moveRegionsTab`: the Tab stops
  *   of a header or footer region and the walk through a menu with regions,
  *   with a named radio group as one stop
- * @position Internal; DropdownMenu's walk through its header and footer, in a
- *   module of its own so another menu level with regions can share it.
+ * @position Internal; used by DropdownMenu (the root menu's header and footer)
+ *   and DropdownMenuSubMenu (a sub-menu's header and footer).
  *
  * A menu with a header or footer is a dialog: Tab and Shift+Tab walk the
  * header's controls, the menu as one stop, then the footer's controls, and

package/src/DropdownMenu/modules/useMenuPress.spec.md

@@ -163,6 +163,14 @@ Consumer migration instructions belong in consumer docs and release notes.
   claimed by the innermost root carrying `data-astryx-menu-press` (a flyout
   before its parent); the outermost root decides what counts as "inside the
   menu" for the release.
+- **ORD1a (proposed) — A menu beside the root.** A root carrying
+  `data-astryx-menu-press-surface`, which names another root's `id`, is nested
+  in that root for ORD1, as a flyout inside the root's DOM is: a release on
+  its rows is inside the menu. Only the menu of a sub-menu with a header or
+  footer, which the root renders beside itself (`component:DropdownMenu`
+  FR20), carries it. Anything else beside the root, a header field or a picker
+  placed in a region say, is outside the menu, as the root's own regions are,
+  and a picker there stays its own root. Pending owner review.
 - **ORD2 — Release resolution.** Enabled row under the point → `act`; inside
   the menu or on the trigger with no row → `settle` (stray click swallowed,
   menu stays); outside → `settle` with `dismiss` only for a mouse.
@@ -238,6 +246,7 @@ owned by the item components.
 | FR4 (scroll)           | `MenuPress.a11y.chromium.spec.ts` (real Chromium)                                                                          | Chromium touch pan in an overflowing menu; touch-action by overflow; finger slide and its stray click                                                    | Not provable in jsdom; a pan that acts on a row, or a slide that acts on the press row, fails                                   |
 | FR4 (pinch)            | `MenuPinchZoom.a11y.chromium.spec.ts` (real Chromium, phone emulation)                                                     | two-finger pinch over a menu whose rows fit, over one that scrolls, and over a picker listbox                                                            | Not provable in jsdom; a pinch that leaves the page at scale 1, or acts on a row, fails                                         |
 | FR8, FR9 (proposed)    | `menuPressGesture.test.ts` trigger states; `useMenuPress.test.tsx` trigger suite; `DropdownMenu.test.tsx` press-open cases | mouse opens at once, finger tap, held finger, settle before/after, cancel; press-open + drag-release, unsettled release, trigger toggle, held touch, tap | A menu that does not open on a mouse press, an unsettled release that acts, or a trigger that reopens in the same gesture fails |
+| ORD1a (proposed)       | `DropdownMenuSubMenu.test.tsx` press cases; `SubMenuHeaderFooter.a11y.chromium.spec.ts` press-drag case                    | a mouse press on a menu row released on a row of a sub-menu rendered beside the menu; the same press released on that sub-menu's header field            | A release on such a row that acts on nothing or closes the menu, or a release on its header field that acts, fails.             |
 
 ## Decision log
 

package/src/FieldStatus/FieldStatus.spec.md

@@ -38,7 +38,8 @@ detached presentations; consumer usage remains documented in
 
 - Released default preserved: `yes`
 - Compatibility class: additive documentation only; runtime, DOM, styling, and
-  public API remain unchanged
+  public API remain unchanged, except that delivery inside a mounted live
+  container follows `spec:AST-086` FR4
 - Controlled/uncontrolled behavior: not applicable
 - Migration decision: direct `FieldStatus variant="tooltip"` support is rejected.
   `tooltip` remains a field-family sentinel that MUST be handled before rendering
@@ -127,7 +128,7 @@ intentional decision.
 - **AR1 — Programmatic announcement channel.** Errors MUST update the persistent
   assertive region; warnings and successes MUST update the persistent polite
   region, including on first mount and when message or type changes, without
-  moving focus.
+  moving focus. Inside a mounted live container, `spec:AST-086` FR4 applies.
 - **AR5 — Assistive-technology output.** Claims about whether, when, or how the
   message is spoken or presented in braille MUST be verified through the real-AT
   evidence process in `spec:AST-009`; DOM and accessibility-tree checks prove