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

package/src/TabList/__tests__/TabListOverflow.interaction.browser.spec.ts

@@ -1,99 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file TabListOverflow.interaction.browser.spec.ts
- * @input The built Overflow and WithMenu TabList stories, in a real browser,
- *   on a page whose reset lets flex items shrink below their content
- *   (`* { min-width: 0 }`)
- * @output Proof that every stop in an overflowing strip, each hugging tab
- *   and a TabMenu trigger, keeps at least its content's width while the
- *   strip scrolls
- * @position Layout evidence for Tab's and TabMenu's hug sizing in
- *   /packages/core/src/TabList
- */
-
-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();
-});
-
-/** Opens a built story and waits for its tab strip. */
-async function openStory(page: Page, id: string): Promise<void> {
-  const params = new URLSearchParams({id, viewMode: 'story'});
-  await page.goto(`${storybook.origin}/iframe.html?${params}`);
-  await page.locator('.astryx-tab-strip').first().waitFor();
-}
-
-/** A common page reset that lets flex items shrink below their content. */
-async function allowShrinkBelowContent(page: Page): Promise<void> {
-  await page.addStyleTag({content: '* { min-width: 0; }'});
-}
-
-/** Each stop's rendered width against its content's, and the strip's overflow. */
-async function measureStrip(page: Page) {
-  return page.evaluate(() => {
-    const strip = document.querySelector('.astryx-tab-strip');
-    if (strip == null) {
-      throw new Error('no tab strip');
-    }
-    let scroller: Element | null = strip;
-    while (
-      scroller != null &&
-      scroller.scrollWidth <= scroller.clientWidth + 1
-    ) {
-      scroller = scroller.parentElement;
-    }
-    const stops = [
-      ...strip.querySelectorAll<HTMLElement>(
-        'button:not(.astryx-tab-scroll-button)',
-      ),
-    ].map(stop => ({
-      label: stop.textContent?.trim() ?? '',
-      width: stop.getBoundingClientRect().width,
-      content: stop.scrollWidth,
-    }));
-    return {stops, scrolls: scroller != null};
-  });
-}
-
-test('in a narrow strip every hugging tab keeps its label width and the strip scrolls', async ({
-  page,
-}) => {
-  await page.setViewportSize({width: 362, height: 700});
-  await openStory(page, 'core-tablist--overflow');
-  await allowShrinkBelowContent(page);
-  const {stops, scrolls} = await measureStrip(page);
-  expect(stops.length).toBeGreaterThan(4);
-  for (const stop of stops) {
-    expect(stop.width, stop.label).toBeGreaterThanOrEqual(stop.content - 1);
-  }
-  expect(scrolls).toBe(true);
-});
-
-test('in a narrow strip with a TabMenu, the menu trigger keeps its width too', async ({
-  page,
-}) => {
-  await page.setViewportSize({width: 170, height: 700});
-  await openStory(page, 'core-tablist--with-menu');
-  await allowShrinkBelowContent(page);
-  const {stops} = await measureStrip(page);
-  const trigger = stops.find(stop => stop.label.startsWith('More'));
-  expect(trigger).toBeDefined();
-  for (const stop of stops) {
-    expect(stop.width, stop.label).toBeGreaterThanOrEqual(stop.content - 1);
-  }
-});

package/src/TabList/__tests__/TabPressPointer.interaction.browser.spec.ts

