@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f899313

package/src/Layer/__tests__/LayerBrowserHide.a11y.chromium.spec.ts

@@ -1,126 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y scope core/Layer
-
-/**
- * @file LayerBrowserHide.a11y.chromium.spec.ts
- * @input The `Core/Layer` BrowserHideWakesAFocusLayer story in a built
- *   Storybook, driven by real Chromium pointer and keyboard input.
- * @output Real-engine proof that a show the browser's own hide wakes — its
- *   close watcher's Escape returning focus to a trigger whose focus-driven
- *   layer asks to show — reaches the page as no error and ends with that
- *   layer shown; that a tap outside, which returns no focus, hides the
- *   layer with no error and wakes nothing; and that a press which
- *   light-dismisses one layer and opens another opens it at once. Only a real engine
- *   decides when a popover operation is in flight and refuses a show inside
- *   it; the unit suite (useLayer.test.tsx) covers the same rules on a
- *   mirrored Popover API. The in-flight rule is Chromium 150+: on the
- *   Chromium this repository's Playwright pins (149) the first case passes
- *   with or without the fix, so until that pin moves it guards the end state
- *   only.
- * @position Run with `pnpm test:a11y-contract`.
- */
-
-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();
-});
-
-/** Every error the page reports while the test runs: a refused show is one. */
-function collectPageErrors(page: Page): string[] {
-  const errors: string[] = [];
-  page.on('pageerror', error => {
-    errors.push(`${error.name}: ${error.message}`);
-  });
-  return errors;
-}
-
-async function openStory(page: Page, id: string): Promise<void> {
-  await page.goto(`${storybook.origin}/iframe.html?id=${id}&viewMode=story`);
-  await page.locator('#storybook-root button').first().waitFor();
-}
-
-test('an Escape the browser answers, with focus inside the layer, returns focus to the trigger and shows its focus-driven layer, without an error', async ({
-  page,
-}) => {
-  const errors = collectPageErrors(page);
-  await openStory(page, 'core-layer--browser-hide-wakes-a-focus-layer');
-  const trigger = page.getByRole('button', {name: 'Show layer'});
-  const inside = page.getByRole('button', {name: 'Inside', exact: true});
-  const hint = page.getByRole('tooltip');
-
-  // Keyboard focus shows the focus-driven layer; the press opens the content
-  // and Tab moves into it, which hides the focus-driven layer.
-  await page.keyboard.press('Tab');
-  await expect(trigger).toBeFocused();
-  await expect(hint).toBeVisible();
-  await page.keyboard.press('Enter');
-  await expect(inside).toBeVisible();
-  await page.keyboard.press('Tab');
-  await expect(inside).toBeFocused();
-  await expect(hint).toBeHidden();
-
-  // No layer handles Escape here: the browser's own close watcher hides the
-  // content layer and returns focus to the trigger inside that hide.
-  await page.keyboard.press('Escape');
-  await expect(inside).toBeHidden();
-  await expect(trigger).toBeFocused();
-  await expect(hint).toBeVisible();
-  expect(errors).toEqual([]);
-});
-
-test('a tap outside the layer, with focus inside it, hides the layer without an error; it returns no focus, so the focus-driven layer stays hidden', async ({
-  page,
-}) => {
-  const errors = collectPageErrors(page);
-  await openStory(page, 'core-layer--browser-hide-wakes-a-focus-layer');
-  const trigger = page.getByRole('button', {name: 'Show layer'});
-  const inside = page.getByRole('button', {name: 'Inside', exact: true});
-  const hint = page.getByRole('tooltip');
-
-  await page.keyboard.press('Tab');
-  await page.keyboard.press('Enter');
-  await expect(inside).toBeVisible();
-  await page.keyboard.press('Tab');
-  await expect(inside).toBeFocused();
-
-  // A light dismiss returns no focus: the press moves focus to the page
-  // before the hide runs, so nothing wakes the focus-driven layer.
-  await page.mouse.click(5, 5);
-  await expect(inside).toBeHidden();
-  await expect(trigger).not.toBeFocused();
-  await expect(hint).toBeHidden();
-  expect(errors).toEqual([]);
-});
-
-test('a press that light-dismisses one layer and opens another opens it at once: focus moves into it, without an error', async ({
-  page,
-}) => {
-  const errors = collectPageErrors(page);
-  await openStory(page, 'core-layer--browser-hide-wakes-a-focus-layer');
-  const inside = page.getByRole('button', {name: 'Inside', exact: true});
-  const otherTrigger = page.getByRole('button', {name: 'Show the other layer'});
-  const otherInside = page.getByRole('button', {name: 'Inside the other'});
-
-  await page.getByRole('button', {name: 'Show layer'}).click();
-  await expect(inside).toBeVisible();
-
-  // The browser light-dismisses the first layer at pointerup; the click opens
-  // the other one in the same gesture and focuses into it right away.
-  await otherTrigger.click();
-  await expect(inside).toBeHidden();
-  await expect(otherInside).toBeVisible();
-  await expect(otherInside).toBeFocused();
-  expect(errors).toEqual([]);
-});

