A library of keyboard- and screen-reader-accessible widgets — every interaction follows WAI-ARIA Authoring Practices.
Dialog / Modal
Opens a modal dialog with focus trapping. Tab cycles inside; Esc closes.
Open with Enter or Space · Tab cycles inside · Esc closes · Focus returns to button on close
Notification Settings
Manage how and when you receive notifications. All settings are saved locally.
Dropdown Menu
Click or press Enter/Space/↓ to open · ↑↓ navigate · Home/End · Enter/Space select · Esc closes · Tab closes naturally
Tabs
Overview
This tabs component follows the WAI-ARIA Tabs pattern. Only the active tab is in the tab order — rest receive tabindex="-1". Arrow keys move focus horizontally between tabs.
Arrow Right — next tab
Arrow Left — previous tab
Home — first tab
End — last tab
Usage
To use the tabs component:
Wrap tabs in a <div role="tablist">
Each tab button gets role="tab", aria-selected, aria-controls, and aria-labelledby (on the panel)
Each panel gets role="tabpanel" and hidden when inactive
Accessibility
This implementation meets key accessibility criteria:
Single element in the tab order within the tablist itself
Arrow-key navigation per WAI-ARIA practices
Hidden panels use the hidden attribute — content is removed from accessibility tree
Active panel is reachable by Tab once activated
Screen readers announce tab state changes via aria-selected
Combobox
Type to filter · ↑↓ highlight · Enter/Space select · Esc clear · Focus out closes
Accordion / Disclosure Group
Accessibility here is built on correct ARIA semantics. Every widget uses the right roles, states, and properties so assistive technologies can accurately convey the UI to users. Additionally:
Focus management — focus moves logically, never gets trapped unexpectedly, and returns to the trigger on close.
Full keyboard operation — every interaction is achievable with keyboard alone.
Visible focus indicators — a high-contrast outline on every interactive element.
Reduced motion support — respect for users who prefer fewer animations.
Yes. Unlike a traditional exclusive accordion, this implementation allows multiple panels to be open simultaneously. Each section operates independently — clicking one button toggles only its associated panel. This is ideal when you need to compare content across several sections at once.
The accordion uses a height transition — it animates from height: 0 to auto. The hidden attribute is toggled after the animation completes (or immediately in non-reduced-motion contexts). During animation, the content remains in the accessibility tree, so screen reader users aren't confused by disappearing content.
For users who prefer reduced motion, all transitions collapse to 0.01ms, making the state change feel instant.
Absolutely. All measurements use relative units (rem, em, %) and the layout uses flexbox so it adapts fluidly. At 200% zoom the sidebar collapses to mobile layout and content reflows without clipping. Focus indicators are sized at 3px with a 5px offset glow to remain visible at any magnification.
Built with vanilla HTML, CSS & JS — zero dependencies.