Component library
Accessible components
Five interactive widgets built with vanilla HTML, CSS and JavaScript. Each follows the WAI-ARIA Authoring Practices keyboard contract and keeps its ARIA state in lockstep with what is on screen.
Modal dialog
A blocking dialog. Focus moves inside on open, is trapped while open, and returns to the trigger on close. The rest of the page becomes inert.
Enter open · Tab / Shift+Tab cycle inside · Esc close
Tabs
A single tab stop: the tablist is entered on the active tab and arrow keys move between tabs. Panels are removed from layout with hidden when inactive.
Profile
This is how your name appears to collaborators across projects.
Billing
Team plan · $24 per seat / month · renews on 1 May.
Security
Two-factor authentication is enabled. Your last password change was 14 days ago.
Tab enter tablist · ←→ switch tab · Home / End first / last · Tab into panel
Combobox
Autocomplete with the aria-activedescendant pattern. DOM focus never leaves the input; the highlighted option is announced through the input.
Type to filter. Options are listed below as you type.
No fruit selected.
↓↑ highlight · Enter select · Esc close and revert · Tab leave
Accordion
A disclosure group. Each header is a button controlling its own region; several panels may be open at once.
Orders ship within two business days. Standard delivery takes three to five days; express delivery arrives the next business day.
Returns are accepted within 30 days in original condition. Refunds are issued to the original payment method within five days of receipt.
Every device carries a two-year limited warranty covering manufacturing defects. Accidental damage is covered by the optional plan.
Enter / Space toggle section · Tab move between headers