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

package/src/Calendar/__tests__/Calendar.a11y.chromium.spec.ts

@@ -1,141 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y scope ^(internal/a11y-spec/src/patterns/grid|internal/a11y-spec/src/harness|packages/core/src/Calendar/|packages/core/src/hooks/useGridFocus|apps/storybook/stories/CalendarGridA11y)
-
-/**
- * @file Calendar.a11y.chromium.spec.ts
- * @input Built Calendar stories and GRID_PATTERN in real Chromium
- * @output Browser evidence for every grid expectation across the binding's states (role and name, arrows in reading order, Home/End, Enter)
- * @position Chromium lane of the Calendar grid binding (component:Calendar AR1)
- */
-
-import {
-  expect,
-  test,
-  type CDPSession,
-  type Locator,
-  type Page,
-} from '@playwright/test';
-import {
-  GRID_PATTERN,
-  blockingResults,
-  checkAccessibilitySpec,
-  formatFailures,
-  neverExercised,
-  unmatchedKnownFailures,
-  summarize,
-  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 {
-  CALENDAR_BINDING_STATES,
-  NEIGHBOURHOOD,
-  START_ISO,
-  type CalendarBindingState,
-} from './Calendar.a11y.states';
-import {CALENDAR_KNOWN_FAILURES} from './Calendar.a11y.known-failures';
-
-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`;
-}
-
-async function mountState(
-  page: Page,
-  state: CalendarBindingState,
-): Promise<{subject: Locator; related: Record<string, Locator>}> {
-  await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
-  await holdMotionStill(page);
-  const root = page.locator('#storybook-root');
-  const subject = root.getByRole('grid', {name: state.gridName});
-  await subject.waitFor({state: 'attached'});
-  const day = (iso: string) => root.locator(`button[data-date="${iso}"]`);
-  const start = day(START_ISO);
-  return {
-    subject,
-    related: {
-      start,
-      startCell: root.locator(
-        `[role="gridcell"]:has(> button[data-date="${START_ISO}"])`,
-      ),
-      ...Object.fromEntries(
-        Object.entries(NEIGHBOURHOOD).map(([name, iso]) => [name, day(iso)]),
-      ),
-    },
-  };
-}
-
-async function runState(
-  page: Page,
-  cdp: CDPSession,
-  state: CalendarBindingState,
-): Promise<BindingResult> {
-  return checkAccessibilitySpec({
-    spec: GRID_PATTERN,
-    binding: 'Calendar',
-    state: state.id,
-    facts: state.facts,
-    knownFailures: CALENDAR_KNOWN_FAILURES,
-    mount: async () => {
-      const {subject, related} = await mountState(page, state);
-      return createChromiumHarness({page, cdp, subject, related});
-    },
-  });
-}
-
-// Checking coverage runs every state again, which on a loaded runner nears
-// the per-test timeout as one test. It runs as one serial part per state,
-// sharing their results, then one check over all of them.
-test.describe('every grid expectation is exercised by a Calendar state', () => {
-  test.describe.configure({mode: 'serial'});
-  const results: BindingResult[] = [];
-
-  for (const state of CALENDAR_BINDING_STATES) {
-    test(`runs ${state.id}`, async ({page}) => {
-      const cdp = await page.context().newCDPSession(page);
-      results.push(await runState(page, cdp, state));
-    });
-  }
-
-  test('no expectation is left unexercised', () => {
-    // Every part ran in this worker; this test alone proves nothing.
-    expect(results.map(result => result.state).sort()).toEqual(
-      CALENDAR_BINDING_STATES.map(state => state.id).sort(),
-    );
-    expect(neverExercised(results)).toEqual([]);
-    expect(unmatchedKnownFailures(CALENDAR_KNOWN_FAILURES, results)).toEqual(
-      [],
-    );
-  });
-});
-
-for (const state of CALENDAR_BINDING_STATES) {
-  test(`Calendar [${state.id}] — ${state.summary}`, async ({page}) => {
-    const cdp = await page.context().newCDPSession(page);
-    const result = await runState(page, cdp, state);
-    const report = summarize(GRID_PATTERN, [result]);
-    // Required rows block (AST-020 FR9); advisory rows and exact known
-    // failures report.
-    expect(formatFailures(blockingResults([result]))).toBe('');
-    expect(report.unrunLayers).toEqual([]);
-    expect(report.counts.unexpectedPass).toBe(0);
-  });
-}

package/src/Calendar/__tests__/Calendar.a11y.known-failures.ts

@@ -1,12 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Calendar.a11y.known-failures.ts
- * @input The exact grid-contract failures the shipped Calendar produces today
- * @output CALENDAR_KNOWN_FAILURES — records both lanes reconcile against, so a fix shows up as an unexpected pass and any other failure stays a failure
- * @position Known-failure ledger for the Calendar binding
- */
-
-import type {KnownFailure} from '@astryxdesign/a11y-spec';
-
-export const CALENDAR_KNOWN_FAILURES: ReadonlyArray<KnownFailure> = [];

package/src/Calendar/__tests__/Calendar.a11y.renders.tsx

@@ -1,57 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file Calendar.a11y.renders.tsx
- * @input One Calendar binding state
- * @output The React tree every lane renders for that state (the jsdom test directly, the story through Storybook)
- * @position Shared fixture for the Calendar grid binding
- */
-
-import {useState, type ReactElement} from 'react';
-import {Calendar} from '../Calendar';
-import type {DateRange, ISODateString} from '../Calendar';
-import {START_ISO, type CalendarBindingState} from './Calendar.a11y.states';
-
-function BoundCalendar({state}: {state: CalendarBindingState}) {
-  const [single, setSingle] = useState<ISODateString | null>(
-    state.mode === 'single' && typeof state.value === 'string'
-      ? state.value
-      : null,
-  );
-  const [range, setRange] = useState<DateRange | null>(
-    state.mode === 'range' && typeof state.value === 'object'
-      ? state.value
-      : null,
-  );
-  if (state.mode === 'range') {
-    return (
-      <Calendar
-        mode="range"
-        value={range}
-        onChange={setRange}
-        focusDate={START_ISO}
-        numberOfMonths={state.numberOfMonths ?? 1}
-      />
-    );
-  }
-  return (
-    <Calendar
-      mode="single"
-      value={single}
-      onChange={setSingle}
-      focusDate={START_ISO}
-      numberOfMonths={state.numberOfMonths ?? 1}
-      hasWeekNumbers={state.hasWeekNumbers}
-    />
-  );
-}
-
-export function renderCalendarState(state: CalendarBindingState): ReactElement {
-  return (
-    <div dir={state.rtl ? 'rtl' : 'ltr'} style={{padding: 16}}>
-      <BoundCalendar state={state} />
-    </div>
-  );
-}

package/src/Calendar/__tests__/Calendar.a11y.states.ts

@@ -1,139 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Calendar.a11y.states.ts
- * @input Calendar's representative month-grid states and the facts GRID_PATTERN reads
- * @output CALENDAR_BINDING_STATES, the start-cell neighbourhood for each, and the explicit ownership exclusions for this binding
- * @position Binding inventory shared by the jsdom test, the Chromium spec, and the story (component:Calendar AR1)
- */
-
-import type {GridStateFacts} from '@astryxdesign/a11y-spec';
-import type {DateRange, ISODateString} from '../Calendar';
-
-/**
- * Every state starts on a mid-month day with a full neighbourhood inside the
- * same month row: January 14, 2026 is a Wednesday, so its row runs January
- * 11 (Sunday) to January 17 (Saturday), with January 7 above and 21 below.
- */
-export const START_ISO: ISODateString = '2026-01-14';
-export const NEIGHBOURHOOD = {
-  next: '2026-01-15',
-  previous: '2026-01-13',
-  below: '2026-01-21',
-  above: '2026-01-07',
-  rowStart: '2026-01-11',
-  rowEnd: '2026-01-17',
-} as const;
-
-export interface CalendarBindingState {
-  readonly id: string;
-  readonly summary: string;
-  readonly storyId: string;
-  /** The grid's accessible name (its month label). */
-  readonly gridName: string;
-  readonly facts: GridStateFacts;
-  readonly mode: 'single' | 'range';
-  readonly value?: ISODateString | DateRange;
-  readonly numberOfMonths?: 1 | 2;
-  /** Render ISO week numbers in a leading column (`hasWeekNumbers`). */
-  readonly hasWeekNumbers?: boolean;
-  readonly rtl?: boolean;
-}
-
-const ALL = [
-  'next',
-  'previous',
-  'below',
-  'above',
-  'rowStart',
-  'rowEnd',
-] as const;
-
-function facts(overrides: Partial<GridStateFacts> = {}): GridStateFacts {
-  return {
-    hasColumnHeaders: true,
-    rtl: false,
-    multiselectable: false,
-    selectedCount: 0,
-    enterSelectsStart: true,
-    neighbours: ALL,
-    ...overrides,
-  };
-}
-
-const story = (id: string) => `a11y-calendargrid--${id}`;
-
-export const CALENDAR_BINDING_STATES = [
-  {
-    id: 'single-selected',
-    summary:
-      'a single-mode Calendar with January 20 selected; focus starts on January 14',
-    storyId: story('single-selected'),
-    gridName: 'January 2026',
-    mode: 'single',
-    value: '2026-01-20',
-    facts: facts({selectedCount: 1}),
-  },
-  {
-    id: 'single-rtl',
-    summary:
-      'the same Calendar on a right-to-left page: ArrowLeft moves to the next day',
-    storyId: story('single-rtl'),
-    gridName: 'January 2026',
-    mode: 'single',
-    value: '2026-01-20',
-    rtl: true,
-    facts: facts({rtl: true, selectedCount: 1}),
-  },
-  {
-    id: 'single-week-numbers',
-    summary:
-      'a single-mode Calendar with week numbers: the header row gains a corner cell before the weekday headers',
-    storyId: story('single-week-numbers'),
-    gridName: 'January 2026',
-    mode: 'single',
-    value: '2026-01-20',
-    hasWeekNumbers: true,
-    facts: facts({selectedCount: 1}),
-  },
-  {
-    id: 'range-two-months',
-    summary:
-      'a two-month range Calendar with January 20–22 selected; the first grid is the subject',
-    storyId: story('range-two-months'),
-    gridName: 'January 2026',
-    mode: 'range',
-    value: {start: '2026-01-20', end: '2026-01-22'},
-    numberOfMonths: 2,
-    // Enter on a range Calendar starts a new range rather than selecting the
-    // day outright, so the activation row does not apply here.
-    facts: facts({
-      multiselectable: true,
-      selectedCount: 3,
-      enterSelectsStart: false,
-    }),
-  },
-] as const satisfies ReadonlyArray<CalendarBindingState>;
-
-export const CALENDAR_EXCLUSIONS = [
-  {
-    id: 'month-edge-crossing',
-    owner: 'component:Calendar FR5 and Calendar.test.tsx (cross-month suites)',
-    reason:
-      'An arrow at the edge of a month crosses into the neighbouring month and focuses the real day there; the APG grid pattern stops at the edge, and the record defines the crossing. Every binding state therefore starts mid-month, and the crossing stays with the component tests.',
-  },
-  {
-    id: 'disabled-day-arrows',
-    owner:
-      'Calendar.test.tsx (bounds and dateConstraints suites) and component:Calendar AR1',
-    reason:
-      "An arrow that meets a day disabled by `min`/`max` or a `dateConstraints` rule skips it and continues in the same direction, crossing the month edge when it must — a behaviour the Calendar record defines (AR1) beyond the APG grid's one-cell step, so this contract's arrow row keeps its states free of disabled days. Calendar.test.tsx proves the skip ('ArrowUp skips a disabled cell in the same column to the next enabled row (complex-2)', the weekdays-only and max-bound arrow cases) and owns it.",
-  },
-  {
-    id: 'page-keys-and-pointer',
-    owner:
-      'Calendar.test.tsx: the Page-key cases ("moves the focused day by a month with PageDown and PageUp, into the month now shown", "a page into a month with no enabled day changes nothing and keeps focus", "a page onto a day disabled by a constraint moves the month and focuses its first enabled day", "a page whose target lies past max changes nothing and keeps focus", "in a two-month view PageDown from the second month moves both months and a later Next click selects no stale day") and the pointer selection suites',
-    reason:
-      'PageUp/PageDown move by a month (author-determined in the APG, defined by component:Calendar AR1) and pointer selection are outside this keyboard-and-structure contract; the component tests own them.',
-  },
-] as const;

package/src/Calendar/__tests__/Calendar.a11y.test.tsx

@@ -1,137 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/** @vitest-environment jsdom */
-
-/**
- * @file Calendar.a11y.test.tsx
- * @input GRID_PATTERN bound to Calendar's representative month-grid states
- * @output jsdom-lane proof of the DOM expectations (structure, single Tab stop, selection) and an honest "unrun" report for the browser layers
- * @position Binding test for component:Calendar AR1 (the Chromium spec covers the rest)
- */
-
-import {cleanup, render, screen} from '@testing-library/react';
-import {describe, expect, it} from 'vitest';
-import {
-  GRID_PATTERN,
-  checkAccessibilitySpec,
-  createJsdomHarness,
-  expectAccessibilitySpec,
-  summarize,
-  type BindingResult,
-} from '@astryxdesign/a11y-spec';
-import {renderCalendarState} from './Calendar.a11y.renders';
-import {
-  CALENDAR_BINDING_STATES,
-  CALENDAR_EXCLUSIONS,
-  NEIGHBOURHOOD,
-  START_ISO,
-  type CalendarBindingState,
-} from './Calendar.a11y.states';
-import {CALENDAR_KNOWN_FAILURES} from './Calendar.a11y.known-failures';
-
-function grid(state: CalendarBindingState): HTMLElement {
-  return screen.getByRole('grid', {name: state.gridName});
-}
-
-function dayButton(iso: string): HTMLElement {
-  const button = document.querySelector<HTMLElement>(
-    `button[data-date="${iso}"]`,
-  );
-  if (button == null) {
-    throw new Error(`no day button for ${iso}`);
-  }
-  return button;
-}
-
-function related(): Record<string, HTMLElement> {
-  const start = dayButton(START_ISO);
-  const startCell = start.closest<HTMLElement>('[role="gridcell"]');
-  if (startCell == null) {
-    throw new Error('the start day is not inside a gridcell');
-  }
-  return {
-    start,
-    startCell,
-    ...Object.fromEntries(
-      Object.entries(NEIGHBOURHOOD).map(([name, iso]) => [
-        name,
-        dayButton(iso),
-      ]),
-    ),
-  };
-}
-
-async function checkState(state: CalendarBindingState): Promise<BindingResult> {
-  return checkAccessibilitySpec({
-    spec: GRID_PATTERN,
-    binding: 'Calendar',
-    state: state.id,
-    facts: state.facts,
-    knownFailures: CALENDAR_KNOWN_FAILURES,
-    mount: async () => {
-      render(renderCalendarState(state));
-      return createJsdomHarness({subject: grid(state), related: related()});
-    },
-    unmount: cleanup,
-  });
-}
-
-describe('Calendar — grid pattern, jsdom lane', () => {
-  it.each(
-    CALENDAR_BINDING_STATES.map(
-      state => [state.id, state.summary, state] as const,
-    ),
-  )('%s — %s', async (_id, _summary, state) => {
-    await expectAccessibilitySpec({
-      spec: GRID_PATTERN,
-      binding: 'Calendar',
-      state: state.id,
-      facts: state.facts,
-      knownFailures: CALENDAR_KNOWN_FAILURES,
-      render: () => {
-        render(renderCalendarState(state));
-      },
-      subject: () => grid(state),
-      related: () => related(),
-      cleanup,
-    });
-  });
-
-  it('runs the DOM layer and reports the browser-owned outcomes as unrun', async () => {
-    const results: BindingResult[] = [];
-    for (const state of CALENDAR_BINDING_STATES) {
-      results.push(await checkState(state));
-    }
-    const report = summarize(GRID_PATTERN, results);
-    expect(report.counts.pass).toBeGreaterThan(0);
-    expect(report.unrunLayers).toEqual(['accessibility-tree', 'real-browser']);
-    expect(report.counts.unexpectedPass).toBe(0);
-  });
-});
-
-describe('Calendar binding inventory', () => {
-  it('gives every representative state a distinct checked-in story', () => {
-    const stories = CALENDAR_BINDING_STATES.map(state => state.storyId);
-    expect(new Set(stories).size).toBe(stories.length);
-  });
-
-  it('keeps edge crossing, Page keys and pointer selection explicitly owned elsewhere', () => {
-    expect(CALENDAR_EXCLUSIONS.map(exclusion => exclusion.id)).toEqual([
-      'month-edge-crossing',
-      'disabled-day-arrows',
-      'page-keys-and-pointer',
-    ]);
-    for (const exclusion of CALENDAR_EXCLUSIONS) {
-      expect(exclusion.owner.length, exclusion.id).toBeGreaterThan(20);
-      expect(exclusion.reason.length, exclusion.id).toBeGreaterThan(80);
-    }
-  });
-
-  it('renders the named grid and the whole start neighbourhood for every state', () => {
-    for (const state of CALENDAR_BINDING_STATES) {
-      render(renderCalendarState(state));
-      expect(grid(state), state.id).toBeTruthy();
-      expect(Object.keys(related()), state.id).toHaveLength(8);
-      cleanup();
-    }
-  });
-});