Accordion

Stacked headings that each show or hide a section of content.

Import
import { Accordion } from '@texuli/primitives/accordion';
Pattern
Accordion (WAI-ARIA APG)
Size budget
4.0 KiB gzip for @texuli/primitives/accordion
Reference
packages/primitives/docs/prim-accordion.md

Live demo

Loading the Accordion demo…

Anatomy

Accordion anatomy: each box holds the parts inside it.
  • Accordion.Root
    • Accordion.Item
      • Accordion.Header
        • Accordion.Trigger
      • Accordion.Content

Behavior checks

tests/behavior/scenarios/accordion.spec.ts runs 5 rows against the Accordion scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 5 rows
  1. each trigger is a button inside a level-3 heading, collapsed
  2. a click expands an item and shows its content
  3. in single mode, opening one closes the other
  4. Enter toggles, and arrow keys move between triggers skipping the disabled one
  5. a disabled item cannot open

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/accordion (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).