About
A keyboard-accessible accordion built on native HTML5 details/summary elements, with single- or multi-expand coordination, focus-visible outlines and reduced-motion support — ported to React from A11YPros' a11y-ui web component (credit: Ryan Mack / a11ypros.com).
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Accessible Accordion to your project and fits it to your theme.
Code
How Accessible Accordion is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Accordion, AccordionItem } from "@/components/ui/a11y-accordion";
export default function AccordionAllowMultipleDemo() {
return (
<div className="w-full max-w-xl mx-auto p-6">
<Accordion allowMultiple>
<AccordionItem id="item-1" title="Features">
<ul>
<li>Fully accessible with keyboard navigation</li>
<li>Screen reader friendly with semantic HTML</li>
<li>Smooth animations with reduced motion support</li>
<li>Dark mode support</li>
</ul>
</AccordionItem>
<AccordionItem id="item-2" title="Benefits">
<ul>
<li>Easy to use and integrate</li>
<li>WCAG 2.1/2.2 Level AA compliant</li>
<li>Built with native HTML5 elements</li>
<li>No JavaScript required for basic functionality</li>
</ul>
</AccordionItem>
<AccordionItem id="item-3" title="Use Cases">
<ul>
<li>FAQ sections</li>
<li>Documentation</li>
<li>Product features</li>
<li>Settings panels</li>
</ul>
</AccordionItem>
</Accordion>
</div>
);
}
More by a11ypros
View all
Accessible Tooltip
1
Accessible Radio Group
A11y Label