Accessible Component Showcase

A dialog that traps focus while it is open. Focus moves inside on open, Tab cycles only across the dialog’s own controls, and closing — by button, Escape, or backdrop click — returns focus to the trigger. The page behind is inert until the dialog closes.

An actions menu with managed focus. Arrow keys wrap through the items, Home/End jump to the edges, and choosing an item runs the action, closes the menu, and returns focus to the button.

A single-stop tablist: only the active tab sits in the Tab order. Arrow keys move between tabs and activate them, and each panel swaps with the hidden attribute so inactive panels are unreachable and unannounced.

An autocomplete that keeps focus in the input. Typing filters twenty-one countries; the highlight lives in aria-activedescendant, so the listbox itself never takes focus. Esc closes the list and reverts to the last committed selection.

Independent disclosures — any number can be open at once. Height animates with a measured transition; the region’s hidden attribute flips only when the animation ends, so content is never visually hidden while still exposed to assistive tech.