@astryxdesign/core 0.7.5 → 0.7.6-canary.0bd3b37

package/src/BottomSheet/__tests__/BottomSheetDrag.a11y.chromium.spec.ts

@@ -1,129 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y release-only
-
-/**
- * @file BottomSheetDrag.a11y.chromium.spec.ts
- * @input Built BottomSheet stories and real Chromium touch input (CDP)
- * @output Browser evidence that a drag follows the finger without rendering,
- *   and that the release animates from where the finger left the sheet
- * @position Chromium proof for useSheetGestures' live transform path
- */
-
-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, viewport: {width: 390, height: 844}});
-
-// A React commit counter: DevTools' hook is called once per committed root.
-const COMMIT_COUNTER = `(() => {
-  const hook = {
-    renderers: new Map(), supportsFiber: true, commits: 0,
-    inject() { return 1; },
-    onCommitFiberRoot() { hook.commits += 1; },
-    onCommitFiberUnmount() {}, onPostCommitFiberRoot() {},
-  };
-  Object.defineProperty(window, '__REACT_DEVTOOLS_GLOBAL_HOOK__', {value: hook});
-})()`;
-
-async function openSheet(page: Page) {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-bottomsheet--snap-points&viewMode=story`,
-  );
-  await page.getByRole('button', {name: 'Open nearby places'}).click();
-  const dialog = page.getByRole('dialog', {name: 'Nearby places'});
-  await expect(dialog).toBeVisible();
-  // The sheet panel carries the component class and the transform.
-  const sheet = dialog.locator('.astryx-bottom-sheet').first();
-  await expect(sheet).toBeVisible();
-  await page.waitForTimeout(600); // the entrance
-  return {dialog, sheet};
-}
-
-function tyOf(transform: string): number {
-  const match = /translateY\((-?[\d.]+)px\)/.exec(transform);
-  return match ? Number(match[1]) : 0;
-}
-
-test('a drag writes the transform per move and renders nothing between', async ({
-  page,
-}) => {
-  await page.addInitScript(COMMIT_COUNTER);
-  const {sheet} = await openSheet(page);
-  const box = await sheet.boundingBox();
-  if (box == null) {
-    throw new Error('no sheet box');
-  }
-  const x = box.x + box.width / 2;
-  const handleY = box.y + 12;
-  const commitsBefore = await page.evaluate(
-    () =>
-      (window as unknown as {__REACT_DEVTOOLS_GLOBAL_HOOK__: {commits: number}})
-        .__REACT_DEVTOOLS_GLOBAL_HOOK__.commits,
-  );
-  const cdp = await page.context().newCDPSession(page);
-  const steps = 24;
-  const trail: number[] = [];
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchStart',
-    touchPoints: [{x, y: handleY}],
-  });
-  for (let i = 1; i <= steps; i += 1) {
-    await cdp.send('Input.dispatchTouchEvent', {
-      type: 'touchMove',
-      touchPoints: [{x, y: handleY + i * 5}],
-    });
-    trail.push(
-      tyOf(await sheet.evaluate(el => (el as HTMLElement).style.transform)),
-    );
-    await page.waitForTimeout(16);
-  }
-  const commitsDuring = await page.evaluate(
-    () =>
-      (
-        window as unknown as {
-          __REACT_DEVTOOLS_GLOBAL_HOOK__: {commits: number};
-        }
-      ).__REACT_DEVTOOLS_GLOBAL_HOOK__.commits,
-  );
-  // The transform followed the finger (inline, written per move; the first
-  // samples ease out of the magnet around the resting detent) ...
-  expect(trail[trail.length - 1]).toBeGreaterThanOrEqual(100);
-  expect(trail.filter((ty, i) => i === 0 || ty >= trail[i - 1]).length).toBe(
-    trail.length,
-  );
-  // ... and the moves cost a handful of commits (the drag beginning, the
-  // sheet traveling), not one per move.
-  expect(commitsDuring - commitsBefore).toBeLessThanOrEqual(4);
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchEnd',
-    touchPoints: [],
-  });
-  // The release animates back from where the finger left the sheet: the
-  // computed transform is still off rest a frame later, and at rest after the
-  // transition.
-  await page.waitForTimeout(40);
-  const midway = await sheet.evaluate(el => getComputedStyle(el).transform);
-  const midwayTy = /matrix\(1, 0, 0, 1, 0, (-?[\d.]+)\)/.exec(midway);
-  expect(midwayTy, midway).not.toBeNull();
-  expect(Number(midwayTy?.[1])).toBeGreaterThan(5);
-  await expect
-    .poll(async () => sheet.evaluate(el => getComputedStyle(el).transform), {
-      timeout: 2_000,
-    })
-    .toMatch(/^(none|matrix\(1, 0, 0, 1, 0, 0\))$/);
-  await expect(page.getByRole('dialog', {name: 'Nearby places'})).toBeVisible();
-});

package/src/BottomSheet/__tests__/BottomSheetFocusReturn.a11y.browser.spec.ts

@@ -1,97 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y release-only
-
-/**
- * @file BottomSheetFocusReturn.a11y.browser.spec.ts
- * @input The `Core/DropdownMenu` action-sheet story with a trigger the caller
- *   renders, in a built Storybook, and real Chromium/WebKit pointer and
- *   keyboard input.
- * @output Browser evidence that the focus a BottomSheet returns when it closes
- *   follows the last input (docs/architecture/interaction-modality.md INV1):
- *   no ring after a pointer close, the ring after a keyboard close.
- * @position Cross-browser proof; jsdom only proves which focus call the sheet
- *   makes. The menu's sheet returns focus through BottomSheet's
- *   `finalFocusRef`, and a control the caller renders carries no style of its
- *   own that would hide a ring, so the ring shown is the browser's answer.
- *   Chromium rings it when a keyboard-opened sheet is closed by a pointer;
- *   WebKit also rings it after a tap open and a tap close.
- */
-
-import {expect, test, type Locator, 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();
-});
-
-async function mount(page: Page): Promise<Locator> {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-dropdownmenu--action-sheet-custom-trigger&viewMode=story`,
-  );
-  const trigger = page.getByRole('button', {
-    name: 'Project actions',
-    exact: true,
-  });
-  await expect(trigger).toBeVisible();
-  return trigger;
-}
-
-async function openFromKeyboard(page: Page, trigger: Locator): Promise<void> {
-  await trigger.focus();
-  await page.keyboard.press('Enter');
-  await expect(page.getByRole('dialog')).toBeVisible();
-}
-
-function row(page: Page): Locator {
-  return page.getByRole('dialog').getByRole('button', {name: /Edit project/});
-}
-
-async function expectReturnedFocus(
-  page: Page,
-  trigger: Locator,
-  ring: boolean,
-): Promise<void> {
-  await expect(page.getByRole('dialog')).toBeHidden();
-  await expect(trigger).toBeFocused();
-  expect(
-    await trigger.evaluate(element => element.matches(':focus-visible')),
-  ).toBe(ring);
-}
-
-test('a keyboard-opened sheet closed by a pointer pick returns focus without a ring', async ({
-  page,
-}) => {
-  const trigger = await mount(page);
-  await openFromKeyboard(page, trigger);
-  await row(page).click();
-  await expectReturnedFocus(page, trigger, false);
-});
-
-test('a pointer open and pointer pick return focus without a ring', async ({
-  page,
-}) => {
-  const trigger = await mount(page);
-  await trigger.click();
-  await expect(page.getByRole('dialog')).toBeVisible();
-  await row(page).click();
-  await expectReturnedFocus(page, trigger, false);
-});
-
-test('a keyboard-opened sheet closed by Escape keeps the ring', async ({
-  page,
-}) => {
-  const trigger = await mount(page);
-  await openFromKeyboard(page, trigger);
-  await page.keyboard.press('Escape');
-  await expectReturnedFocus(page, trigger, true);
-});