package/src/Layer/__tests__/LayerReducedMotion.a11y.chromium.spec.ts

@@ -1,176 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y always
-
-/**
- * @file LayerReducedMotion.a11y.chromium.spec.ts
- * @input The Tooltip and HoverCard Touch Triggers stories in a built
- *   Storybook, Chromium with Reduce Motion emulated, under a finger (phone
- *   profile, coarse pointer) and under a mouse (desktop profile)
- * @output Real-engine proof of the layer entrance under Reduce Motion: under
- *   a finger the tooltip and the hover card fade in with no travel and no
- *   scale, in 200 ms or less (design:reduced-motion DR2); under a mouse they
- *   still appear at once (DR3); without Reduce Motion the entrance is
- *   unchanged
- * @position Run with `pnpm test:a11y-contract`. Media queries only resolve
- *   in a real engine; the entrance itself is layerAnimations.stylex.ts.
- *   Reduce Motion is emulated per page (`page.emulateMedia`): the project's
- *   `use.reducedMotion` does not reach `matchMedia` (playwright.config.ts)
- */
-
-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 phone = {
-  hasTouch: true,
-  isMobile: true,
-  viewport: {width: 390, height: 844},
-} as const;
-
-const cases = [
-  {
-    name: 'Tooltip',
-    story: 'core-tooltip--touch-triggers',
-    trigger: 'hover-able term',
-    layer: '.astryx-tooltip',
-  },
-  {
-    name: 'HoverCard',
-    story: 'core-hovercard--touch-triggers',
-    trigger: 'Jane Doe',
-    layer: '.astryx-hover-card',
-  },
-];
-
-/**
- * The open layer's entrance: its animation name and the properties its
- * keyframes animate (read from the page's style sheets).
- */
-async function entranceOf(page: Page, selector: string) {
-  await expect(page.locator(`${selector}:popover-open`)).toHaveCount(1);
-  return page.evaluate(sel => {
-    const layer = document.querySelector<HTMLElement>(`${sel}:popover-open`);
-    if (layer == null) {
-      return {name: 'missing', properties: [], duration: NaN};
-    }
-    const computed = getComputedStyle(layer);
-    const name = computed.animationName;
-    // Seconds; the first animation's duration.
-    const duration = parseFloat(computed.animationDuration.split(',')[0]);
-    const properties = new Set<string>();
-    for (const sheet of Array.from(document.styleSheets)) {
-      let rules: CSSRuleList;
-      try {
-        rules = sheet.cssRules;
-      } catch {
-        continue;
-      }
-      const visit = (list: CSSRuleList) => {
-        for (const rule of Array.from(list)) {
-          if (rule instanceof CSSKeyframesRule && rule.name === name) {
-            for (const frame of Array.from(rule.cssRules)) {
-              const style = (frame as CSSKeyframeRule).style;
-              for (let i = 0; i < style.length; i += 1) {
-                properties.add(style.item(i));
-              }
-            }
-          } else if ('cssRules' in rule) {
-            visit((rule as CSSGroupingRule).cssRules);
-          }
-        }
-      };
-      visit(rules);
-    }
-    return {name, properties: Array.from(properties).sort(), duration};
-  }, selector);
-}
-
-async function tapOpen(page: Page, text: string) {
-  const box = await page.getByText(text, {exact: true}).boundingBox();
-  if (box == null) {
-    throw new Error(`no trigger reading ${text}`);
-  }
-  await page.touchscreen.tap(box.x + box.width / 2, box.y + box.height / 2);
-}
-
-for (const {name, story, trigger, layer} of cases) {
-  test.describe(`${name} under a finger with Reduce Motion`, () => {
-    test.use(phone);
-
-    test('fades in, with no travel and no scale, in 200 ms or less', async ({
-      page,
-    }) => {
-      await page.emulateMedia({reducedMotion: 'reduce'});
-      await page.goto(
-        `${storybook.origin}/iframe.html?id=${story}&viewMode=story`,
-      );
-      await tapOpen(page, trigger);
-      const entrance = await entranceOf(page, layer);
-      expect(entrance.name).not.toBe('none');
-      expect(entrance.properties).toEqual(['opacity']);
-      // design:reduced-motion DR2: a cross-fade of 200 ms or less.
-      expect(entrance.duration).toBeGreaterThan(0);
-      expect(entrance.duration).toBeLessThanOrEqual(0.2);
-    });
-  });
-
-  test.describe(`${name} under a finger with Reduce Motion and a slow theme`, () => {
-    test.use(phone);
-
-    test('still cross-fades in 200 ms or less', async ({page}) => {
-      await page.emulateMedia({reducedMotion: 'reduce'});
-      await page.goto(
-        `${storybook.origin}/iframe.html?id=${story}&viewMode=story`,
-      );
-      // A theme whose fast duration is longer than the cap (DR2, DR4: no
-      // theme value keeps a longer fade under Reduce Motion).
-      await page.addStyleTag({
-        content: ':root, [popover] { --duration-fast-max: 400ms !important; }',
-      });
-      await tapOpen(page, trigger);
-      const entrance = await entranceOf(page, layer);
-      expect(entrance.properties).toEqual(['opacity']);
-      expect(entrance.duration).toBeGreaterThan(0);
-      expect(entrance.duration).toBeLessThanOrEqual(0.2);
-    });
-  });
-
-  test.describe(`${name} under a finger without Reduce Motion`, () => {
-    test.use(phone);
-
-    test('keeps its entrance', async ({page}) => {
-      await page.emulateMedia({reducedMotion: 'no-preference'});
-      await page.goto(
-        `${storybook.origin}/iframe.html?id=${story}&viewMode=story`,
-      );
-      await tapOpen(page, trigger);
-      const entrance = await entranceOf(page, layer);
-      expect(entrance.properties).toEqual(['opacity', 'transform']);
-    });
-  });
-
-  test.describe(`${name} under a mouse with Reduce Motion`, () => {
-    test('still appears at once', async ({page}) => {
-      await page.emulateMedia({reducedMotion: 'reduce'});
-      await page.goto(
-        `${storybook.origin}/iframe.html?id=${story}&viewMode=story`,
-      );
-      await page.getByText(trigger, {exact: true}).hover();
-      const entrance = await entranceOf(page, layer);
-      expect(entrance.name).toBe('none');
-    });
-  });
-}

