Accordion

An accessible accordion component for FAQ sections and collapsible content. Features full keyboard navigation with arrow keys, Home, End, and proper ARIA attributes.

Basic Usage

Click or use keyboard navigation to expand/collapse panels. Only one panel open at a time.

import { AccessibleAccordion } from '@a13y/react';

const items = [
  {
    id: '1',
    title: 'What is A13Y?',
    content: 'A13Y is a library of accessible React components...'
  },
  {
    id: '2',
    title: 'How do I install it?',
    content: 'Install using: pnpm add @a13y/react'
  }
];

function Example() {
  return <AccessibleAccordion items={items} />;
}

Multiple Panels Open

Allow multiple panels to be open simultaneously with the allowMultiple prop.

A13Y is a comprehensive library of accessible React components designed to help you build WCAG 2.1 compliant web applications with ease.

You can install A13Y using pnpm: pnpm add @a13y/react. It works with React 16.8+ and has zero dependencies.

<AccessibleAccordion
  items={items}
  allowMultiple
  defaultOpenIds={['1', '2']}
/>

Accordion Props

Name	Type	Default	Description
`items*`	`AccordionItem[]`	-	Array of accordion items with id, title, and content
`allowMultiple`	`boolean`	`false`	Allow multiple panels to be open simultaneously
`defaultOpenIds`	`string[]`	-	IDs of panels that should be open by default
`className`	`string`	-	Optional CSS class for the accordion container
`style`	`React.CSSProperties`	-	Optional inline styles for the accordion

AccordionItem Props

Name	Type	Default	Description
`id*`	`string`	-	Unique identifier for the accordion item
`title*`	`string`	-	Title shown in the accordion header button
`content*`	`string \| ReactNode`	-	Content displayed when panel is expanded

Keyboard Navigation

SpaceToggle panel

EnterToggle panel

↓Move to next header

↑Move to previous header

HomeMove to first header

EndMove to last header

Accessibility Features

✓Uses aria-expanded to indicate panel state
✓aria-controls associates headers with panels
✓Full keyboard navigation with arrow keys, Home, and End
✓Proper heading structure for semantic navigation
✓Respects reduced motion preferences