↓ opens menu · ↑↓ navigate · Home/End jump · Enter/Space select · Esc close
No selection made yet.
Component 03
Tabs
←→ switch tabs · Tab enters panel content
This component follows WAI-ARIA Authoring Practices for the tab pattern. Exactly one tab is in the tab order at a time — the active tab has tabindex="0" while inactive tabs have tabindex="-1". Arrow keys move between tabs horizontally.
Keyboard-navigable tab switching
Roving tabindex management
Correct ARIA relationship wiring
Hidden panels use the hidden attribute
Arrow key movement between adjacent tabs
Import the tabs module and call initTabs(tablistEl) on your tablist element. The implementation provides a cleanup function you can call when unmounting. All state (active tab, visible panel) is synchronized through shared properties.
Component 04
Combobox
Type to filter · ↑↓ highlight · Enter select · Esc close & revert
Select a country or clear with Esc.
Component 05
Accordion
Enter/Space toggle · ↑↓ move between triggers · Multiple sections open at once
Every component adheres to WAI-ARIA Authoring Practices. This includes proper role attributes, correct labeling relationships via aria-labelledby and aria-controls, keyboard interaction patterns that match visual metaphors, and appropriate focus management. Screen readers announce component states accurately because every visual change is paired with an ARIA state update.
A focus trap listens for the Tab and Shift+Tab keys within the modal. When you press Tab on the last focusable element, it wraps to the first one. Similarly, Shift+Tab on the first element wraps to the last. Additionally, the page behind the dialog is given the inert attribute, making all its elements non-focusable while the modal is open. On close, focus returns to whichever element triggered the dialog to open.
All animations respect the prefers-reduced-motion media query. When a user has enabled this preference, transitions are reduced to near-zero duration. Modals still appear instantly but without the scale-and-slide animation. Accordion panels expand/collapse immediately rather than animating their height. Dropdowns and combobox lists render instantly. No motion is lost — the content transition is just instantaneous instead of animated.
Confirm Action
This demonstrates a fully accessible modal dialog. Focus is trapped within this dialog while it's open. Try pressing Tab repeatedly — you won't be able to reach any elements behind the dialog. Press Escape to close, or click the backdrop outside this dialog.
The focus will return to the "Open Dialog" button when you close it.