package/src/Layer/__tests__/TouchTrigger.a11y.chromium.spec.ts

@@ -1,200 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y always
-
-/**
- * @file TouchTrigger.a11y.chromium.spec.ts
- * @input The `Core/Tooltip` and `Core/HoverCard` Touch Triggers stories in a
- *   built Storybook, driven by real Chromium touch input (CDP) in a phone-sized
- *   viewport.
- * @output Real-engine proof that a hover layer answers a touch only once it is
- *   a tap: it opens when the finger lifts, stays shut while a finger rests on
- *   the trigger, never opens for a touch that turns into a scroll, and a
- *   tap-opened layer closes when a tap outside lifts or a scroll starts
- *   outside.
- * @position Run with `pnpm test:a11y-contract`. Only a real engine decides
- *   whether a touch is a tap, a scroll or a long press, so these outcomes
- *   cannot be shown in jsdom; the unit suites (Tooltip.test.tsx,
- *   HoverCard.test.tsx) cover the same rules on synthetic events.
- */
-
-import {
-  expect,
-  test,
-  type CDPSession,
-  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();
-});
-
-test.use({hasTouch: true, isMobile: true, viewport: {width: 390, height: 844}});
-
-interface Finger {
-  down(x: number, y: number): Promise<void>;
-  move(x: number, y: number): Promise<void>;
-  up(): Promise<void>;
-}
-
-async function openStory(page: Page, id: string): Promise<Finger> {
-  await page.goto(`${storybook.origin}/iframe.html?id=${id}&viewMode=story`);
-  // Room to scroll, so a drag is a page scroll the browser takes from us.
-  await page.evaluate(() => {
-    const spacer = document.createElement('div');
-    spacer.style.height = '2000px';
-    document.body.append(spacer);
-  });
-  const cdp: CDPSession = await page.context().newCDPSession(page);
-  return {
-    down: async (x, y) => {
-      await cdp.send('Input.dispatchTouchEvent', {
-        type: 'touchStart',
-        touchPoints: [{x, y}],
-      });
-    },
-    move: async (x, y) => {
-      await cdp.send('Input.dispatchTouchEvent', {
-        type: 'touchMove',
-        touchPoints: [{x, y}],
-      });
-    },
-    up: async () => {
-      await cdp.send('Input.dispatchTouchEvent', {
-        type: 'touchEnd',
-        touchPoints: [],
-      });
-    },
-  };
-}
-
-async function centerOf(target: Locator): Promise<[number, number]> {
-  const box = await target.boundingBox();
-  if (box == null) {
-    throw new Error('the trigger has no layout box');
-  }
-  return [
-    Math.round(box.x + box.width / 2),
-    Math.round(box.y + box.height / 2),
-  ];
-}
-
-/** A blank point of the page, away from every trigger. */
-const OUTSIDE: [number, number] = [360, 700];
-
-const cases = [
-  {
-    name: 'Tooltip',
-    story: 'core-tooltip--touch-triggers',
-    trigger: (page: Page) => page.getByText('hover-able term', {exact: true}),
-    action: (page: Page) => page.getByRole('button', {name: 'Save'}),
-    layer: '.astryx-tooltip:popover-open',
-  },
-  {
-    name: 'HoverCard',
-    story: 'core-hovercard--touch-triggers',
-    trigger: (page: Page) => page.getByText('Jane Doe', {exact: true}),
-    action: (page: Page) => page.getByRole('button', {name: 'Open profile'}),
-    layer: '.astryx-hover-card:popover-open',
-  },
-];
-
-for (const {name, story, trigger, action, layer} of cases) {
-  test.describe(`${name} under a finger`, () => {
-    test('opens when the tap lifts, not when the finger lands', async ({
-      page,
-    }) => {
-      const finger = await openStory(page, story);
-      const [x, y] = await centerOf(trigger(page));
-      await finger.down(x, y);
-      await page.waitForTimeout(150);
-      // The finger is still down: it may yet be starting a scroll.
-      await expect(page.locator(layer)).toHaveCount(0);
-      await finger.up();
-      await expect(page.locator(layer)).toHaveCount(1);
-    });
-
-    test('never opens for a touch that turns into a scroll', async ({page}) => {
-      const finger = await openStory(page, story);
-      const [x, y] = await centerOf(trigger(page));
-      await finger.down(x, y);
-      for (let step = 1; step <= 8; step += 1) {
-        await finger.move(x, y - step * 10);
-        await page.waitForTimeout(16);
-      }
-      await finger.up();
-      await page.waitForTimeout(300);
-      await expect(page.locator(layer)).toHaveCount(0);
-    });
-
-    test('stays shut while a finger rests on the trigger', async ({page}) => {
-      const finger = await openStory(page, story);
-      const [x, y] = await centerOf(trigger(page));
-      await finger.down(x, y);
-      await page.waitForTimeout(900);
-      // Nothing is decided until the finger lifts; whether a long hold still
-      // counts as a tap then is the engine's call (UIKit's own tap allows a
-      // hold of up to 1.5 s).
-      await expect(page.locator(layer)).toHaveCount(0);
-      await finger.up();
-    });
-
-    test('closes when a tap outside lifts, not when it lands', async ({
-      page,
-    }) => {
-      const finger = await openStory(page, story);
-      const [x, y] = await centerOf(trigger(page));
-      await finger.down(x, y);
-      await finger.up();
-      await expect(page.locator(layer)).toHaveCount(1);
-
-      await finger.down(...OUTSIDE);
-      await page.waitForTimeout(150);
-      await expect(page.locator(layer)).toHaveCount(1);
-      await finger.up();
-      await expect(page.locator(layer)).toHaveCount(0);
-    });
-
-    test('closes as soon as a scroll that starts outside takes the touch', async ({
-      page,
-    }) => {
-      const finger = await openStory(page, story);
-      const [x, y] = await centerOf(trigger(page));
-      await finger.down(x, y);
-      await finger.up();
-      await expect(page.locator(layer)).toHaveCount(1);
-
-      const [ox, oy] = OUTSIDE;
-      await finger.down(ox, oy);
-      for (let step = 1; step <= 8; step += 1) {
-        await finger.move(ox, oy - step * 10);
-        await page.waitForTimeout(16);
-      }
-      // Still down: the scroll took the touch, which is the dismissal.
-      await expect(page.locator(layer)).toHaveCount(0);
-      await finger.up();
-    });
-
-    test('leaves a tap on a trigger that acts to that trigger', async ({
-      page,
-    }) => {
-      const finger = await openStory(page, story);
-      const [x, y] = await centerOf(action(page));
-      await finger.down(x, y);
-      await finger.up();
-      await page.waitForTimeout(300);
-      await expect(page.locator(layer)).toHaveCount(0);
-    });
-  });
-}

