@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/src/CodeBlock/__tests__/CodeBlockOverflowStop.a11y.chromium.spec.ts

@@ -0,0 +1,125 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CodeBlockOverflowStop.a11y.chromium.spec.ts
+ * @input Built CodeBlock story and real Chromium layout
+ * @output Browser evidence that the code viewport is a Tab stop only while it overflows
+ * @position CodeBlock FR8 / AST-025 FR12–FR13 proof over the shared scroll capability
+ */
+
+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();
+});
+
+const STORY = 'core-codeblock--overflow-stop';
+const WIDE = 'const wide = "' + 'x'.repeat(400) + '";';
+const TALL = Array.from({length: 40}, (_, i) => `const line${i} = ${i};`).join(
+  '\n',
+);
+
+async function mount(page: Page) {
+  await page.setViewportSize({width: 600, height: 500});
+  await page.goto(`${storybook.origin}/iframe.html?id=${STORY}&viewMode=story`);
+  await expect(page.getByRole('group', {name: 'tsx'})).toBeVisible();
+}
+
+async function setArgs(page: Page, args: Record<string, unknown>) {
+  await page.evaluate(
+    async ({storyId, updatedArgs}) =>
+      new Promise<void>(resolve => {
+        const channel = (
+          window as unknown as {
+            __STORYBOOK_ADDONS_CHANNEL__: {
+              emit: (event: string, payload: unknown) => void;
+              once: (event: string, handler: () => void) => void;
+            };
+          }
+        ).__STORYBOOK_ADDONS_CHANNEL__;
+        channel.once('storyRendered', () => resolve());
+        channel.emit('updateStoryArgs', {storyId, updatedArgs});
+        setTimeout(resolve, 1500);
+      }),
+    {storyId: STORY, updatedArgs: args},
+  );
+}
+
+function viewport(page: Page) {
+  return page.getByRole('group', {name: 'tsx'});
+}
+
+test('a fitting viewport is not a Tab stop', async ({page}) => {
+  await mount(page);
+  await expect(viewport(page)).not.toHaveAttribute('tabindex', /.*/);
+  // Tab from the document start lands on the copy button, never the viewport.
+  await page.keyboard.press('Tab');
+  const active = await page.evaluate(() =>
+    document.activeElement?.getAttribute('role'),
+  );
+  expect(active).not.toBe('group');
+});
+
+test('inline overflow adds the stop; block overflow adds it too', async ({
+  page,
+}) => {
+  await mount(page);
+  await setArgs(page, {code: WIDE});
+  await expect(viewport(page)).toHaveAttribute('tabindex', '0');
+  await expect(viewport(page)).toHaveAttribute(
+    'data-scrollable-inline',
+    'true',
+  );
+
+  await setArgs(page, {code: TALL, maxHeight: 160});
+  await expect(viewport(page)).toHaveAttribute('tabindex', '0');
+  await expect(viewport(page)).toHaveAttribute('data-scrollable-block', 'true');
+});
+
+test('losing overflow removes the stop without moving focus', async ({
+  page,
+}) => {
+  await mount(page);
+  await setArgs(page, {code: WIDE});
+  await expect(viewport(page)).toHaveAttribute('tabindex', '0');
+  await viewport(page).focus();
+  await expect(viewport(page)).toBeFocused();
+
+  await setArgs(page, {code: 'const fits = true;'});
+  // Focus stays on the element that had it; the stop is gone for the next Tab.
+  await expect(viewport(page)).toBeFocused();
+  await expect(viewport(page)).toHaveAttribute('tabindex', '-1');
+  // Leaving and coming back by keyboard skips it: it is out of the Tab order.
+  await page.keyboard.press('Shift+Tab');
+  await page.keyboard.press('Tab');
+  await expect(viewport(page)).not.toBeFocused();
+  await expect(viewport(page)).not.toHaveAttribute('tabindex', '0');
+});
+
+test('a root height set from outside bounds the viewport, which then scrolls', async ({
+  page,
+}) => {
+  await mount(page);
+  // The IDE template's pattern: the block fills a parent of fixed height.
+  await setArgs(page, {code: TALL, style: {height: 160}});
+  const vp = viewport(page);
+  await expect(vp).toHaveAttribute('tabindex', '0');
+  await expect(vp).toHaveAttribute('data-scrollable-block', 'true');
+  const box = await vp.boundingBox();
+  expect(box?.height ?? 0).toBeLessThan(160);
+  const scrollable = await vp.evaluate(
+    node => node.scrollHeight > node.clientHeight + 1,
+  );
+  expect(scrollable).toBe(true);
+});

