@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

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

@@ -0,0 +1,139 @@
+// 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

@@ -0,0 +1,137 @@
+// 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();
+    }
+  });
+});

package/src/Carousel/Carousel.test.tsx

@@ -19,38 +19,75 @@ class MockResizeObserver {
 vi.stubGlobal('ResizeObserver', MockResizeObserver);
 
 describe('Carousel', () => {
-  it('renders children', () => {
+  // Retained local tests (AST-021 FR6): the carousel contract keeps the
+  // aria-roledescription outcomes ADVISORY until a current Carousel record
+  // adopts the APG parts, so these component assertions remain the gate for
+  // the slide and region role descriptions. Removal blocker: component:Carousel
+  // adopting APG Carousel's aria-roledescription as current.
+  it('has carousel ARIA attributes', () => {
     render(
-      <Carousel aria-label="Test carousel">
-        <div data-testid="item-1">Item 1</div>
-        <div data-testid="item-2">Item 2</div>
+      <Carousel aria-label="Photos">
+        <div>Item</div>
       </Carousel>,
     );
-    expect(screen.getByTestId('item-1')).toBeInTheDocument();
-    expect(screen.getByTestId('item-2')).toBeInTheDocument();
+    const region = screen.getByRole('region', {name: 'Photos'});
+    expect(region).toHaveAttribute('aria-roledescription', 'carousel');
   });
 
-  it('has carousel ARIA attributes', () => {
+  it('exposes each slide as a group with aria-roledescription="slide" and a positional name', () => {
     render(
       <Carousel aria-label="Photos">
-        <div>Item</div>
+        <div>One</div>
+        <div>Two</div>
+        <div>Three</div>
       </Carousel>,
     );
-    const region = screen.getByRole('region', {name: 'Photos'});
-    expect(region).toHaveAttribute('aria-roledescription', 'carousel');
+    // APG carousel pattern: each slide container is role=group with
+    // aria-roledescription="slide" and an "N of M" accessible name.
+    const slides = screen.getAllByRole('group');
+    expect(slides).toHaveLength(3);
+    slides.forEach((slide, i) => {
+      expect(slide).toHaveAttribute('aria-roledescription', 'slide');
+      expect(slide).toHaveAccessibleName(`Slide ${i + 1} of 3`);
+    });
+  });
+
+  it('renders children', () => {
+    render(
+      <Carousel aria-label="Test carousel">
+        <div data-testid="item-1">Item 1</div>
+        <div data-testid="item-2">Item 2</div>
+      </Carousel>,
+    );
+    expect(screen.getByTestId('item-1')).toBeInTheDocument();
+    expect(screen.getByTestId('item-2')).toBeInTheDocument();
   });
 
-  it('makes the scroll container keyboard-focusable', () => {
+  it('reflects the rendered child count, skipping null and boolean children', () => {
     render(
       <Carousel aria-label="Photos">
-        <div>Item</div>
+        <div>One</div>
+        {null}
+        {false}
+        <div>Two</div>
       </Carousel>,
     );
-    // The inner scroll container overflows, so it must be reachable by
-    // keyboard (axe: scrollable-region-focusable).
-    const region = screen.getByRole('region', {name: 'Photos'});
-    const scroller = region.firstElementChild;
-    expect(scroller).toHaveAttribute('tabindex', '0');
+    expect(
+      screen.getByRole('group', {name: 'Slide 1 of 2'}),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('group', {name: 'Slide 2 of 2'}),
+    ).toBeInTheDocument();
+    // Exactly two slides render: null and false children produce no empty
+    // slide (child filtering stays component-owned). The scroller is a named
+    // group too, so count the slides by their role description.
+    expect(
+      screen
+        .getAllByRole('group')
+        .filter(
+          group => group.getAttribute('aria-roledescription') === 'slide',
+        ),
+    ).toHaveLength(2);
   });
 
   it('applies data-testid', () => {
@@ -94,59 +131,6 @@ describe('Carousel', () => {
     expect(screen.getByLabelText('Scroll right')).toBeInTheDocument();
   });
 
-  describe('slide semantics', () => {
-    it('exposes each slide as a group with aria-roledescription="slide" and a positional name', () => {
-      render(
-        <Carousel aria-label="Photos">
-          <div>One</div>
-          <div>Two</div>
-          <div>Three</div>
-        </Carousel>,
-      );
-      // APG carousel pattern: each slide container is role=group with
-      // aria-roledescription="slide" and an "N of M" accessible name.
-      const slides = screen.getAllByRole('group');
-      expect(slides).toHaveLength(3);
-      slides.forEach((slide, i) => {
-        expect(slide).toHaveAttribute('aria-roledescription', 'slide');
-        expect(slide).toHaveAccessibleName(`Slide ${i + 1} of 3`);
-      });
-    });
-
-    it('reflects the rendered child count, skipping null and boolean children', () => {
-      render(
-        <Carousel aria-label="Photos">
-          <div>One</div>
-          {null}
-          {false}
-          <div>Two</div>
-        </Carousel>,
-      );
-      const slides = screen.getAllByRole('group');
-      expect(slides).toHaveLength(2);
-      expect(
-        screen.getByRole('group', {name: 'Slide 1 of 2'}),
-      ).toBeInTheDocument();
-      expect(
-        screen.getByRole('group', {name: 'Slide 2 of 2'}),
-      ).toBeInTheDocument();
-    });
-
-    it('keeps the container region semantics unchanged around labelled slides', () => {
-      render(
-        <Carousel aria-label="Gallery">
-          <div>One</div>
-          <div>Two</div>
-        </Carousel>,
-      );
-      const region = screen.getByRole('region', {name: 'Gallery'});
-      expect(region).toHaveAttribute('aria-roledescription', 'carousel');
-      const slides = screen.getAllByRole('group');
-      expect(slides).toHaveLength(2);
-      slides.forEach(slide => expect(region).toContainElement(slide));
-    });
-  });
-
   it('disables edge scroll buttons instead of removing them from the tab order', () => {
     // In jsdom there is no measurable overflow, so both edges are at rest and
     // the scroll buttons are in their hidden/inert state. They must stay
@@ -932,5 +916,4 @@ describe('Carousel', () => {
       );
     });
   });
-
 });

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

@@ -0,0 +1,192 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Carousel.a11y.chromium.spec.ts
+ * @input Uses the shared Carousel contract, Chromium harness, checked-in stories, and binding inventory
+ * @output Real-browser and accessibility-tree evidence for Carousel semantics and focus
+ * @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 {
+  CAROUSEL_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 {CAROUSEL_KNOWN_FAILURES} from './Carousel.a11y.known-failures';
+import {
+  CAROUSEL_BINDING_STATES,
+  type CarouselBindingRow,
+} from './Carousel.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: CarouselBindingRow): 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: CarouselBindingRow,
+): Readonly<Record<string, Locator>> {
+  const root = page.locator('#storybook-root');
+  return Object.fromEntries(
+    Object.entries(state.relations ?? {}).map(([name, relation]) => [
+      name,
+      root.locator(relation.selector),
+    ]),
+  );
+}
+
+async function mountState(
+  page: Page,
+  state: CarouselBindingRow,
+): 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: CarouselBindingRow,
+): Promise<BindingResult> {
+  return checkAccessibilitySpec({
+    spec: CAROUSEL_PATTERN,
+    binding: 'Carousel',
+    state: state.id,
+    facts: state.facts,
+    knownFailures: CAROUSEL_KNOWN_FAILURES,
+    mount: async () => {
+      await mountState(page, state);
+      return createChromiumHarness({
+        page,
+        subject: subjectFor(page, state),
+        cdp,
+        related: relatedFor(page, state),
+      });
+    },
+  });
+}
+
+function bindingState(id: string): CarouselBindingRow {
+  const state = CAROUSEL_BINDING_STATES.find(candidate => candidate.id === id);
+  if (state == null) {
+    throw new Error(`no Carousel binding state "${id}"`);
+  }
+  return state;
+}
+
+test('every expectation is exercised by at least one Carousel state', async ({
+  page,
+}) => {
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of CAROUSEL_BINDING_STATES) {
+    results.push(await runState(page, cdp, state));
+  }
+  expect(neverExercised(results)).toEqual([]);
+  expect(unmatchedKnownFailures(CAROUSEL_KNOWN_FAILURES, results)).toEqual([]);
+});
+
+for (const state of CAROUSEL_BINDING_STATES) {
+  test(`Carousel [${state.id}] — ${state.summary}`, async ({page}) => {
+    const cdp = await page.context().newCDPSession(page);
+    const result = await runState(page, cdp, state);
+    const report = summarize(CAROUSEL_PATTERN, [result]);
+    // Required rows block (AST-020 FR9); advisory rows and exact known
+    // failures report.
+    expect(formatFailures(blockingResults([result]))).toBe('');
+    expect(report.unrunLayers).toEqual([]);
+  });
+}
+
+test('the off-screen binding is outside the scroll viewport but remains exposed', async ({
+  page,
+}) => {
+  const state = bindingState('slide-offscreen');
+  await mountState(page, state);
+  const slide = subjectFor(page, state);
+  const scroller = page.locator(
+    '[data-testid="carousel-a11y"] > .astryx-carousel-scroller',
+  );
+  const [slideBox, scrollerBox] = await Promise.all([
+    slide.boundingBox(),
+    scroller.boundingBox(),
+  ]);
+  if (slideBox == null || scrollerBox == null) {
+    throw new Error(
+      'the off-screen geometry fixture did not render measurable boxes',
+    );
+  }
+  expect(slideBox.x).toBeGreaterThanOrEqual(scrollerBox.x + scrollerBox.width);
+  const cdp = await page.context().newCDPSession(page);
+  const result = await runState(page, cdp, state);
+  expect(
+    result.results.find(
+      row => row.expectation === 'carousel.slide.offscreen-exposed',
+    )?.status,
+  ).toBe('pass');
+});
+
+test('the scroll container pans from the keyboard and honors reduced motion', async ({
+  page,
+}) => {
+  const state = bindingState('scroller-keyboard');
+  await page.emulateMedia({reducedMotion: 'reduce'});
+  await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
+  const scroller = subjectFor(page, state);
+  await scroller.focus();
+  expect(
+    await scroller.evaluate(
+      element => getComputedStyle(element).scrollBehavior,
+    ),
+  ).toBe('auto');
+  const before = await scroller.evaluate(element => element.scrollLeft);
+  await page.keyboard.press('ArrowRight');
+  await expect
+    .poll(async () => scroller.evaluate(element => element.scrollLeft))
+    .toBeGreaterThan(before);
+});

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

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Carousel.a11y.known-failures.ts
+ * @input The exact carousel-contract failures the shipped Carousel produces today
+ * @output CAROUSEL_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 Carousel binding
+ */
+
+import type {KnownFailure} from '@astryxdesign/a11y-spec';
+
+export const CAROUSEL_KNOWN_FAILURES: ReadonlyArray<KnownFailure> = [
+  {
+    expectation: 'carousel.scroller.role-and-name',
+    binding: 'Carousel',
+    state: 'scroller-keyboard',
+    evidenceLayer: 'accessibility-tree',
+    failureEquals:
+      'the browser exposes the focusable scroll container with no role',
+    standardsReference:
+      'WCAG 2.2 4.1.2 Name, Role, Value; Astryx spec:AST-025 FR12 — a viewport that takes keyboard scrolling must provide an appropriate role and accessible name',
+    userImpact:
+      'A keyboard user who tabs onto the scroll container hears nothing about where they are or what the arrow keys will do; the named region around it is the only clue.',
+    reason:
+      'This test-only binding records the gap; naming the scroll container is a Carousel markup change that ships as its own spec-backed fix.',
+  },
+];

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

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Carousel.a11y.renders.tsx
+ * @input Uses Carousel and the binding state ids
+ * @output Stable component renders shared by jsdom and Storybook
+ * @position Checked-in reproduction seam for the Carousel accessibility contract.
+ */
+
+import type {ReactElement} from 'react';
+import {Carousel} from '../Carousel';
+import type {CarouselBindingRow} from './Carousel.a11y.states';
+
+function CarouselFixture() {
+  return (
+    <Carousel
+      data-testid="carousel-a11y"
+      hasLoop
+      hasSnap
+      aria-label="Featured work"
+      style={{width: 240}}>
+      {['One', 'Two', 'Three', 'Four'].map(label => (
+        <div key={label} style={{width: 180, minWidth: 180, height: 80}}>
+          {label}
+        </div>
+      ))}
+    </Carousel>
+  );
+}
+
+export const CAROUSEL_STATE_RENDERS: Readonly<
+  Record<CarouselBindingRow['id'], () => ReactElement>
+> = {
+  'container-labelled': () => <CarouselFixture />,
+  'slide-visible': () => <CarouselFixture />,
+  'slide-offscreen': () => <CarouselFixture />,
+  'scroller-keyboard': () => <CarouselFixture />,
+  'next-control-focus': () => <CarouselFixture />,
+};