package/src/Layer/anchorName.test.ts

@@ -1,146 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file anchorName.test.ts
- * @input Uses vitest, anchorName utilities
- * @output Unit tests for anchor-name list manipulation helpers
- * @position Testing; validates anchorName.ts implementation
- *
- * SYNC: When anchorName.ts changes, update tests to match new behavior
- */
-
-import {describe, it, expect} from 'vitest';
-import {
-  readAnchorNames,
-  writeAnchorNames,
-  addAnchorName,
-  removeAnchorName,
-} from './anchorName';
-
-function createMockElement(): HTMLElement {
-  const el = document.createElement('div');
-  return el;
-}
-
-describe('readAnchorNames', () => {
-  it('returns empty array for element with no anchor-name', () => {
-    const el = createMockElement();
-    expect(readAnchorNames(el)).toEqual([]);
-  });
-
-  it('reads a single anchor name', () => {
-    const el = createMockElement();
-    (el.style as unknown as Record<string, string>).anchorName = '--layer-1';
-    expect(readAnchorNames(el)).toEqual(['--layer-1']);
-  });
-
-  it('reads multiple comma-separated anchor names', () => {
-    const el = createMockElement();
-    (el.style as unknown as Record<string, string>).anchorName =
-      '--layer-1, --layer-2, --layer-3';
-    expect(readAnchorNames(el)).toEqual([
-      '--layer-1',
-      '--layer-2',
-      '--layer-3',
-    ]);
-  });
-
-  it('trims whitespace around names', () => {
-    const el = createMockElement();
-    (el.style as unknown as Record<string, string>).anchorName =
-      '  --layer-1 ,  --layer-2  ';
-    expect(readAnchorNames(el)).toEqual(['--layer-1', '--layer-2']);
-  });
-
-  it('returns empty array for empty string value', () => {
-    const el = createMockElement();
-    (el.style as unknown as Record<string, string>).anchorName = '';
-    expect(readAnchorNames(el)).toEqual([]);
-  });
-});
-
-describe('writeAnchorNames', () => {
-  it('writes names as comma-separated list', () => {
-    const el = createMockElement();
-    writeAnchorNames(el, ['--layer-1', '--layer-2']);
-    expect((el.style as unknown as Record<string, string>).anchorName).toBe(
-      '--layer-1, --layer-2',
-    );
-  });
-
-  it('writes empty string for empty array', () => {
-    const el = createMockElement();
-    writeAnchorNames(el, []);
-    expect((el.style as unknown as Record<string, string>).anchorName).toBe('');
-  });
-});
-
-describe('addAnchorName', () => {
-  it('adds name to element with no existing anchors', () => {
-    const el = createMockElement();
-    addAnchorName(el, '--layer-1');
-    expect((el.style as unknown as Record<string, string>).anchorName).toBe(
-      '--layer-1',
-    );
-  });
-
-  it('appends name to existing anchor list', () => {
-    const el = createMockElement();
-    (el.style as unknown as Record<string, string>).anchorName = '--layer-1';
-    addAnchorName(el, '--layer-2');
-    expect((el.style as unknown as Record<string, string>).anchorName).toBe(
-      '--layer-1, --layer-2',
-    );
-  });
-
-  it('does not duplicate an already-present name', () => {
-    const el = createMockElement();
-    (el.style as unknown as Record<string, string>).anchorName = '--layer-1';
-    addAnchorName(el, '--layer-1');
-    expect((el.style as unknown as Record<string, string>).anchorName).toBe(
-      '--layer-1',
-    );
-  });
-
-  it('supports multiple layers sharing one element', () => {
-    const el = createMockElement();
-    addAnchorName(el, '--menu-1');
-    addAnchorName(el, '--menu-2');
-    addAnchorName(el, '--menu-3');
-    expect(readAnchorNames(el)).toEqual(['--menu-1', '--menu-2', '--menu-3']);
-  });
-});
-
-describe('removeAnchorName', () => {
-  it('removes name from a multi-anchor list', () => {
-    const el = createMockElement();
-    (el.style as unknown as Record<string, string>).anchorName =
-      '--layer-1, --layer-2, --layer-3';
-    removeAnchorName(el, '--layer-2');
-    expect(readAnchorNames(el)).toEqual(['--layer-1', '--layer-3']);
-  });
-
-  it('removes the last remaining name, leaving empty string', () => {
-    const el = createMockElement();
-    (el.style as unknown as Record<string, string>).anchorName = '--layer-1';
-    removeAnchorName(el, '--layer-1');
-    expect((el.style as unknown as Record<string, string>).anchorName).toBe('');
-  });
-
-  it('is a no-op if name is not present', () => {
-    const el = createMockElement();
-    (el.style as unknown as Record<string, string>).anchorName =
-      '--layer-1, --layer-2';
-    removeAnchorName(el, '--layer-3');
-    expect(readAnchorNames(el)).toEqual(['--layer-1', '--layer-2']);
-  });
-
-  it('handles multiple add/remove cycles correctly', () => {
-    const el = createMockElement();
-    addAnchorName(el, '--menu-a');
-    addAnchorName(el, '--menu-b');
-    removeAnchorName(el, '--menu-a');
-    addAnchorName(el, '--menu-c');
-    expect(readAnchorNames(el)).toEqual(['--menu-b', '--menu-c']);
-  });
-});