Build an enhanced Accordion component that extends the basic accordion with smooth animations, multiple open items support, and keyboard navigation.
Requirements
1. Basic Accordion Functionality (from Accordion I)
- Expand/collapse on click
- Visual state indication
- Content display for open items
2. Smooth Animations
- Animate height transitions when expanding/collapsing
- Smooth icon rotation
- Respect
prefers-reduced-motion for accessibility - Use CSS transitions or animations (avoid layout thrashing)
3. Multiple Open Items
- Support both accordion mode (single open) and multi-open mode
- Toggle between modes via prop
- In multi-open mode, items can be opened/closed independently
4. Keyboard Navigation
- Enter/Space to toggle focused item
- Arrow keys (Up/Down) to navigate between items
- Home/End keys to jump to first/last item
- Tab key to move focus between items
5. Enhanced Features
- Optional: Item icons
- Optional: Disabled items
- Better focus management
Example Usage
// Accordion mode (single open)
<Accordion items={items} allowMultiple={false} />
// Multi-open mode
<Accordion items={items} allowMultiple={true} defaultOpen={['item1', 'item2']} />
> Note: Build on top of the basic accordion implementation. Focus on smooth animations and keyboard accessibility.