Foundations
Accessible UI Components
Custom React implementations following WAI-ARIA Authoring Practices — modal dialog, tabs, and disclosure patterns with full keyboard support.
Modal Dialog
Traps focus, closes with Escape or overlay click, restores focus to the trigger.
Tabs
Use Arrow keys, Home, and End to navigate tabs. Tab moves into the active panel.
The tabs pattern organizes content into separate views where only one panel is visible at a time. Arrow keys switch tabs with automatic activation.
- role="tablist", role="tab", role="tabpanel"
- aria-selected and aria-controls wiring
- Inactive panels hidden from view and assistive tech
Left and Right arrows move between tabs. Home jumps to the first tab; End jumps to the last. Tab enters the selected panel content.
Disclosure
Accordion-style expand/collapse with Enter and Space activation.
A disclosure is a button that controls visibility of a section of content. It uses aria-expanded and aria-controls to communicate state to assistive technologies.
Click the button, or focus it and press Enter or Space to toggle the panel open or closed.
Buttons are inherently focusable and respond to keyboard activation. Using a div with onClick would require extra ARIA and tabindex work to reach parity.