Accessible Component Showcase

A fully keyboard- and screen-reader-accessible component library built with vanilla JavaScript, following WAI-ARIA Authoring Practices.

Modal Dialog

Opens a focus-trapped overlay. Press Escape or click the backdrop to close. Focus returns to the trigger on close.

Enter / Space open · Esc close · Tab trapped inside

Dropdown Menu

A button-activated menu with full keyboard navigation. Arrow keys move between items with wrapping.

Enter / Space / ↓ open · ↑↓ navigate · Home / End jump · Esc close

Tabs

Only the active tab is in the tab order. Arrow keys move between tabs. Hidden panels use the hidden attribute.

← / → switch tabs · Home / End jump · Tab enters panel

Combobox

Type to filter a list of options. Arrow keys highlight items; Enter selects. Uses the aria-activedescendant pattern.

Type to filter · ↓ / ↑ highlight · Enter select · Esc close & revert

Accordion

Expandable sections with animated open/close. Multiple sections may be open simultaneously.

Enter / Space toggle · multiple open allowed