Accessible Component Showcase
A fully keyboard- and screen-reader-accessible component library built with vanilla JavaScript and WAI-ARIA.
Modal Dialog
role="dialog"Click the button below to open a modal dialog. The modal traps focus and returns it to the trigger on close.
Dropdown Menu
aria-haspopup="menu"A menu that supports full arrow-key navigation with wrapping, Home/End support, and proper focus management.
Tabs
role="tablist"A tabbed interface with correct roving tabindex — only the active tab is in the tab order.
Project Overview
This accessible component showcase demonstrates five interactive UI components built to WAI-ARIA Authoring Practices. Each component is fully keyboard-operable and screen-reader-friendly.
Status: Production Ready
Features
- Modal dialog with focus trapping and backdrop
- Dropdown menu with arrow-key navigation and wrapping
- Tab panel interface with roving tabindex
- Combobox with aria-activedescendant pattern
- Animated accordion with reduced-motion support
Reviews
"Finally, a component library that actually works with screen readers!"
— Accessible Dev Weekly"The keyboard navigation is flawless. This is how it should be done."
— WCAG Champion BlogCombobox
aria-activedescendantAn autocomplete combobox that filters options as you type. Uses aria-activedescendant — the listbox itself is never focusable.
Accordion
aria-expandedA disclosure group where multiple sections may be open simultaneously. Animations respect prefers-reduced-motion.
Every component follows the WAI-ARIA Authoring Practices Guide. This means proper roles, states, and properties are always kept in sync with visual state. Focus management, keyboard navigation, and screen reader announcements are designed in from the start.
The focus trap listens for Tab and Shift+Tab key events inside the modal. When focus reaches the last (or first, with Shift+Tab) focusable element, it cycles to the first (or last) instead. On close, focus returns to the trigger button.
Yes. All components check prefers-reduced-motion and skip animations when the user prefers it. For the accordion, this means panels appear/disappear instantly without the height animation.