@@ -1,163 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file TabPressPointer.interaction.browser.spec.ts
- * @input Uses @playwright/test and the interaction harness (a built
- *   Storybook)
- * @output Proves a Tab's hover and press layer under a fine and a coarse
- *   primary pointer
- * @position Interaction proof for packages/core/src/TabList/Tab.tsx
- *
- * Tab's press layer has a hover branch and a coarse-pointer rule, which
- * StyleX makes exclusive. The outcome on every pointer: a fine pointer
- * paints the hover, then a pressed overlay that differs from it; under a
- * coarse pointer a finger's press paints as an image (`data-astryx-press`),
- * and the colour layer stays transparent while the tab is `:active`.
- * Chromium only: it holds a finger, and forces `:active`, through the
- * DevTools protocol.
- */
-
-import {expect, test, type CDPSession, type Page} from '@playwright/test';
-import {openStory, withStorybook} from '@astryxdesign/interaction-harness';
-
-const storybook = withStorybook(test);
-
-const TRANSPARENT = 'rgba(0, 0, 0, 0)';
-
-/** The "Projects" tab: not the story's current one. */
-function projectsTab(page: Page) {
-  return page.locator('button', {hasText: 'Projects'}).first();
-}
-
-/** The tab's colour layer (its first aria-hidden span) and the pointer. */
-async function tabState(page: Page): Promise<{
-  colour: string;
-  image: string;
-  press: string | null;
-  coarse: boolean;
-  hover: boolean;
-}> {
-  return projectsTab(page).evaluate(element => {
-    const layer = element.querySelector('span[aria-hidden="true"]');
-    const style = layer == null ? null : getComputedStyle(layer);
-    return {
-      colour: style?.backgroundColor ?? '',
-      image: style?.backgroundImage ?? '',
-      press: element.getAttribute('data-astryx-press'),
-      coarse: matchMedia('(pointer: coarse)').matches,
-      hover: matchMedia('(hover: hover)').matches,
-    };
-  });
-}
-
-/** The layer's colour once its transition has landed (three equal reads). */
-async function settledColour(page: Page): Promise<string> {
-  let last = '';
-  let same = 0;
-  for (let read = 0; read < 60 && same < 3; read++) {
-    const colour = (await tabState(page)).colour;
-    same = colour === last ? same + 1 : 1;
-    last = colour;
-    await page.waitForTimeout(50);
-  }
-  return last;
-}
-
-/** The tab's centre, in page coordinates. */
-async function tabCentre(page: Page): Promise<{x: number; y: number}> {
-  const box = await projectsTab(page).boundingBox();
-  if (box == null) {
-    throw new Error('the Projects tab has no box');
-  }
-  return {x: box.x + box.width / 2, y: box.y + box.height / 2};
-}
-
-/** A finger held on the tab's centre; returns the lift. */
-async function holdFinger(
-  page: Page,
-  cdp: CDPSession,
-): Promise<() => Promise<void>> {
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchStart',
-    touchPoints: [await tabCentre(page)],
-  });
-  return async () => {
-    await cdp.send('Input.dispatchTouchEvent', {
-      type: 'touchEnd',
-      touchPoints: [],
-    });
-  };
-}
-
-/** Puts the tab in `:active` (or out of it) through the DevTools protocol. */
-async function forceActive(cdp: CDPSession, isActive: boolean): Promise<void> {
-  await cdp.send('DOM.enable');
-  await cdp.send('CSS.enable');
-  const {root} = await cdp.send('DOM.getDocument', {depth: -1});
-  const {nodeIds} = await cdp.send('DOM.querySelectorAll', {
-    nodeId: root.nodeId,
-    selector: 'button',
-  });
-  for (const nodeId of nodeIds) {
-    const {outerHTML} = await cdp.send('DOM.getOuterHTML', {nodeId});
-    if (outerHTML.includes('Projects')) {
-      await cdp.send('CSS.forcePseudoState', {
-        nodeId,
-        forcedPseudoClasses: isActive ? ['active'] : [],
-      });
-      return;
-    }
-  }
-  throw new Error('the Projects tab has no node');
-}
-
-test.describe('Tab press layer by pointer', () => {
-  test.skip(
-    ({browserName}) => browserName !== 'chromium',
-    'Chromium holds a finger and forces :active through the DevTools protocol',
-  );
-
-  test.describe('fine pointer with hover', () => {
-    test.use({isMobile: false, hasTouch: false});
-    test('paints the hover, then a pressed overlay that differs from it', async ({
-      page,
-    }) => {
-      await openStory(page, storybook(), 'core-tablist--default');
-      await projectsTab(page).hover();
-      const state = await tabState(page);
-      expect(state.coarse).toBe(false);
-      expect(state.hover).toBe(true);
-      await expect
-        .poll(async () => (await tabState(page)).colour)
-        .not.toBe(TRANSPARENT);
-      const hovered = await settledColour(page);
-      await page.mouse.down();
-      // The pressed overlay is its own colour, not the hover paint held on.
-      await expect
-        .poll(async () => (await tabState(page)).colour)
-        .not.toBe(hovered);
-      expect(await settledColour(page)).not.toBe(hovered);
-      await page.mouse.up();
-    });
-  });
-
-  test("coarse pointer: a finger's press paints as an image, and the colour layer stays transparent while the tab is :active", async ({
-    page,
-  }) => {
-    await openStory(page, storybook(), 'core-tablist--default');
-    const cdp = await page.context().newCDPSession(page);
-    expect((await tabState(page)).coarse).toBe(true);
-    // The finger's press: the press model marks the tab, and the layer
-    // paints the pressed overlay as an image.
-    const lift = await holdFinger(page, cdp);
-    await expect.poll(async () => (await tabState(page)).press).toBe('on');
-    expect((await tabState(page)).image).not.toBe('none');
-    await lift();
-    await expect.poll(async () => (await tabState(page)).press).not.toBe('on');
-    // The tab in :active under the coarse pointer: the reset keeps the
-    // colour layer transparent, past any transition.
-    await forceActive(cdp, true);
-    expect(await settledColour(page)).toBe(TRANSPARENT);
-    await forceActive(cdp, false);
-  });
-});

