@astryxdesign/core 0.7.6-canary.eae5d92 → 0.7.6-canary.eae71cb

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

@@ -1,218 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y release-only
-
-/**
- * @file Dialog.a11y.chromium.spec.ts
- * @input Uses the modal-dialog contract, Chromium harness, static Storybook,
- *   dedicated Dialog stories, state inventory, and exact known failures
- * @output Browser-owned Dialog binding evidence for native modality,
- *   accessibility-tree exposure, focus entry and return, and background inertness
- * @position High-fidelity lane; jsdom binds only DOM semantics.
- */
-
-import {
-  expect,
-  test,
-  type CDPSession,
-  type Locator,
-  type Page,
-} from '@playwright/test';
-import {
-  MissingBindingCapability,
-  MODAL_DIALOG_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 {DIALOG_MODAL_KNOWN_FAILURES} from './Dialog.a11y.known-failures';
-import {
-  DIALOG_CONTRACT_BACKGROUND_LABEL,
-  DIALOG_CONTRACT_CLOSE_LABEL,
-  DIALOG_CONTRACT_OPEN_LABEL,
-  DIALOG_MODAL_BINDING_STATES,
-  type DialogModalBindingState,
-} from './Dialog.a11y.states';
-
-let storybook: StaticServer;
-
-type ModalFocusEntryGlobal = typeof globalThis & {
-  __astryxModalFocusEntryRecorderInstalled?: boolean;
-  __astryxModalFocusEntryWasModal?: boolean;
-};
-
-async function installModalFocusEntryRecorder(page: Page): Promise<void> {
-  await page.addInitScript(() => {
-    const runtime = globalThis as ModalFocusEntryGlobal;
-    if (runtime.__astryxModalFocusEntryRecorderInstalled === true) {
-      return;
-    }
-    runtime.__astryxModalFocusEntryRecorderInstalled = true;
-    runtime.__astryxModalFocusEntryWasModal = undefined;
-    document.addEventListener(
-      'focusin',
-      event => {
-        if (runtime.__astryxModalFocusEntryWasModal !== undefined) {
-          return;
-        }
-        const target = event.target;
-        if (!(target instanceof Element)) {
-          return;
-        }
-        const dialog = target.closest('dialog');
-        if (dialog instanceof HTMLDialogElement) {
-          runtime.__astryxModalFocusEntryWasModal = dialog.matches(':modal');
-        }
-      },
-      true,
-    );
-  });
-}
-
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-async function mountState(
-  page: Page,
-  state: DialogModalBindingState,
-): Promise<{
-  readonly root: Locator;
-  readonly subject: Locator;
-  readonly focusEntryWasModal: boolean | undefined;
-}> {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=${state.storyId}&viewMode=story`,
-    {waitUntil: 'load'},
-  );
-  await holdMotionStill(page);
-  const root = page.locator('#storybook-root');
-  const subject = root.locator('dialog');
-  await root.getByRole('button', {name: DIALOG_CONTRACT_OPEN_LABEL}).click();
-  await expect
-    .poll(async () => subject.evaluate(element => element.matches(':modal')))
-    .toBe(true);
-  const focusEntryWasModal = await page.evaluate(() => {
-    const runtime = globalThis as ModalFocusEntryGlobal;
-    return runtime.__astryxModalFocusEntryWasModal;
-  });
-  return {root, subject, focusEntryWasModal};
-}
-
-function initialTarget(
-  root: Locator,
-  subject: Locator,
-  state: DialogModalBindingState,
-): Locator {
-  switch (state.initialTarget.kind) {
-    case 'dialog':
-      return subject;
-    case 'heading':
-      return root.getByRole('heading', {name: state.initialTarget.name});
-    case 'textbox':
-      return root.getByRole('textbox', {name: state.initialTarget.name});
-  }
-}
-
-async function runState(
-  page: Page,
-  cdp: CDPSession,
-  state: DialogModalBindingState,
-): Promise<BindingResult> {
-  await installModalFocusEntryRecorder(page);
-  let focusEntryWasModal: boolean | undefined;
-  return checkAccessibilitySpec({
-    spec: MODAL_DIALOG_PATTERN,
-    binding: 'Dialog',
-    state: state.id,
-    facts: state.facts,
-    knownFailures: DIALOG_MODAL_KNOWN_FAILURES,
-    mount: async () => {
-      const mounted = await mountState(page, state);
-      const {root, subject} = mounted;
-      focusEntryWasModal = mounted.focusEntryWasModal;
-      return createChromiumHarness({
-        page,
-        subject,
-        visibleLabel:
-          state.visibleTitle == null
-            ? null
-            : root.getByRole('heading', {name: state.visibleTitle}),
-        cdp,
-        related: {
-          initial: initialTarget(root, subject, state),
-          close: root.getByRole('button', {name: DIALOG_CONTRACT_CLOSE_LABEL}),
-          invoker: root.getByRole('button', {
-            name: DIALOG_CONTRACT_OPEN_LABEL,
-          }),
-          background: root.getByRole('button', {
-            name: DIALOG_CONTRACT_BACKGROUND_LABEL,
-          }),
-        },
-      });
-    },
-    initialFocusEntry: async () => {
-      if (focusEntryWasModal === undefined) {
-        throw new MissingBindingCapability(
-          'Dialog binding supplies no focus-entry observation',
-        );
-      }
-      return {subjectWasModal: focusEntryWasModal};
-    },
-  });
-}
-
-// 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 DIALOG_MODAL_BINDING_STATES) {
-  test(`Dialog [${state.id}] — ${state.summary}`, async ({page}) => {
-    const cdp = await page.context().newCDPSession(page);
-    const result = await runState(page, cdp, state);
-    recorded.set(state.id, result);
-    const report = summarize(MODAL_DIALOG_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 and every known failure matches once', async ({
-  page,
-}) => {
-  test.setTimeout(5 * 60 * 1000);
-  const cdp = await page.context().newCDPSession(page);
-  const results: BindingResult[] = [];
-  for (const state of DIALOG_MODAL_BINDING_STATES) {
-    results.push(recorded.get(state.id) ?? (await runState(page, cdp, state)));
-  }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(DIALOG_MODAL_KNOWN_FAILURES, results)).toEqual(
-    [],
-  );
-});

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

@@ -1,28 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Dialog.a11y.known-failures.ts
- * @input Uses KnownFailure from @astryxdesign/a11y-spec
- * @output Exact public-safe baseline failures for Dialog's modal-dialog binding
- * @position Shared by the jsdom and Chromium bindings. These records preserve
- *   current behavior during test migration; they do not approve remediation.
- */
-
-import type {KnownFailure} from '@astryxdesign/a11y-spec';
-
-export const DIALOG_MODAL_KNOWN_FAILURES: ReadonlyArray<KnownFailure> = [
-  {
-    expectation: 'modal-dialog.focus.enters-after-modal',
-    binding: 'Dialog',
-    state: 'conditional-content-focus-restoration',
-    evidenceLayer: 'real-browser',
-    failureEquals:
-      "focus entered the dialog before it reached the browser's native modal state",
-    standardsReference:
-      'Astryx component:Dialog FR1 — native Dialog must become visibly modal before Dialog applies its component-owned initial-focus request.',
-    userImpact:
-      'When focus-requesting content mounts only while opening, focus enters the task before the browser has established the modal boundary that blocks the page behind it.',
-    reason:
-      'This migration records the existing focus-order violation without changing the overlapping Dialog implementation path.',
-  },
-];

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

@@ -1,107 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file Dialog.a11y.renders.tsx
- * @input Uses Dialog, DialogHeader, and the modal-dialog binding inventory
- * @output The one render map shared by Dialog's jsdom and Storybook bindings
- * @position Keeps both evidence lanes on identical component composition and
- *   controlled open/close wiring.
- */
-
-import {useState, type ReactElement, type ReactNode} from 'react';
-import {Dialog} from '../Dialog';
-import {DialogHeader} from '../DialogHeader';
-import {TextInput} from '../../TextInput';
-import {
-  DIALOG_CONTRACT_BACKGROUND_LABEL,
-  DIALOG_CONTRACT_CLOSE_LABEL,
-  DIALOG_CONTRACT_OPEN_LABEL,
-  type DialogModalBindingState,
-} from './Dialog.a11y.states';
-
-function DialogBinding({state}: {state: DialogModalBindingState}) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [name, setName] = useState('');
-
-  let content: ReactNode;
-  switch (state.render) {
-    case 'labelled-described':
-      content = (
-        <>
-          <DialogHeader title="Review changes" />
-          <div id="dialog-contract-description">
-            Confirm the changes before continuing.
-          </div>
-          <button type="button">Previous</button>
-          <button type="button" onClick={() => setIsOpen(false)}>
-            {DIALOG_CONTRACT_CLOSE_LABEL}
-          </button>
-        </>
-      );
-      break;
-    case 'explicit-focus':
-      content = (
-        <>
-          <DialogHeader title="Edit profile" />
-          <button type="button">Before requested field</button>
-          <TextInput
-            label="Name"
-            value={name}
-            onChange={setName}
-            hasAutoFocus
-          />
-          <button type="button" onClick={() => setIsOpen(false)}>
-            {DIALOG_CONTRACT_CLOSE_LABEL}
-          </button>
-        </>
-      );
-      break;
-    case 'conditional':
-      content = isOpen ? (
-        <>
-          <DialogHeader title="Sensitive review" />
-          <div>This content exists only while the task is open.</div>
-          <button type="button" onClick={() => setIsOpen(false)}>
-            {DIALOG_CONTRACT_CLOSE_LABEL}
-          </button>
-        </>
-      ) : null;
-      break;
-    case 'no-focusable':
-      content = <div>There are no controls in this task.</div>;
-      break;
-  }
-
-  const namingProps =
-    state.render === 'labelled-described'
-      ? {'aria-describedby': 'dialog-contract-description'}
-      : state.render === 'explicit-focus'
-        ? {}
-        : state.render === 'conditional'
-          ? {'aria-label': 'Sensitive review'}
-          : {'aria-label': 'Read terms'};
-
-  return (
-    <>
-      <button type="button" onClick={() => setIsOpen(true)}>
-        {DIALOG_CONTRACT_OPEN_LABEL}
-      </button>
-      <button type="button">{DIALOG_CONTRACT_BACKGROUND_LABEL}</button>
-      <Dialog
-        isOpen={isOpen}
-        onOpenChange={setIsOpen}
-        purpose={state.render === 'explicit-focus' ? 'form' : 'info'}
-        {...namingProps}>
-        {content}
-      </Dialog>
-    </>
-  );
-}
-
-export function renderDialogModalState(
-  state: DialogModalBindingState,
-): ReactElement {
-  return <DialogBinding state={state} />;
-}

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

@@ -1,104 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Dialog.a11y.states.ts
- * @input Uses ModalDialogStateFacts from @astryxdesign/a11y-spec
- * @output DIALOG_MODAL_BINDING_STATES — the Dialog states that can change the
- *   shared modal-dialog outcome
- * @position Data-only inventory shared by the jsdom and Chromium bindings.
- *
- * `purpose="required"` and AlertDialog are excluded because they expose
- * `alertdialog`, a distinct pattern. `isInline` is excluded because it
- * deliberately has no modal behavior. MobileNav is excluded because its
- * current record is draft and does not adopt this exact modal-dialog model.
- * Nested-surface ordering remains owned by family:overlay-dismissal and the
- * existing Dialog component tests.
- *
- * SYNC: Every storyId and label must match the dedicated stories in
- * /apps/storybook/stories/DialogA11y.stories.tsx.
- */
-
-import type {ModalDialogStateFacts} from '@astryxdesign/a11y-spec';
-
-export const DIALOG_CONTRACT_OPEN_LABEL = 'Open contract dialog';
-export const DIALOG_CONTRACT_BACKGROUND_LABEL = 'Background action';
-export const DIALOG_CONTRACT_CLOSE_LABEL = 'Close';
-
-export type DialogInitialTarget =
-  | {readonly kind: 'dialog'}
-  | {readonly kind: 'heading'; readonly name: string}
-  | {readonly kind: 'textbox'; readonly name: string};
-
-export interface DialogModalBindingState {
-  readonly id: string;
-  readonly summary: string;
-  readonly storyId: string;
-  readonly facts: ModalDialogStateFacts;
-  readonly initialTarget: DialogInitialTarget;
-  readonly visibleTitle: string | null;
-  readonly render:
-    'labelled-described' | 'explicit-focus' | 'conditional' | 'no-focusable';
-}
-
-const MODAL_FACTS = {
-  labelledBy: true,
-  hasDescriptionReference: false,
-  hasDeclaredInitialTarget: true,
-  usesNativeFocusFallback: false,
-  exercisesFocusRestoration: true,
-  makesBackgroundInert: true,
-} as const satisfies ModalDialogStateFacts;
-
-export const DIALOG_MODAL_BINDING_STATES: ReadonlyArray<DialogModalBindingState> =
-  [
-    {
-      id: 'labelled-described-default-title',
-      summary:
-        'an informational dialog labelled by DialogHeader, described by supporting text, and containing explicit actions',
-      storyId: 'a11y-dialog-modal-pattern--labelled-described-default-title',
-      render: 'labelled-described',
-      initialTarget: {kind: 'heading', name: 'Review changes'},
-      visibleTitle: 'Review changes',
-      facts: {
-        ...MODAL_FACTS,
-        hasDescriptionReference: true,
-      },
-    },
-    {
-      id: 'explicit-descendant-focus',
-      summary:
-        'a form dialog whose supported TextInput request wins over an earlier focusable action',
-      storyId: 'a11y-dialog-modal-pattern--explicit-descendant-focus',
-      render: 'explicit-focus',
-      initialTarget: {kind: 'textbox', name: 'Name'},
-      visibleTitle: 'Edit profile',
-      facts: MODAL_FACTS,
-    },
-    {
-      id: 'conditional-content-focus-restoration',
-      summary:
-        'a dialog whose focus-requesting content mounts only on the opening transition and unmounts on close',
-      storyId:
-        'a11y-dialog-modal-pattern--conditional-content-focus-restoration',
-      render: 'conditional',
-      initialTarget: {kind: 'heading', name: 'Sensitive review'},
-      visibleTitle: 'Sensitive review',
-      facts: {...MODAL_FACTS, labelledBy: false},
-    },
-    {
-      id: 'no-focusable-content',
-      summary:
-        'a named informational dialog with no eligible descendant focus request or tabbable content',
-      storyId: 'a11y-dialog-modal-pattern--no-focusable-content',
-      render: 'no-focusable',
-      initialTarget: {kind: 'dialog'},
-      visibleTitle: null,
-      facts: {
-        ...MODAL_FACTS,
-        labelledBy: false,
-        hasDeclaredInitialTarget: false,
-        usesNativeFocusFallback: true,
-        exercisesFocusRestoration: false,
-      },
-    },
-  ];

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

@@ -1,102 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/** @vitest-environment jsdom */
-
-/**
- * @file Dialog.a11y.test.tsx
- * @input Uses the shared modal-dialog contract, @testing-library/react, and the
- *   actual Dialog binding render map
- * @output Dialog's jsdom binding through expectAccessibilitySpec
- * @position Fast DOM-semantics lane. Browser-owned focus, top-layer, inertness,
- *   and computed-tree outcomes run in Dialog.a11y.chromium.spec.ts.
- */
-
-import {beforeEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, fireEvent, render, screen} from '@testing-library/react';
-import {
-  MODAL_DIALOG_PATTERN,
-  checkAccessibilitySpec,
-  createJsdomHarness,
-  expectAccessibilitySpec,
-  summarize,
-  type BindingResult,
-} from '@astryxdesign/a11y-spec';
-import {DIALOG_MODAL_KNOWN_FAILURES} from './Dialog.a11y.known-failures';
-import {renderDialogModalState} from './Dialog.a11y.renders';
-import {
-  DIALOG_CONTRACT_OPEN_LABEL,
-  DIALOG_MODAL_BINDING_STATES,
-  type DialogModalBindingState,
-} from './Dialog.a11y.states';
-
-beforeEach(() => {
-  HTMLDialogElement.prototype.showModal = vi.fn(function (
-    this: HTMLDialogElement,
-  ) {
-    this.setAttribute('open', '');
-  });
-  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
-    this.removeAttribute('open');
-  });
-});
-
-function renderState(state: DialogModalBindingState): void {
-  render(renderDialogModalState(state));
-  fireEvent.click(
-    screen.getByRole('button', {name: DIALOG_CONTRACT_OPEN_LABEL}),
-  );
-}
-
-function dialogSubject(): HTMLElement {
-  return screen.getByRole('dialog', {hidden: true});
-}
-
-async function expectState(state: DialogModalBindingState): Promise<void> {
-  await expectAccessibilitySpec({
-    spec: MODAL_DIALOG_PATTERN,
-    binding: 'Dialog',
-    state: state.id,
-    facts: state.facts,
-    knownFailures: DIALOG_MODAL_KNOWN_FAILURES,
-    render: () => renderState(state),
-    subject: dialogSubject,
-    cleanup,
-  });
-}
-
-async function checkState(
-  state: DialogModalBindingState,
-): Promise<BindingResult> {
-  return checkAccessibilitySpec({
-    spec: MODAL_DIALOG_PATTERN,
-    binding: 'Dialog',
-    state: state.id,
-    facts: state.facts,
-    knownFailures: DIALOG_MODAL_KNOWN_FAILURES,
-    mount: async () => {
-      renderState(state);
-      return createJsdomHarness({subject: dialogSubject()});
-    },
-    unmount: cleanup,
-  });
-}
-
-describe('Dialog — the shared modal-dialog pattern, jsdom lane', () => {
-  it.each(
-    DIALOG_MODAL_BINDING_STATES.map(
-      state => [state.id, state.summary, state] as const,
-    ),
-  )('%s (%s)', async (_id, _summary, state) => {
-    await expectState(state);
-  });
-
-  it('runs DOM semantics and reports browser-owned layers as unrun', async () => {
-    const results: BindingResult[] = [];
-    for (const state of DIALOG_MODAL_BINDING_STATES) {
-      results.push(await checkState(state));
-    }
-    const report = summarize(MODAL_DIALOG_PATTERN, results);
-    expect(report.counts.pass).toBeGreaterThan(0);
-    expect(report.unrunLayers).toEqual(['accessibility-tree', 'real-browser']);
-    expect(report.counts.unexpectedPass).toBe(0);
-  });
-});