Modal Dialog
Opens a dialog with focus trap · Tab cycles within · Esc closes · Click backdrop to dismiss
Confirm Action
Are you sure you want to proceed? This action cannot be undone.
Dropdown Menu
↑↓ navigate · Home/End first/last · Enter or Space select · Esc close · Tab closes and moves focus onward
No selection yet
Tabs
←→ navigate tabs · Tab enters tablist → arrows switch · Enter/Space activates · Panels use hidden attribute
Project Overview
This is a showcase of accessible web components built with vanilla JavaScript. Each component follows WAI-ARIA Authoring Practices for keyboard interaction and screen reader compatibility.
- Modal Dialog — focus trap, inert page behind
- Dropdown Menu — arrow key navigation, wrapping
- Tabs — roving tabindex pattern
- Combobox — aria-activedescendant pattern
- Accordion — disclosure group with animation
Technical Details
Built with TypeScript, organized into modular components. No external dependencies — pure HTML, CSS, and JavaScript.
| Feature | Status |
|---|---|
| Keyboard accessible | ✓ Complete |
| Screen reader tested | ✓ ARIA compliant |
| Reduced motion support | ✓ Respected |
| 200% zoom safe | ✓ Fluid layout |
Configuration Options
All components support theming through CSS custom properties. Animation durations and colors are tunable constants at the top of the source.
- Accent Color
- Customizable via --accent-primary
- Animation Duration
- Configurable in constants module
- Focus Style
- High-contrast outline, never removed
Combobox (Autocomplete)
Type to filter · ↓↑ highlight options · Enter selects · Esc closes and reverts · Focus out closes
No language selected
Accordion (Disclosure Group)
Enter or Space toggles sections · Multiple open at once · Animated height with hidden attribute
This is a demonstration of accessible web components built with vanilla JavaScript. Every widget follows WAI-ARIA Authoring Practices for keyboard interaction and screen reader compatibility.
No! Everything is built with vanilla HTML, CSS, and JavaScript. There are no external libraries, frameworks, or CDN dependencies. The code is organized into TypeScript modules for clarity.
Each component implements its own keyboard contract following WAI-ARIA patterns. Shared utilities handle focus trapping and aria-activedescendant management. Every interactive element has visible focus indicators.
Yes. All animations respect the prefers-reduced-motion media query. When this preference is set, components transition instantly without any visual animation while maintaining full functionality.