package/src/TabList/__tests__/Tabs.a11y.chromium.spec.ts

@@ -1,199 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y release-only
-
-/**
- * @file Tabs.a11y.chromium.spec.ts
- * @input Uses the shared Tabs contract, Chromium harness, checked-in stories, inventory, and exact known failures
- * @output Real-browser and accessibility-tree evidence for explicit TabList Tabs parts
- * @position Browser lane required by AST-013; it makes no real-AT claim.
- */
-
-import {
-  expect,
-  test,
-  type CDPSession,
-  type Locator,
-  type Page,
-} from '@playwright/test';
-import {
-  TABS_PATTERN,
-  blockingResults,
-  checkAccessibilitySpec,
-  formatFailures,
-  formatReport,
-  neverExercised,
-  summarize,
-  unmatchedKnownFailures,
-  type BindingResult,
-} from '@astryxdesign/a11y-spec';
-import {
-  createChromiumHarness,
-  holdMotionStill,
-} from '@astryxdesign/a11y-spec/chromium';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-import {TABS_KNOWN_FAILURES} from './Tabs.a11y.known-failures';
-import {
-  TABS_BINDING_STATES,
-  type TabsBindingRow,
-  type TabsBindingState,
-} from './Tabs.a11y.states';
-
-let storybook: StaticServer;
-
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-function storyUrl(storyId: string): string {
-  return `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`;
-}
-
-function subjectFor(page: Page, state: TabsBindingRow): Locator {
-  const root = page.locator('#storybook-root');
-  if ('selector' in state.subject) {
-    return root.locator(state.subject.selector);
-  }
-  return root.getByRole(state.subject.role, {
-    name: state.subject.name,
-    includeHidden: true,
-  });
-}
-
-function relatedFor(
-  page: Page,
-  state: TabsBindingRow,
-): Readonly<Record<string, Locator>> {
-  const metadata = state as TabsBindingState;
-  const root = page.locator('#storybook-root');
-  return Object.fromEntries(
-    Object.entries(metadata.relations ?? {}).map(([name, relation]) => [
-      name,
-      root.locator(relation.selector),
-    ]),
-  );
-}
-
-async function mountState(page: Page, state: TabsBindingRow): Promise<void> {
-  await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
-  await holdMotionStill(page);
-  await subjectFor(page, state).waitFor({state: 'attached'});
-}
-
-async function runState(
-  page: Page,
-  cdp: CDPSession,
-  state: TabsBindingRow,
-): Promise<BindingResult> {
-  return checkAccessibilitySpec({
-    spec: TABS_PATTERN,
-    binding: state.binding,
-    state: state.id,
-    facts: state.facts,
-    knownFailures: TABS_KNOWN_FAILURES,
-    mount: async () => {
-      await mountState(page, state);
-      return createChromiumHarness({
-        page,
-        subject: subjectFor(page, state),
-        cdp,
-        visibleLabel: state.facts.visibleLabel ? undefined : null,
-        related: relatedFor(page, state),
-      });
-    },
-  });
-}
-
-test('every binding fact matches the rendered semantic state', async ({
-  page,
-}) => {
-  test.setTimeout(3 * 60 * 1000);
-  const cdp = await page.context().newCDPSession(page);
-  const wrong: string[] = [];
-
-  for (const state of TABS_BINDING_STATES) {
-    await mountState(page, state);
-    const subject = await createChromiumHarness({
-      page,
-      subject: subjectFor(page, state),
-      cdp,
-      related: relatedFor(page, state),
-    }).subject();
-    const computed = await subject.computed();
-
-    const expectedRole =
-      state.facts.part === 'tablist'
-        ? 'tablist'
-        : state.facts.part === 'tab'
-          ? 'tab'
-          : state.facts.active === false
-            ? null
-            : 'tabpanel';
-    if (computed.role !== expectedRole) {
-      wrong.push(
-        `${state.id}: declares role=${expectedRole}, browser exposes ${computed.role}`,
-      );
-    }
-    if (
-      state.facts.selected != null &&
-      computed.selected !== state.facts.selected
-    ) {
-      wrong.push(
-        `${state.id}: declares selected=${state.facts.selected}, browser exposes ${computed.selected}`,
-      );
-    }
-    if (
-      state.facts.disabled != null &&
-      computed.disabled !== state.facts.disabled
-    ) {
-      wrong.push(
-        `${state.id}: declares disabled=${state.facts.disabled}, browser exposes ${computed.disabled}`,
-      );
-    }
-  }
-
-  expect(wrong).toEqual([]);
-});
-
-// Each state's result, recorded by its own test below so the whole-suite check
-// at the end reads it instead of measuring every state a second time. A state
-// whose test did not run in this worker (a filtered run, or a worker restarted
-// after a failure) is measured by the whole-suite check itself.
-const recorded = new Map<string, BindingResult>();
-
-for (const state of TABS_BINDING_STATES) {
-  test(`${state.binding} [${state.id}] — ${state.summary}`, async ({page}) => {
-    test.setTimeout(3 * 60 * 1000);
-    const cdp = await page.context().newCDPSession(page);
-    const result = await runState(page, cdp, state);
-    recorded.set(state.id, result);
-    const report = summarize(TABS_PATTERN, [result]);
-    // eslint-disable-next-line no-console -- the report is this run's artifact
-    console.log(formatReport(report));
-    expect(formatFailures(blockingResults([result]))).toBe('');
-    expect(report.unrunLayers).toEqual([]);
-    expect(report.counts.unexpectedPass).toBe(0);
-  });
-}
-
-test('every expectation is exercised by at least one bound state', async ({
-  page,
-}) => {
-  test.setTimeout(5 * 60 * 1000);
-  const cdp = await page.context().newCDPSession(page);
-  const results: BindingResult[] = [];
-  for (const state of TABS_BINDING_STATES) {
-    results.push(recorded.get(state.id) ?? (await runState(page, cdp, state)));
-  }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(TABS_KNOWN_FAILURES, results)).toEqual([]);
-});