package/src/CodeBlock/__tests__/DiffRowPaint.a11y.chromium.spec.ts

@@ -0,0 +1,93 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file DiffRowPaint.a11y.chromium.spec.ts
+ * @input Built CodeBlock diff story with lines longer than a phone viewport
+ * @output Browser evidence that a changed row's paint spans the full scroll width
+ * @position CodeBlock FR9 proof: row paint follows a scrolled line, and wraps
+ */
+
+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();
+});
+
+async function mount(page: Page, wrapped: boolean) {
+  await page.setViewportSize({width: 390, height: 700});
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-codeblock--diff-long-lines&viewMode=story&args=isWrapped:${wrapped}`,
+  );
+  await expect(page.locator('[data-diff="added"]')).toHaveCount(1);
+}
+
+/** The painted rows, the scroll container, and the widths that matter. */
+async function measure(page: Page) {
+  return page.evaluate(() => {
+    const scroller = document.querySelector('[role="group"]') as HTMLElement;
+    const rows = ['added', 'removed'].map(kind => {
+      const row = document.querySelector(
+        `[data-diff="${kind}"]`,
+      ) as HTMLElement;
+      const rect = row.getBoundingClientRect();
+      return {
+        kind,
+        width: Math.round(rect.width),
+        lines: Math.round(
+          rect.height / parseFloat(getComputedStyle(row).lineHeight),
+        ),
+      };
+    });
+    return {
+      clientWidth: scroller.clientWidth,
+      scrollWidth: scroller.scrollWidth,
+      rows,
+    };
+  });
+}
+
+test("a changed row's paint spans the full scroll width of a long line", async ({
+  page,
+}) => {
+  await mount(page, false);
+  const before = await measure(page);
+  // The line really overflows a phone viewport.
+  expect(before.scrollWidth).toBeGreaterThan(before.clientWidth + 100);
+  // Each painted row is as wide as the scrollable content, not the viewport.
+  for (const row of before.rows) {
+    expect(row.width).toBeGreaterThanOrEqual(before.scrollWidth - 1);
+  }
+  // Scrolled to the end, the rows still cover what is on screen.
+  await page.evaluate(() => {
+    const scroller = document.querySelector('[role="group"]') as HTMLElement;
+    scroller.scrollLeft = scroller.scrollWidth;
+  });
+  const after = await measure(page);
+  for (const row of after.rows) {
+    expect(row.width).toBeGreaterThanOrEqual(after.scrollWidth - 1);
+  }
+});
+
+test('in wrapped mode the rows wrap and still paint their full width', async ({
+  page,
+}) => {
+  await mount(page, true);
+  const m = await measure(page);
+  // Nothing scrolls: the long line wrapped.
+  expect(m.scrollWidth).toBeLessThanOrEqual(m.clientWidth + 1);
+  for (const row of m.rows) {
+    expect(row.lines).toBeGreaterThan(1);
+    expect(row.width).toBeGreaterThanOrEqual(m.clientWidth - 1);
+  }
+});

package/src/CodeBlock/tokenizer.test.ts

@@ -6,6 +6,9 @@ import {
   tokenizeAsync,
   tokenizeStreaming,
   flatTokensToLines,
+  diffLineKind,
+  parseFenceLanguage,
+  splitDiffLines,
 } from './tokenizer';
 import type {TokenLine} from './tokenizer';
 
@@ -166,3 +169,112 @@ describe('flatTokensToLines', () => {
     expect(result[1]).toContainEqual({type: 'number', start: 8, end: 9});
   });
 });
+
+describe('diffLineKind', () => {
+  it('classifies unified-diff lines by their first character', () => {
+    expect(diffLineKind('+added line')).toBe('added');
+    expect(diffLineKind('-removed line')).toBe('removed');
+    expect(diffLineKind(' context line')).toBe('context');
+    expect(diffLineKind('')).toBe('context');
+  });
+
+  it('keeps hunk headers out of the change rows; a lone --- or +++ is a change', () => {
+    expect(diffLineKind('@@ -1,3 +1,4 @@')).toBe('header');
+    expect(diffLineKind('--- a/file.ts')).toBe('removed');
+    expect(diffLineKind('+++ b/file.ts')).toBe('added');
+    // Lines with no glyph are context, whatever tool wrote them.
+    expect(diffLineKind('diff --git a/x b/x')).toBe('context');
+    expect(diffLineKind('index 83db48f..bf269f4 100644')).toBe('context');
+  });
+
+  it('splits the glyph column from the code the base language sees', () => {
+    const {kinds, glyphs, content} = splitDiffLines([
+      '@@ -1 +1 @@',
+      '-  const a = 1;',
+      '+  const a = 2;',
+      '   const b = 3;',
+      '',
+    ]);
+    expect(kinds).toEqual(['header', 'removed', 'added', 'context', 'context']);
+    expect(glyphs).toEqual(['', '-', '+', ' ', '']);
+    expect(content).toEqual([
+      '',
+      '  const a = 1;',
+      '  const a = 2;',
+      '  const b = 3;',
+      '',
+    ]);
+  });
+
+  it('treats a ---/+++ pair directly before @@ as a file header anywhere, and keeps unindented context whole', () => {
+    const {kinds, glyphs, content} = splitDiffLines([
+      '--- a/x.ts',
+      '+++ b/x.ts',
+      '@@ -1 +1 @@',
+      '--x;',
+      '---',
+      '+++y;',
+      'plain',
+      '--- a/y.ts',
+      '+++ b/y.ts',
+      '@@ -1 +1 @@',
+      '-old',
+    ]);
+    expect(kinds).toEqual([
+      'header',
+      'header',
+      'header',
+      'removed',
+      'removed',
+      'added',
+      'context',
+      'header',
+      'header',
+      'header',
+      'removed',
+    ]);
+    expect(glyphs.slice(0, 7)).toEqual(['', '', '', '-', '-', '+', '']);
+    expect(content.slice(3, 7)).toEqual(['-x;', '--', '++y;', 'plain']);
+    // No hunk after the pair: both lines are changes, not headers.
+    expect(splitDiffLines(['--- gone', '+++ here', ' same']).kinds).toEqual([
+      'removed',
+      'added',
+      'context',
+    ]);
+    // A hunk ending in `---i;` / `+++i;` right before the next `@@` is code,
+    // not a file header: the header form has a space after the signs.
+    expect(
+      splitDiffLines(['@@ -1 +1 @@', '---i;', '+++i;', '@@ -9 +9 @@', ' x'])
+        .kinds,
+    ).toEqual(['header', 'removed', 'added', 'header', 'context']);
+    expect(diffLineKind('--- a/x.ts')).toBe('removed');
+    expect(diffLineKind('--- a/x.ts', {isFileHeader: true})).toBe('header');
+  });
+
+  it('tokenizes the code past the glyph with the base language', () => {
+    const {content} = splitDiffLines(['-const a = 1;', '+const a = 2;']);
+    const lines = tokenize(content.join('\n'), 'typescript');
+    expect(lines[0][0]).toEqual({type: 'keyword', start: 0, end: 5});
+    expect(lines[1][0]).toEqual({type: 'keyword', start: 0, end: 5});
+  });
+
+  it('reads fence info strings: diff, diff-<lang>, and a plain language (patch is just a language)', () => {
+    expect(parseFenceLanguage('diff')).toEqual({
+      language: 'plaintext',
+      isDiff: true,
+    });
+    expect(parseFenceLanguage('patch')).toEqual({
+      language: 'patch',
+      isDiff: false,
+    });
+    expect(parseFenceLanguage('diff-tsx')).toEqual({
+      language: 'tsx',
+      isDiff: true,
+    });
+    expect(parseFenceLanguage('tsx')).toEqual({language: 'tsx', isDiff: false});
+    expect(parseFenceLanguage(undefined)).toEqual({
+      language: 'plaintext',
+      isDiff: false,
+    });
+  });
+});

package/src/CodeBlock/tokenizer.ts

@@ -313,6 +313,112 @@ function buildLanguagePatterns(lang: string): {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Diff lines
+// ---------------------------------------------------------------------------
+
+/** How a unified-diff line reads: what it adds, removes, frames, or keeps. */
+export type DiffLineKind = 'added' | 'removed' | 'header' | 'context';
+
+/**
+ * Read a Markdown fence info string the way CodeBlock renders it: `diff` is
+ * the diff layer over plaintext, `diff-<lang>` (the common convention) is the
+ * diff layer over `<lang>`, anything else is a language.
+ */
+export function parseFenceLanguage(info: string | undefined): {
+  language: string;
+  isDiff: boolean;
+} {
+  const value = (info ?? '').trim();
+  if (value === 'diff') {
+    return {language: 'plaintext', isDiff: true};
+  }
+  const layered = /^diff-(.+)$/.exec(value);
+  if (layered) {
+    return {language: layered[1], isDiff: true};
+  }
+  return {language: value || 'plaintext', isDiff: false};
+}
+
+/**
+ * Split a diff into the glyph column and the code the base language sees:
+ * every added, removed, or space-led context line loses its first character
+ * (the `+`, `-`, or space); a context line with no leading space keeps all
+ * of it; header lines contribute an empty line so offsets stay per line.
+ */
+export function splitDiffLines(lines: ReadonlyArray<string>): {
+  kinds: DiffLineKind[];
+  glyphs: string[];
+  content: string[];
+} {
+  const kinds: DiffLineKind[] = [];
+  const glyphs: string[] = [];
+  const content: string[] = [];
+  const fileHeaders = fileHeaderLines(lines);
+  lines.forEach((line, index) => {
+    const kind = diffLineKind(line, {isFileHeader: fileHeaders.has(index)});
+    kinds.push(kind);
+    if (kind === 'header') {
+      glyphs.push('');
+      content.push('');
+    } else if (kind === 'context' && !line.startsWith(' ')) {
+      // A context line without its leading space (an unindented diff, or
+      // an empty line) has no glyph: the marker column is empty and the
+      // whole line is code.
+      glyphs.push('');
+      content.push(line);
+    } else {
+      glyphs.push(line.slice(0, 1));
+      content.push(line.slice(1));
+    }
+  });
+  return {kinds, glyphs, content};
+}
+
+/**
+ * Classify one line of a unified diff by its first character: `+` added,
+ * `-` removed, `@@` header, anything else context. A `--- ` line (with its
+ * space) directly followed by a `+++ ` line and then an `@@` line is a file
+ * header (both lines), wherever it occurs; every other `---`/`+++` line is
+ * removed or added, so a removed line that starts with `--` — `---i;`
+ * included — is never misread. The glyph is part of the text and is never
+ * removed.
+ */
+export function diffLineKind(
+  line: string,
+  {isFileHeader = false}: {isFileHeader?: boolean} = {},
+): DiffLineKind {
+  if (line.startsWith('@@') || isFileHeader) {
+    return 'header';
+  }
+  if (line.startsWith('+')) {
+    return 'added';
+  }
+  if (line.startsWith('-')) {
+    return 'removed';
+  }
+  return 'context';
+}
+
+/**
+ * The indexes of the `--- `/`+++ ` lines (unified-diff form, with the space)
+ * that form a file header directly before an `@@`; `---i;` is a change.
+ */
+export function fileHeaderLines(lines: ReadonlyArray<string>): Set<number> {
+  const headers = new Set<number>();
+  for (let i = 0; i + 2 < lines.length; i++) {
+    if (
+      lines[i].startsWith('--- ') &&
+      lines[i + 1].startsWith('+++ ') &&
+      lines[i + 2].startsWith('@@')
+    ) {
+      headers.add(i);
+      headers.add(i + 1);
+    }
+  }
+  return headers;
+}
+
 // ---------------------------------------------------------------------------
 // Core tokenizer
 // ---------------------------------------------------------------------------

package/src/Collapsible/CollapsibleGroup.spec.md

@@ -133,6 +133,7 @@ Consumer migration instructions belong in consumer docs and release notes.
 - **AR1 — Child semantics remain primary.** Group coordination MUST preserve each Collapsible button's accessible name, `aria-expanded`, `aria-controls`, controlled region, and keyboard activation.
 - **AR2 — Presentation adds no competing interaction.** The divider wrapper MUST NOT add a role, focus target, accessible name, or keyboard behavior.
 - **AR3 — Direction stays with Collapsible.** Group chevron defaults MUST preserve `component:Collapsible/AR1–AR3`, including the inward leading cue under LTR and RTL.
+- **AR4 — The group adopts the APG Accordion pattern's required parts** (`spec:AST-020/FR15`): each direct item's header is a `button` whose accessible name is the item's title, with `aria-expanded` reflecting its panel, `aria-controls` naming the panel it reveals, and `aria-disabled` when it cannot be toggled; every enabled header sits in the page Tab order and Enter or Space toggles its panel, in `single` mode collapsing the sibling that was open; a disabled header carries `aria-disabled`, drops out of the Tab order, and cannot be toggled. Not adopted: a heading element around each header (this record requires none; the caller's document structure supplies headings), the optional `region` role on panels, and arrow-key or Home/End movement between headers — the group is a set of independent disclosures, not one composite control.
 
 ## Design relationships
 
@@ -171,17 +172,25 @@ The Group container is CollapsibleGroup's conditional aggregate wrapper. The oth
 
 ## Verification map
 
-| Contract               | Verification                                                                        | Representative states                                     | Mutation or failure expectation                                                                                                           | Audit section                          |
-| ---------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
-| FR1–FR4, ORD1          | `CollapsibleGroup.test.tsx`; `useCollapsible.test.tsx`                              | single/multiple; controlled/uncontrolled; valued/unvalued | A sibling stays open in single mode, closes in multiple mode, controlled state mutates internally, or an unvalued item loses local state. | `audit:CollapsibleGroup/behavior`      |
-| FR5–FR6, ORD2–ORD3     | `CollapsibleGroup.test.tsx`; `Collapsible.test.tsx`; `themingTargets.test.ts`       | plain/divided; each density; group/item/nested position   | Wrapper/target reachability changes, defaults stop reaching direct items, or presentation leaks into nested content.                      | `audit:CollapsibleGroup/theming`       |
-| AR1–AR3                | DOM and Chromium accessibility suites; component-owned Storybook fixture; RTL audit | open/closed; single/multiple; leading/trailing; LTR/RTL   | Disclosure semantics diverge from state, the wrapper becomes interactive, or leading direction stops mirroring.                           | `audit:CollapsibleGroup/accessibility` |
-| PR1–PR2, FR7           | source review plus context and interaction tests                                    | unchanged and changed state/presentation inputs           | An Effect/resource appears, unchanged payload broadcasts a new identity, or changed group behavior fails to reach consumers.              | `audit:CollapsibleGroup/code-health`   |
-| Consumer documentation | CLI component projection, docs checks, and `CollapsibleGroup.stories.tsx`           | every public concept and representative composition       | A released prop/default is undiscoverable or the owned browser route loses representative state coverage.                                 | `audit:CollapsibleGroup/docs`          |
+| Contract               | Verification                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Representative states                                                                            | Mutation or failure expectation                                                                                                                 | Audit section                          |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| FR1–FR4, ORD1          | `CollapsibleGroup.test.tsx`; `useCollapsible.test.tsx`                                                                                                                                                                                                                                                                                                                                                                                                       | single/multiple; controlled/uncontrolled; valued/unvalued                                        | A sibling stays open in single mode, closes in multiple mode, controlled state mutates internally, or an unvalued item loses local state.       | `audit:CollapsibleGroup/behavior`      |
+| FR5–FR6, ORD2–ORD3     | `CollapsibleGroup.test.tsx`; `Collapsible.test.tsx`; `themingTargets.test.ts`                                                                                                                                                                                                                                                                                                                                                                                | plain/divided; each density; group/item/nested position                                          | Wrapper/target reachability changes, defaults stop reaching direct items, or presentation leaks into nested content.                            | `audit:CollapsibleGroup/theming`       |
+| AR4                    | `Collapsible.test.tsx` (disabled trigger: `aria-disabled`, out of the Tab order, no toggle); `CollapsibleGroup.test.tsx` (single/multiple coordination, `aria-expanded`, Enter activation); `Collapsible.a11y.test.tsx` and `Collapsible.a11y.chromium.spec.ts` (disclosure semantics, Space, Tab reachability for a lone item); grouped Tab order, Space in a group, and no arrow-key movement under the Accordion contract (`internal/a11y-spec`, pending) | single/multiple; open/closed; a disabled item, open or closed; Tab order; Enter/Space round trip | A header loses its button role, name, `aria-expanded`, or `aria-controls`; Enter or Space stops toggling; arrow keys move focus between headers | `audit:CollapsibleGroup/accessibility` |
+| AR1–AR3                | DOM and Chromium accessibility suites; component-owned Storybook fixture; RTL audit                                                                                                                                                                                                                                                                                                                                                                          | open/closed; single/multiple; leading/trailing; LTR/RTL                                          | Disclosure semantics diverge from state, the wrapper becomes interactive, or leading direction stops mirroring.                                 | `audit:CollapsibleGroup/accessibility` |
+| PR1–PR2, FR7           | source review plus context and interaction tests                                                                                                                                                                                                                                                                                                                                                                                                             | unchanged and changed state/presentation inputs                                                  | An Effect/resource appears, unchanged payload broadcasts a new identity, or changed group behavior fails to reach consumers.                    | `audit:CollapsibleGroup/code-health`   |
+| Consumer documentation | CLI component projection, docs checks, and `CollapsibleGroup.stories.tsx`                                                                                                                                                                                                                                                                                                                                                                                    | every public concept and representative composition                                              | A released prop/default is undiscoverable or the owned browser route loses representative state coverage.                                       | `audit:CollapsibleGroup/docs`          |
 
 ## Decision log
 
-None. This audit records shipped behavior and delegates chevron representation to the current Collapsible contract; it makes no new product decision.
+### DEC-1 — Adopt Accordion's required parts; keep the headers independent
+
+**Reference:** `component:CollapsibleGroup/DEC-1`
+**Decider:** `cixzhang`, `2026-10-13`
+
+The group's headers already play the accordion header's role, so they carry its name, state, relationship, and Enter/Space activation (AR4). They stay in the page Tab order without arrow-key or Home/End movement because the group coordinates independent disclosures rather than acting as one composite control; a heading wrapper is left to the caller's document structure.
+
+Rejected: arrow-key movement between headers; a required heading element around each header.
 
 ## Open questions
 

package/src/Collapsible/__tests__/CollapsibleGroup.a11y.renders.tsx

@@ -0,0 +1,45 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CollapsibleGroup.a11y.renders.tsx
+ * @input One CollapsibleGroup accordion state from CollapsibleGroup.a11y.states.ts
+ * @output The React tree every lane renders for that state (the jsdom test directly, the story through Storybook)
+ * @position Shared fixture for the CollapsibleGroup accordion binding
+ */
+
+import type {ReactElement} from 'react';
+import {Collapsible, CollapsibleGroup} from '../index';
+import {
+  COLLAPSIBLE_GROUP_ITEMS,
+  type CollapsibleGroupAccordionState,
+} from './CollapsibleGroup.a11y.states';
+
+export function renderAccordionState(
+  state: Pick<
+    CollapsibleGroupAccordionState,
+    'type' | 'defaultValue' | 'disabled'
+  >,
+): ReactElement {
+  return (
+    <div>
+      <CollapsibleGroup
+        type={state.type}
+        defaultValue={
+          state.type === 'single'
+            ? state.defaultValue[0]
+            : [...state.defaultValue]
+        }>
+        {COLLAPSIBLE_GROUP_ITEMS.map(item => (
+          <Collapsible
+            key={item.value}
+            value={item.value}
+            trigger={item.label}
+            isDisabled={state.disabled?.includes(item.value)}>
+            {item.label} content
+          </Collapsible>
+        ))}
+      </CollapsibleGroup>
+      <button type="button">After the group</button>
+    </div>
+  );
+}