Accordion

Installation

npx vayu-ui init #one time only

npx vayu-ui add accordion

npx vayu-ui add -t accordion #with test case needs

Usage

<Accordion aria-labelledby="single-accordion-label">
  <Accordion.Item itemId="item-1">
    <Accordion.Header itemId="item-1">Is it accessible?</Accordion.Header>
    <Accordion.Body itemId="item-1">
      <p>Yes. It adheres to the WAI-ARIA design pattern and WCAG 2.2 AA standards.</p>
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item itemId="item-2">
    <Accordion.Header itemId="item-2">Is it styled?</Accordion.Header>
    <Accordion.Body itemId="item-2">
      <p>Yes. It comes with default styles that matches the other components&apos; aesthetic.</p>
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item itemId="item-3">
    <Accordion.Header itemId="item-3">Is it animated?</Accordion.Header>
    <Accordion.Body itemId="item-3">
      <p>Yes. It&apos;s animated by default, but you can disable it if you prefer.</p>
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

<Accordion allowMultiple aria-labelledby="multi-accordion-label">
  <Accordion.Item itemId="multi-item-1">
    <Accordion.Header itemId="multi-item-1">Is it accessible?</Accordion.Header>
    <Accordion.Body itemId="multi-item-1">
      <p>Yes. It adheres to the WAI-ARIA design pattern and WCAG 2.2 AA standards.</p>
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item itemId="multi-item-2">
    <Accordion.Header itemId="multi-item-2">Is it styled?</Accordion.Header>
    <Accordion.Body itemId="multi-item-2">
      <p>Yes. It comes with default styles that matches the other components&apos; aesthetic.</p>
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

Anatomy

import { Accordion } from 'vayu-ui';

<Accordion aria-labelledby="your-label">
  <Accordion.Item itemId="unique-id">
    <Accordion.Header itemId="unique-id">Section Title</Accordion.Header>
    <Accordion.Body itemId="unique-id">Section content goes here.</Accordion.Body>
  </Accordion.Item>
</Accordion>;

• Accordion — Root container. Manages open/close state and provides context to children.
• Accordion.Item — Wrapper for a single accordion section. Registers the item for keyboard navigation.
• Accordion.Header — Clickable button trigger. Displays the section title with a chevron indicator.
• Accordion.Body — Collapsible content panel with smooth height animation.

Accessibility

• Keyboard Support:
  • Enter / Space — Toggle the focused section open or closed.
  • ArrowDown — Move focus to the next header.
  • ArrowUp — Move focus to the previous header.
  • Home — Move focus to the first header.
  • End — Move focus to the last header.
  • Escape — Close the currently open section.
• ARIA Attributes:
  • aria-expanded on Accordion.Header reflects the open/closed state.
  • aria-controls on Accordion.Header links to the associated panel.
  • aria-labelledby on Accordion.Body references the controlling header.
  • aria-hidden on Accordion.Body prevents hidden content from being read.
  • Chevron icon is marked aria-hidden="true".
• Focus Behavior:
  • Focus moves to the first focusable element inside the panel when a section expands.
  • When a section collapses, focus returns to its header button if the panel had focus.

Screen reader behavior

When a user navigates to an accordion header, the screen reader announces the button text, its expanded or collapsed state (via aria-expanded), and the number of items in the accordion group. When a section is expanded, the panel content is announced (the panel has role="region" with aria-labelledby linking back to the header). When collapsed, the panel content is hidden from the assistive technology tree (aria-hidden="true"). Users can navigate between headers using arrow keys, and the screen reader will announce each header as it receives focus.

Component Folder Structure

Accordion/
├── Accordion.tsx        # Root component with context provider and state management
├── AccordionItem.tsx    # Item container with registration for keyboard navigation
├── AccordionHeader.tsx  # Clickable header trigger with keyboard navigation
├── AccordionBody.tsx    # Collapsible panel with animated height transitions
├── types.ts             # TypeScript type definitions
├── index.ts             # Re-exports all components and types
└── README.md            # Component usage reference

Props

Accordion (Root)

Accordion.Item

Accordion.Header

Accordion.Body