package/src/TabList/__tests__/Tabs.a11y.known-failures.ts

@@ -1,12 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Tabs.a11y.known-failures.ts
- * @input Uses KnownFailure from @astryxdesign/a11y-spec
- * @output Exact public-safe Tabs migration failures
- * @position AST-021 debt records; operational ownership remains outside public source.
- */
-
-import type {KnownFailure} from '@astryxdesign/a11y-spec';
-
-export const TABS_KNOWN_FAILURES: ReadonlyArray<KnownFailure> = [];

package/src/TabList/__tests__/Tabs.a11y.renders.tsx

@@ -1,92 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file Tabs.a11y.renders.tsx
- * @input Uses TabList, Tab, React state, and the checked Tabs state inventory
- * @output Consumer-realistic explicit Tabs render functions shared by jsdom and Storybook
- * @position Binding fixture layer; navigation, callbacks, styling, and TabMenu stay local.
- */
-
-import {useState, type ReactElement} from 'react';
-import {Tab, TabList} from '../index';
-import type {TabsStateId} from './Tabs.a11y.states';
-
-function TabsFixture({
-  direction = 'ltr',
-  disabledActivity = false,
-  hiddenSelectedLabel = false,
-}: {
-  direction?: 'ltr' | 'rtl';
-  disabledActivity?: boolean;
-  hiddenSelectedLabel?: boolean;
-}) {
-  const [value, setValue] = useState('overview');
-  const panels = {
-    overview: 'Everything at a glance.',
-    activity: 'What happened recently.',
-    members: 'Who has access.',
-  } as const;
-
-  return (
-    <div dir={direction}>
-      <button type="button">Before tabs</button>
-      <TabList
-        value={value}
-        onChange={setValue}
-        role="tablist"
-        aria-label="Project views">
-        <Tab
-          value="overview"
-          label="Overview"
-          id="tabs-a11y-tab-overview"
-          panelId="tabs-a11y-panel-overview"
-          isLabelHidden={hiddenSelectedLabel}
-          icon={
-            hiddenSelectedLabel ? <span aria-hidden="true">▣</span> : undefined
-          }
-        />
-        <Tab
-          value="activity"
-          label="Activity"
-          id="tabs-a11y-tab-activity"
-          panelId="tabs-a11y-panel-activity"
-          aria-disabled={disabledActivity || undefined}
-        />
-        <Tab
-          value="members"
-          label="Members"
-          id="tabs-a11y-tab-members"
-          panelId="tabs-a11y-panel-members"
-        />
-      </TabList>
-      {Object.entries(panels).map(([key, content]) => (
-        <div
-          key={key}
-          id={`tabs-a11y-panel-${key}`}
-          role="tabpanel"
-          aria-labelledby={`tabs-a11y-tab-${key}`}
-          tabIndex={0}
-          hidden={value !== key}>
-          {content}
-        </div>
-      ))}
-      <button type="button">After tabs</button>
-    </div>
-  );
-}
-
-export type TabsStateRender = () => ReactElement;
-
-export const TABS_STATE_RENDERS: Record<TabsStateId, TabsStateRender> = {
-  'tab-list-selected-ltr': () => <TabsFixture />,
-  'tab-list-selected-rtl': () => <TabsFixture direction="rtl" />,
-  'tab-list-disabled-skip': () => <TabsFixture disabledActivity />,
-  'tab-selected-visible-label': () => <TabsFixture />,
-  'tab-unselected-visible-label': () => <TabsFixture />,
-  'tab-disabled-unselected': () => <TabsFixture disabledActivity />,
-  'tab-selected-hidden-label': () => <TabsFixture hiddenSelectedLabel />,
-  'tabpanel-active': () => <TabsFixture />,
-  'tabpanel-inactive': () => <TabsFixture />,
-};