FrontendArk

Master Frontend Interviews

  • Practice
  • Playground
  • Resource
Medium

Accessible Accordion

30 mins

Build an accessible Accordion component in React.

Requirements:

  1. Multiple sections, each with a header and content.
  2. Clicking a header toggles its content visibility.
  3. More than one section can be open at once.
  4. Accessibility:
    • Headers must be button elements.
    • Apply ARIA attributes: aria-expanded, aria-controls, and link panels with aria-labelledby.
    • Panel content should have role="region".
  5. Keyboard support:
    • <Enter>/<Space> toggles a section.
    • Up/Down Arrow keys move focus between headers.
  6. Focus on accessibility and functionality over styling.

Code Editor

React Component

00:00
Loading...

Live Preview

See your React component