Accessible Component Showcase
A vanilla JS component library where every widget is genuinely keyboard- and screen-reader-accessible, following WAI-ARIA Authoring Practices.
Modal Dialog
Tab/Shift+Tab cycle · Esc close · Click backdrop close
Dropdown Menu
↓ open & focus first · ↑↓ navigate (wrapping) · Home/End jump · Enter select · Esc close
Tabs
Project Overview
This component library is built from scratch with accessibility as a first-class concern. Every interaction pattern follows the WAI-ARIA Authoring Practices Guide, ensuring that users of assistive technologies have an experience equal to mouse users.
The library uses zero external dependencies — just vanilla JavaScript and hand-written CSS that respects user preferences like reduced motion.
Key Features
- Focus management: Focus trapping in modals, roving tabindex in tablists and menus.
- Semantic HTML: Proper roles, states, and properties on every interactive element.
- Keyboard support: Full keyboard operability with logical focus order.
- Screen reader tested: All ARIA relationships point to real elements; no dangling references.
Changelog
- v1.0.0
- Initial release with Modal, Dropdown, Tabs, Combobox, and Accordion components.
- v1.1.0
- Added focus trap utility, aria-activedescendant manager, and prefers-reduced-motion support.
- v1.2.0
- Improved combobox filtering performance; added Home/End navigation to dropdown menus.
←→ switch tabs · Tab moves into panel content
Combobox (Autocomplete)
Type to filter · ↓↑ highlight · Enter select · Esc close & revert
Accordion / Disclosure Group
This is a vanilla JavaScript accessible component library showcasing five common UI patterns: Modal Dialog, Dropdown Menu, Tabs, Combobox, and Accordion. Each component follows WAI-ARIA Authoring Practices.
Accessibility is built in from the ground up. We use proper ARIA roles, states, and properties on every element. Focus management follows best practices: focus trapping for modals, roving tabindex for tablists and menus, and aria-activedescendant for comboboxes.
This is a demonstration of accessible patterns. The code is well-organized with shared utilities and tunable constants, making it easy to adapt for production use. All components respect user preferences like reduced motion.
All modern browsers that support CSS custom properties and ES2017+ JavaScript. The components use standard DOM APIs available in all evergreen browsers.
Enter/Space toggle · Multiple panels may be open