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

package/src/Resizable/__tests__/ResizeHandle.a11y.chromium.spec.ts

@@ -1,120 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y scope ^(internal/a11y-spec/src/patterns/window-splitter|internal/a11y-spec/src/harness|packages/core/src/Resizable/|apps/storybook/stories/WindowSplitterA11y)
-
-/**
- * @file ResizeHandle.a11y.chromium.spec.ts
- * @input Built ResizeHandle stories and WINDOW_SPLITTER_PATTERN in real Chromium
- * @output Browser evidence for every window-splitter expectation across the binding's states, reconciled against the exact known failures
- * @position Chromium lane of the ResizeHandle binding (component:Resizable AR1)
- */
-
-import {
-  expect,
-  test,
-  type CDPSession,
-  type Locator,
-  type Page,
-} from '@playwright/test';
-import {
-  WINDOW_SPLITTER_PATTERN,
-  blockingResults,
-  checkAccessibilitySpec,
-  formatFailures,
-  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 {RESIZE_HANDLE_KNOWN_FAILURES} from './ResizeHandle.a11y.known-failures';
-import {
-  RESIZE_HANDLE_BINDING_STATES,
-  type ResizeHandleBindingState,
-} from './ResizeHandle.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`;
-}
-
-async function mountState(
-  page: Page,
-  state: ResizeHandleBindingState,
-): 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('separator', {name: state.label});
-  await subject.waitFor({state: 'attached'});
-  const pane = root.locator('#a11y-splitter-pane');
-  return {subject, related: {pane}};
-}
-
-async function runState(
-  page: Page,
-  cdp: CDPSession,
-  state: ResizeHandleBindingState,
-): Promise<BindingResult> {
-  return checkAccessibilitySpec({
-    spec: WINDOW_SPLITTER_PATTERN,
-    binding: 'ResizeHandle',
-    state: state.id,
-    facts: state.facts,
-    knownFailures: RESIZE_HANDLE_KNOWN_FAILURES,
-    mount: async () => {
-      const {subject, related} = await mountState(page, state);
-      return createChromiumHarness({page, cdp, subject, related});
-    },
-  });
-}
-
-test('every window-splitter expectation is exercised by a ResizeHandle state', async ({
-  page,
-}) => {
-  // One test mounts and checks every binding state in turn: about 20s on an
-  // idle machine, three times that when the contract run shares a runner's
-  // cores, so the default 60s ran out mid-loop on whichever state it reached.
-  // Budget it like the other whole-inventory sweeps (Button, Checkbox).
-  test.setTimeout(3 * 60 * 1000);
-  const cdp = await page.context().newCDPSession(page);
-  const results: BindingResult[] = [];
-  for (const state of RESIZE_HANDLE_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
-  }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(RESIZE_HANDLE_KNOWN_FAILURES, results)).toEqual(
-    [],
-  );
-});
-
-for (const state of RESIZE_HANDLE_BINDING_STATES) {
-  test(`ResizeHandle [${state.id}] — ${state.summary}`, async ({page}) => {
-    const cdp = await page.context().newCDPSession(page);
-    const result = await runState(page, cdp, state);
-    const report = summarize(WINDOW_SPLITTER_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/Resizable/__tests__/ResizeHandle.a11y.known-failures.ts

@@ -1,39 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file ResizeHandle.a11y.known-failures.ts
- * @input The exact window-splitter failures the shipped ResizeHandle produces today
- * @output RESIZE_HANDLE_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 ResizeHandle binding
- */
-
-import type {KnownFailure} from '@astryxdesign/a11y-spec';
-
-export const RESIZE_HANDLE_KNOWN_FAILURES: ReadonlyArray<KnownFailure> = [
-  {
-    expectation: 'windowsplitter.separator.maximum',
-    binding: 'ResizeHandle',
-    state: 'bare-unbounded-in-container',
-    evidenceLayer: 'dom',
-    failureEquals: 'the splitter exposes no aria-valuemax',
-    standardsReference:
-      'WAI-ARIA separator (focusable): aria-valuemax; APG Window Splitter states and properties; Astryx component:Resizable AR1 (an unbounded Handle in a container that no percentage bound observes carries no aria-valuemax, because measuring that container would add an observer to a region whose bounds are all in pixels).',
-    userImpact:
-      'A screen-reader user on a handle whose pixel-only region sits in a container and sets no maximum hears a value and a minimum but no maximum.',
-    reason:
-      'A recorded gap with a reason the record owns (Performance and resources: atomic pixel paths add no observer); it closes only with a record decision, not a fix.',
-  },
-  {
-    expectation: 'windowsplitter.separator.controls-pane',
-    binding: 'ResizeHandle',
-    state: 'bare-documented-usage',
-    evidenceLayer: 'dom',
-    failureEquals: 'the splitter carries no aria-controls',
-    standardsReference:
-      'APG Window Splitter states and properties: the separator has aria-controls set to the id of the primary pane; Astryx component:Resizable AR1 (the Handle names the pane it resizes with aria-controls only when its caller passes one).',
-    userImpact:
-      'A screen-reader user on a handle rendered the documented minimal way hears a separator with no named pane; the relationship exists only when the caller wires it (SideNav does).',
-    reason:
-      'A recorded gap the record owns: whether the Handle should derive the pane relationship itself is a component decision for its own spec-backed patch.',
-  },
-];

package/src/Resizable/__tests__/ResizeHandle.a11y.renders.tsx

@@ -1,80 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file ResizeHandle.a11y.renders.tsx
- * @input One ResizeHandle 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 ResizeHandle binding
- */
-
-import {useRef, type ReactElement} from 'react';
-import {ResizeHandle} from '../ResizeHandle';
-import {useResizable} from '../useResizable';
-import type {ResizeHandleBindingState} from './ResizeHandle.a11y.states';
-
-/** The id the binding gives the pane the bare handle controls. */
-export const BARE_PANE_ID = 'a11y-splitter-pane';
-
-function BareSplitter({state}: {state: ResizeHandleBindingState}) {
-  const direction = state.direction ?? 'horizontal';
-  const containerRef = useRef<HTMLDivElement>(null);
-  const region = useResizable({
-    containerRef: state.inContainer ? containerRef : undefined,
-    defaultSize: state.facts.valueNow,
-    minSize: state.facts.valueMin,
-    maxSize: state.maxSize === null ? undefined : (state.facts.valueMax ?? 400),
-    direction,
-    collapsible: state.facts.collapsible,
-    collapsedSize: state.collapsedSize,
-    defaultIsCollapsed: state.startsCollapsed,
-    snaps: state.snaps ? [...state.snaps] : undefined,
-  });
-  const isHorizontal = direction === 'horizontal';
-  const pane = (
-    <div
-      id={BARE_PANE_ID}
-      style={{
-        ...(isHorizontal ? {width: region.size} : {height: region.size}),
-        background: 'var(--astryx-bg-surface, #f2f2f2)',
-        padding: 12,
-      }}>
-      Details
-    </div>
-  );
-  const handle = (
-    <ResizeHandle
-      resizable={region.props}
-      label={state.label}
-      direction={direction}
-      isReversed={state.isReversed}
-      isDisabled={state.disabled}
-      aria-controls={state.withoutControls ? undefined : BARE_PANE_ID}
-    />
-  );
-  return (
-    <div
-      ref={containerRef}
-      style={{
-        display: 'flex',
-        flexDirection: isHorizontal ? 'row' : 'column',
-        width: 600,
-        height: 320,
-      }}>
-      {state.isReversed ? handle : pane}
-      {state.isReversed ? pane : handle}
-      <div style={{flex: 1, padding: 12}}>Main content</div>
-    </div>
-  );
-}
-
-export function renderResizeHandleState(
-  state: ResizeHandleBindingState,
-): ReactElement {
-  return (
-    <div dir={state.rtl ? 'rtl' : 'ltr'} style={{padding: 16}}>
-      <BareSplitter state={state} />
-    </div>
-  );
-}

package/src/Resizable/__tests__/ResizeHandle.a11y.states.ts

@@ -1,197 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file ResizeHandle.a11y.states.ts
- * @input ResizeHandle's representative splitter states and the facts WINDOW_SPLITTER_PATTERN reads
- * @output RESIZE_HANDLE_BINDING_STATES and the explicit ownership exclusions for this binding
- * @position Binding inventory shared by the jsdom test, the Chromium spec, and the story (component:Resizable AR1)
- */
-
-import type {WindowSplitterStateFacts} from '@astryxdesign/a11y-spec';
-
-export interface ResizeHandleBindingState {
-  readonly id: string;
-  readonly summary: string;
-  readonly storyId: string;
-  /** Which composition renders the handle; SideNav's binding follows separately. */
-  readonly component: 'ResizeHandle';
-  /** The separator's accessible name. */
-  readonly label: string;
-  readonly facts: WindowSplitterStateFacts;
-  /** Bare-handle configuration. */
-  readonly direction?: 'horizontal' | 'vertical';
-  readonly isReversed?: boolean;
-  readonly rtl?: boolean;
-  readonly maxSize?: number | null;
-  /** The hook's collapse threshold, when the state sets one. */
-  readonly collapsedSize?: number;
-  /** Start the pane collapsed (`defaultIsCollapsed`). */
-  readonly startsCollapsed?: boolean;
-  /** Pass a `containerRef` (a pixel-only region inside a container). */
-  readonly inContainer?: boolean;
-  /** Snap points for the region (`snaps`). */
-  readonly snaps?: ReadonlyArray<number>;
-  /** Render the documented minimal usage: no `aria-controls` passed. */
-  readonly withoutControls?: boolean;
-  readonly disabled?: boolean;
-}
-
-function facts(
-  overrides: Partial<WindowSplitterStateFacts> = {},
-): WindowSplitterStateFacts {
-  return {
-    valueNow: 200,
-    valueMin: 100,
-    valueMax: 400,
-    orientation: 'vertical',
-    increaseKey: 'ArrowRight',
-    step: 10,
-    operable: true,
-    collapsible: false,
-    ...overrides,
-  };
-}
-
-const story = (id: string) => `a11y-windowsplitter--${id}`;
-
-export const RESIZE_HANDLE_BINDING_STATES = [
-  {
-    id: 'bare-horizontal',
-    summary: 'a bare ResizeHandle on the end side of a 200px pane (100–400)',
-    storyId: story('bare-horizontal'),
-    component: 'ResizeHandle',
-    label: 'Resize details pane',
-    facts: facts(),
-  },
-  {
-    id: 'bare-vertical',
-    summary: 'a bare ResizeHandle below a 200px pane: ArrowDown grows it',
-    storyId: story('bare-vertical'),
-    component: 'ResizeHandle',
-    label: 'Resize log pane',
-    facts: facts({orientation: 'horizontal', increaseKey: 'ArrowDown'}),
-    direction: 'vertical',
-  },
-  {
-    id: 'bare-reversed',
-    summary:
-      'a bare ResizeHandle on the start side of its pane: ArrowLeft grows it',
-    storyId: story('bare-reversed'),
-    component: 'ResizeHandle',
-    label: 'Resize details pane',
-    facts: facts({increaseKey: 'ArrowLeft'}),
-    isReversed: true,
-  },
-  {
-    id: 'bare-rtl',
-    summary:
-      'a bare ResizeHandle on a right-to-left page: the inline arrows follow the reading direction',
-    storyId: story('bare-rtl'),
-    component: 'ResizeHandle',
-    label: 'Resize details pane',
-    facts: facts({increaseKey: 'ArrowLeft'}),
-    rtl: true,
-  },
-  {
-    id: 'bare-collapsible',
-    summary:
-      'a bare ResizeHandle on a collapsible pane: Enter collapses and restores',
-    storyId: story('bare-collapsible'),
-    component: 'ResizeHandle',
-    label: 'Resize details pane',
-    facts: facts({collapsible: true}),
-  },
-  {
-    id: 'bare-small-min',
-    summary:
-      'a bare ResizeHandle on a collapsible pane whose minimum sits below the collapse threshold',
-    storyId: story('bare-small-min'),
-    component: 'ResizeHandle',
-    label: 'Resize details pane',
-    facts: facts({collapsible: true, valueMin: 20}),
-    collapsedSize: 50,
-  },
-  {
-    id: 'bare-start-collapsed',
-    summary:
-      'a bare ResizeHandle on a pane that starts collapsed: it announces the minimum as its value',
-    storyId: story('bare-start-collapsed'),
-    component: 'ResizeHandle',
-    label: 'Resize details pane',
-    // Collapsed, the handle announces the minimum (100) as its value.
-    facts: facts({collapsible: true, startsCollapsed: true, valueNow: 100}),
-    startsCollapsed: true,
-  },
-  {
-    id: 'bare-unbounded',
-    summary: 'a bare ResizeHandle whose region sets no maximum',
-    storyId: story('bare-unbounded'),
-    component: 'ResizeHandle',
-    label: 'Resize details pane',
-    facts: facts({valueMax: null}),
-    maxSize: null,
-  },
-  {
-    id: 'bare-unbounded-in-container',
-    summary:
-      'a bare ResizeHandle whose pixel-only region sets no maximum and passes a containerRef: the first useResizable example',
-    storyId: story('bare-unbounded-in-container'),
-    component: 'ResizeHandle',
-    label: 'Resize details pane',
-    facts: facts({valueMax: null}),
-    maxSize: null,
-    inContainer: true,
-  },
-  {
-    id: 'bare-snapped',
-    summary:
-      'a bare ResizeHandle whose region sets snap points [100, 200, 300, 400]: an arrow moves to the adjacent point',
-    storyId: story('bare-snapped'),
-    component: 'ResizeHandle',
-    label: 'Resize details pane',
-    // One arrow moves to the adjacent point: 100px apart here.
-    facts: facts({step: 100}),
-    snaps: [100, 200, 300, 400],
-  },
-  {
-    id: 'bare-documented-usage',
-    summary:
-      'the documented minimal usage — <ResizeHandle direction resizable={region.props} /> with no aria-controls passed',
-    storyId: story('bare-documented-usage'),
-    component: 'ResizeHandle',
-    label: 'Resize details pane',
-    facts: facts(),
-    withoutControls: true,
-  },
-  {
-    id: 'bare-disabled',
-    summary: 'a disabled ResizeHandle: out of the Tab order and unmoving',
-    storyId: story('bare-disabled'),
-    component: 'ResizeHandle',
-    label: 'Resize details pane',
-    facts: facts({operable: false}),
-    disabled: true,
-  },
-] as const satisfies ReadonlyArray<ResizeHandleBindingState>;
-
-export const RESIZE_HANDLE_EXCLUSIONS = [
-  {
-    id: 'sidenav-binding',
-    owner:
-      'SideNav.test.tsx until SideNav binds this contract in its own change',
-    reason:
-      'SideNav renders ResizeHandle in overlay position with its own collapse coupling and translated label, and hides the handle entirely while the nav is collapsed, so the collapse-and-restore row cannot run against it as written; SideNav binds separately with states shaped for that.',
-  },
-  {
-    id: 'pointer-drag-model',
-    owner: 'ResizeHandle.test.tsx pointer suites',
-    reason:
-      "Dragging (pointer capture on the grab zone, ignoring a pointer that does not own the drag, ending on pointercancel or lost capture), double-click collapse and restore, and the grab-zone geometry are pointer behavior outside the keyboard-and-semantics pattern; the component's own jsdom pointer suites prove them. ResizeHandle has no Escape cancel and no Chromium pointer suite.",
-  },
-  {
-    id: 'pane-cycling',
-    owner: 'component:Resizable AR1 (not adopted) and the composing page',
-    reason:
-      "F6 pane cycling is an optional part of the APG pattern that the record does not adopt; which panes exist and how focus cycles among them is the composing page's decision.",
-  },
-] as const;

package/src/Resizable/__tests__/ResizeHandle.a11y.test.tsx

@@ -1,123 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/** @vitest-environment jsdom */
-
-/**
- * @file ResizeHandle.a11y.test.tsx
- * @input WINDOW_SPLITTER_PATTERN bound to ResizeHandle's representative states
- * @output jsdom-lane proof of the DOM expectations and an honest "unrun" report for the browser layers
- * @position Binding test for component:Resizable AR1 (the Chromium spec covers the rest)
- */
-
-import {cleanup, render, screen} from '@testing-library/react';
-import {describe, expect, it} from 'vitest';
-import {
-  WINDOW_SPLITTER_PATTERN,
-  checkAccessibilitySpec,
-  createJsdomHarness,
-  expectAccessibilitySpec,
-  summarize,
-  type BindingResult,
-} from '@astryxdesign/a11y-spec';
-import {RESIZE_HANDLE_KNOWN_FAILURES} from './ResizeHandle.a11y.known-failures';
-import {
-  BARE_PANE_ID,
-  renderResizeHandleState,
-} from './ResizeHandle.a11y.renders';
-import {
-  RESIZE_HANDLE_BINDING_STATES,
-  RESIZE_HANDLE_EXCLUSIONS,
-  type ResizeHandleBindingState,
-} from './ResizeHandle.a11y.states';
-
-function separator(state: ResizeHandleBindingState): HTMLElement {
-  return screen.getByRole('separator', {name: state.label});
-}
-
-function pane(): HTMLElement {
-  const element = document.getElementById(BARE_PANE_ID);
-  if (element == null) {
-    throw new Error('the bare pane is not rendered');
-  }
-  return element;
-}
-
-async function checkState(
-  state: ResizeHandleBindingState,
-): Promise<BindingResult> {
-  return checkAccessibilitySpec({
-    spec: WINDOW_SPLITTER_PATTERN,
-    binding: 'ResizeHandle',
-    state: state.id,
-    facts: state.facts,
-    knownFailures: RESIZE_HANDLE_KNOWN_FAILURES,
-    mount: async () => {
-      render(renderResizeHandleState(state));
-      return createJsdomHarness({
-        subject: separator(state),
-        related: {pane: pane()},
-      });
-    },
-    unmount: cleanup,
-  });
-}
-
-describe('ResizeHandle — window splitter pattern, jsdom lane', () => {
-  it.each(
-    RESIZE_HANDLE_BINDING_STATES.map(
-      state => [state.id, state.summary, state] as const,
-    ),
-  )('%s — %s', async (_id, _summary, state) => {
-    await expectAccessibilitySpec({
-      spec: WINDOW_SPLITTER_PATTERN,
-      binding: 'ResizeHandle',
-      state: state.id,
-      facts: state.facts,
-      knownFailures: RESIZE_HANDLE_KNOWN_FAILURES,
-      render: () => {
-        render(renderResizeHandleState(state));
-      },
-      subject: () => separator(state),
-      related: () => ({pane: pane()}),
-      cleanup,
-    });
-  });
-
-  it('runs the DOM layer and reports the browser-owned outcomes as unrun', async () => {
-    const results: BindingResult[] = [];
-    for (const state of RESIZE_HANDLE_BINDING_STATES) {
-      results.push(await checkState(state));
-    }
-    const report = summarize(WINDOW_SPLITTER_PATTERN, results);
-    expect(report.counts.pass).toBeGreaterThan(0);
-    expect(report.unrunLayers).toEqual(['accessibility-tree', 'real-browser']);
-    expect(report.counts.unexpectedPass).toBe(0);
-  });
-});
-
-describe('ResizeHandle binding inventory', () => {
-  it('gives every representative state a distinct checked-in story', () => {
-    const stories = RESIZE_HANDLE_BINDING_STATES.map(state => state.storyId);
-    expect(new Set(stories).size).toBe(stories.length);
-  });
-
-  it('keeps pointer and pane-cycling ownership explicit', () => {
-    expect(RESIZE_HANDLE_EXCLUSIONS.map(exclusion => exclusion.id)).toEqual([
-      'sidenav-binding',
-      'pointer-drag-model',
-      'pane-cycling',
-    ]);
-    for (const exclusion of RESIZE_HANDLE_EXCLUSIONS) {
-      expect(exclusion.owner.length, exclusion.id).toBeGreaterThan(20);
-      expect(exclusion.reason.length, exclusion.id).toBeGreaterThan(80);
-    }
-  });
-
-  it('renders exactly one named separator and its pane for every state', () => {
-    for (const state of RESIZE_HANDLE_BINDING_STATES) {
-      render(renderResizeHandleState(state));
-      expect(separator(state), state.id).toBeTruthy();
-      expect(pane(), state.id).toBeTruthy();
-      cleanup();
-    }
-  });
-});