Modal Dialog
Opens a focused dialog; Tab/Shift+Tab cycle inside · Esc or click backdrop to close · focus returns to trigger
Dropdown Menu
Click or Enter/Space to open · ↓ focuses first item · ↑↓ navigate · Esc closes · Tab moves onward
Tabs
←→ switch tabs · Home/End first/last · only active tab in tab order
Content for Tab One. This panel is visible and reachable by Tab key.
Content for Tab Two. Use the arrow keys to switch between tabs.
Content for Tab Three. Only the active tab is focusable at a time.
Combobox (Autocomplete)
Type to filter · ↓↑ navigate · Enter select · Esc closes · Tab moves onward
Apple
Apricot
Banana
Blackberry
Blueberry
Cherry
Coconut
Cranberry
Date
Dragonfruit
Fig
Grape
Guava
Kiwi
Lemon
Lime
Mango
Nectarine
Orange
Papaya
Accordion / Disclosure Group
Click or Enter/Space to expand/collapse · multiple may be open · animate then toggle hidden at end
Content for the first section. Collapses smoothly when hidden.
Content for the second section. Also supports multiple open panels at once.
Content for the third section. Uses height animation then toggles hidden attribute.