package/src/BottomSheet/__tests__/BottomSheetKeyboard.a11y.browser.spec.ts

@@ -1,415 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y release-only
-
-/**
- * @file BottomSheetKeyboard.a11y.browser.spec.ts
- * @input Built BottomSheet stories and real Chromium/WebKit keyboard input
- * @output Browser evidence for shared focus delegation, traversal, native
- *   scrolling, and Escape reaching a nested layer before the sheet
- * @position Cross-browser proof for useScrollableArea's contentOrViewport policy
- */
-
-import {expect, test, type Page, type Locator} 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();
-});
-
-// macOS WebKit defaults to text-field traversal. Option+Tab selects its native
-// all-controls traversal, equivalent to enabling Safari's keyboard preference.
-function tabKey(browserName: string, reverse = false): string {
-  return `${browserName === 'webkit' && process.platform === 'darwin' ? 'Alt+' : ''}${reverse ? 'Shift+' : ''}Tab`;
-}
-
-async function mount(page: Page, browserName: string, variant = 'button') {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-bottomsheet--keyboard-delegation&viewMode=story`,
-  );
-  const viewport = page.getByRole('group', {
-    name: 'Keyboard reading',
-    exact: true,
-  });
-  await expect(viewport).toHaveAttribute('data-scrollable-block', 'true');
-  await page.getByLabel('Content case').selectOption(variant);
-  await expect(viewport).toHaveAttribute('tabindex', '0');
-  // WebKit includes the non-modal dialog host in sequential navigation;
-  // Chromium enters its descendants directly. Start immediately before the body.
-  const before =
-    browserName === 'webkit'
-      ? page.getByRole('dialog', {name: 'Keyboard reading', exact: true})
-      : page.getByRole('button', {name: 'Toggle modal', exact: true});
-  await before.focus();
-  return {viewport, before};
-}
-
-for (const variant of ['button', 'link']) {
-  test(`${variant}: forward entry delegates once and reverse traversal exits`, async ({
-    page,
-    browserName,
-  }) => {
-    const {viewport, before} = await mount(page, browserName, variant);
-    const first = page.getByRole(variant === 'button' ? 'button' : 'link', {
-      name: variant === 'button' ? 'First action' : 'First link',
-      exact: true,
-    });
-    await page.keyboard.press(tabKey(browserName));
-    await expect(first).toBeFocused();
-    await expect(viewport).toHaveAttribute('tabindex', '0');
-    await expect(viewport).toHaveAccessibleName('Keyboard reading');
-    await expect(first).toHaveAccessibleName(
-      variant === 'button' ? 'First action' : 'First link',
-    );
-    await page.keyboard.press(tabKey(browserName));
-    await expect(page.getByRole('button', {name: 'Last action'})).toBeFocused();
-    await page.keyboard.press(tabKey(browserName, true));
-    await expect(first).toBeFocused();
-    await page.keyboard.press(tabKey(browserName, true));
-    await expect(before).toBeFocused();
-    await expect(viewport).toHaveAttribute('tabindex', '0');
-    await page.keyboard.press(tabKey(browserName));
-    await expect(first).toBeFocused();
-  });
-}
-
-for (const variant of [
-  'text',
-  'input',
-  'disabled',
-  'nested',
-  'native-scroll',
-  'radiogroup',
-  'slider',
-  'combobox',
-  'listbox',
-  'menu',
-  'grid',
-  'tree',
-  'tablist',
-  'toolbar',
-]) {
-  test(`${variant}: retains a named viewport stop`, async ({
-    page,
-    browserName,
-  }) => {
-    const {viewport, before} = await mount(page, browserName, variant);
-    await page.keyboard.press(tabKey(browserName));
-    await expect(viewport).toBeFocused();
-    await expect(viewport).toHaveAccessibleName('Keyboard reading');
-    await page.keyboard.press(tabKey(browserName, true));
-    await expect(before).toBeFocused();
-  });
-}
-
-async function scrollRange(viewport: Locator) {
-  return viewport.evaluate(element => ({
-    position: element.scrollTop,
-    max: element.scrollHeight - element.clientHeight,
-  }));
-}
-
-for (const key of ['PageDown', 'ArrowDown']) {
-  test(`${key}: reaches both scroll edges after delegation`, async ({
-    page,
-    browserName,
-  }) => {
-    const {viewport} = await mount(page, browserName);
-    await page.keyboard.press(tabKey(browserName));
-    const first = page.getByRole('button', {name: 'First action', exact: true});
-    await expect(first).toBeFocused();
-    for (let count = 0; count < 300; count++) {
-      const {position, max} = await scrollRange(viewport);
-      if (position >= max - 1) {
-        break;
-      }
-      await page.keyboard.press(key, {delay: key === 'ArrowDown' ? 50 : 25});
-    }
-    await expect
-      .poll(async () => {
-        const {position, max} = await scrollRange(viewport);
-        // WebKit can overshoot a native edge while showing rubber-band feedback.
-        return max - position;
-      })
-      .toBeLessThanOrEqual(1);
-    for (let count = 0; count < 300; count++) {
-      if ((await scrollRange(viewport)).position <= 1) {
-        break;
-      }
-      await page.keyboard.press(key === 'PageDown' ? 'PageUp' : 'ArrowUp', {
-        delay: key === 'ArrowDown' ? 50 : 25,
-      });
-    }
-    await expect
-      .poll(async () => (await scrollRange(viewport)).position)
-      .toBeLessThanOrEqual(1);
-    await expect(first).toBeFocused();
-  });
-}
-
-test('pointer and programmatic focus stay on the viewport, including during keydown', async ({
-  page,
-  browserName,
-}) => {
-  const {viewport, before} = await mount(page, browserName);
-  await viewport.focus();
-  await expect(viewport).toBeFocused();
-  await before.focus();
-  await viewport.click({position: {x: 4, y: 40}});
-  await expect(viewport).toBeFocused();
-  await before.focus();
-  await before.evaluate(element => {
-    element.addEventListener('keydown', event => {
-      if (event instanceof KeyboardEvent && event.key === 'Tab') {
-        event.preventDefault();
-        document
-          .querySelector<HTMLElement>(
-            '[role="group"][aria-label="Keyboard reading"]',
-          )
-          ?.focus();
-      }
-    });
-  });
-  await page.keyboard.press(tabKey(browserName));
-  await expect(viewport).toBeFocused();
-});
-
-test('dynamic eligibility is checked at the next entry without mutation observation', async ({
-  page,
-  browserName,
-}) => {
-  await page.addInitScript(() => {
-    const Original = window.MutationObserver;
-    const observers: MutationObserver[] = [];
-    window.MutationObserver = class extends Original {
-      constructor(callback: MutationCallback) {
-        super(callback);
-        observers.push(this);
-      }
-    };
-    Object.assign(window, {
-      stopMutationObservers: () =>
-        observers.forEach(observer => observer.disconnect()),
-    });
-  });
-  const {viewport, before} = await mount(page, browserName);
-  await page.evaluate(() => {
-    (
-      window as unknown as {stopMutationObservers: () => void}
-    ).stopMutationObservers();
-  });
-  await viewport.focus();
-  const first = page.getByRole('button', {name: 'First action', exact: true});
-  await first.evaluate(element => element.setAttribute('disabled', ''));
-  await expect(viewport).toBeFocused();
-  await before.focus();
-  await page.keyboard.press(tabKey(browserName));
-  await expect(page.getByRole('button', {name: 'Last action'})).toBeFocused();
-  await before.focus();
-  await first.evaluate(element => element.removeAttribute('disabled'));
-  await page.keyboard.press(tabKey(browserName));
-  await expect(first).toBeFocused();
-  await before.focus();
-  await viewport.locator('[data-scroll-content]').evaluate(element => {
-    const input = document.createElement('input');
-    input.setAttribute('aria-label', 'Inserted input');
-    element.prepend(input);
-  });
-  await page.keyboard.press(tabKey(browserName));
-  await expect(viewport).toBeFocused();
-  await page.getByLabel('Inserted input').evaluate(element => element.remove());
-  await expect(viewport).toBeFocused();
-  await before.focus();
-  await page.keyboard.press(tabKey(browserName));
-  await expect(first).toBeFocused();
-  await before.focus();
-  await first.evaluate(element => element.setAttribute('role', 'combobox'));
-  await page.keyboard.press(tabKey(browserName));
-  await expect(viewport).toBeFocused();
-});
-
-test('modal BottomSheet keeps native focus containment without cycling through the viewport', async ({
-  page,
-  browserName,
-}) => {
-  await mount(page, browserName);
-  await page.getByRole('button', {name: 'Toggle modal', exact: true}).click();
-  const dialog = page.getByRole('dialog', {
-    name: 'Keyboard reading',
-    exact: true,
-  });
-  await expect
-    .poll(async () => dialog.evaluate(element => element.matches(':modal')))
-    .toBe(true);
-  const viewport = page.getByRole('group', {
-    name: 'Keyboard reading',
-    exact: true,
-  });
-  await expect(viewport).toHaveAttribute('data-scrollable-block', 'true');
-  const panel = dialog.locator('.astryx-bottom-sheet');
-  await panel.focus();
-  await page.keyboard.press(tabKey(browserName));
-  const first = page.getByRole('button', {name: 'First action', exact: true});
-  await expect(first).toBeFocused();
-  await page.keyboard.press(tabKey(browserName, true));
-  await expect(viewport).not.toBeFocused();
-  await expect(first).not.toBeFocused();
-  // Native dialog traversal may wrap to another sheet target or browser chrome;
-  // it must never focus the inert background or create a viewport/child loop.
-  await expect(
-    page.getByRole('button', {name: 'Before sheet', includeHidden: true}),
-  ).not.toBeFocused();
-  await expect(viewport).toHaveAttribute('tabindex', '0');
-});
-
-test('fitting text removes the viewport stop while preserving current focus', async ({
-  page,
-  browserName,
-}) => {
-  const {viewport} = await mount(page, browserName, 'text');
-  await viewport.focus();
-  await viewport.locator('[data-scroll-content]').evaluate(element => {
-    element.textContent = 'Short reading content';
-  });
-  await expect(viewport).not.toHaveAttribute('data-scrollable-block', 'true');
-  await expect(viewport).toHaveAttribute('tabindex', '-1');
-  await expect(viewport).toBeFocused();
-});
-
-test('horizontal overflow remains keyboard scrollable after delegation', async ({
-  page,
-  browserName,
-}) => {
-  const {viewport, before} = await mount(page, browserName);
-  await viewport.evaluate(element => {
-    const content = element.querySelector<HTMLElement>('[data-scroll-content]');
-    if (content != null) {
-      content.style.width = `${element.clientWidth + 320}px`;
-    }
-  });
-  await expect(viewport).toHaveAttribute('data-scrollable-inline', 'true');
-  await before.focus();
-  await page.keyboard.press(tabKey(browserName));
-  await expect(
-    page.getByRole('button', {name: 'First action', exact: true}),
-  ).toBeFocused();
-  for (const key of ['ArrowRight', 'ArrowLeft']) {
-    for (let count = 0; count < 100; count++) {
-      const atEdge = await viewport.evaluate(
-        (element, forward) =>
-          forward
-            ? element.scrollLeft >=
-              element.scrollWidth - element.clientWidth - 1
-            : element.scrollLeft <= 1,
-        key === 'ArrowRight',
-      );
-      if (atEdge) {
-        break;
-      }
-      await page.keyboard.press(key, {delay: 50});
-    }
-    await expect
-      .poll(async () =>
-        viewport.evaluate(
-          (element, forward) =>
-            forward
-              ? element.scrollWidth - element.clientWidth - element.scrollLeft
-              : element.scrollLeft,
-          key === 'ArrowRight',
-        ),
-      )
-      .toBeLessThanOrEqual(1);
-  }
-});
-
-test('does not skip an aria-hidden first tab stop to delegate to a later action', async ({
-  page,
-  browserName,
-}) => {
-  const {viewport} = await mount(page, browserName);
-  await page
-    .getByRole('button', {name: 'First action', exact: true})
-    .evaluate(element => {
-      element.setAttribute('aria-hidden', 'true');
-    });
-  await page.keyboard.press(tabKey(browserName));
-  await expect(viewport).toBeFocused();
-});
-
-// Issue #7194: one Escape press closes only the top-most layer. A Popover
-// opened inside the sheet takes the first press; the sheet takes the next.
-async function openNestedPopover(
-  page: Page,
-  {hasScrim, purpose}: {hasScrim: boolean; purpose: string},
-) {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-bottomsheet--nested-popover&viewMode=story`,
-  );
-  await page.getByLabel('Sheet purpose').selectOption(purpose);
-  if (hasScrim) {
-    await page.getByRole('checkbox', {name: 'Show scrim'}).check();
-  }
-  await page.getByRole('button', {name: 'Open sheet', exact: true}).click();
-  // A modal sheet is an open dialog; a non-modal one is a manual popover in
-  // the top layer, which has no `open` attribute (component:BottomSheet FR11).
-  const openSheets = page.locator('dialog[open], dialog:popover-open');
-  await expect(openSheets).toHaveCount(1);
-  const about = page.getByRole('button', {name: 'About', exact: true});
-  // WebKit does not focus a button on mouse click, so open from the keyboard.
-  await about.focus();
-  await page.keyboard.press('Enter');
-  const details = page.getByText('Nested information');
-  await expect(details).toBeVisible();
-  await expect(about).toBeFocused();
-  return {openSheets, details};
-}
-
-for (const hasScrim of [false, true]) {
-  test(`${hasScrim ? 'modal' : 'non-modal'}: Escape closes the nested Popover before the sheet`, async ({
-    page,
-  }) => {
-    const {openSheets, details} = await openNestedPopover(page, {
-      hasScrim,
-      purpose: 'info',
-    });
-
-    await page.keyboard.press('Escape');
-    await expect(details).toBeHidden();
-    await expect(openSheets).toHaveCount(1);
-    await expect(
-      page.getByRole('button', {name: 'Close sheet', exact: true}),
-    ).toBeVisible();
-
-    await page.keyboard.press('Escape');
-    await expect(openSheets).toHaveCount(0);
-  });
-}
-
-test('required: Escape closes the nested Popover and never the sheet', async ({
-  page,
-}) => {
-  const {openSheets, details} = await openNestedPopover(page, {
-    hasScrim: true,
-    purpose: 'required',
-  });
-
-  await page.keyboard.press('Escape');
-  await expect(details).toBeHidden();
-  await expect(openSheets).toHaveCount(1);
-
-  await page.keyboard.press('Escape');
-  await page.waitForTimeout(500);
-  await expect(openSheets).toHaveCount(1);
-  await expect(
-    page.getByRole('alertdialog', {name: 'Reference'}),
-  ).toBeVisible();
-});