Five core patterns. One shared standard for clear, dependable interaction.
Modal dialog
A contained decision with a clear next step. Focus is trapped, the background goes inert, and Escape returns you to where you began.
Give your teammate access to the shared workspace.
Invite a collaborator
Choose an email to send an invitation. Your teammate can join with a single click.
Keyboard contract · Tab cycles inside · Esc closes · focus returns to trigger
Tabs
Roving tabindex keeps one tab in the tab order. Arrow keys move the selection while hidden panels stay truly hidden.
Your sprint is moving in the right direction. Review the latest signals before your next standup.
Commented on “Onboarding flow”
Completed 3 tasks in the release checklist
Added 4 new comments to the Q3 plan
Moved “Empty state” to In review
Keyboard contract · ← → switch tabs · one tab in tab order · panels reveal on selection
Combobox
Type to filter a large option set. The highlighted option is announced through aria-activedescendant and remains out of the tab order.
Choose a destination
Keyboard contract · type to filter · ↑ ↓ highlight · Enter selects · Esc reverts
Accordion
Multiple regions can stay open at once. Height animates only while content is visible, then the region is hidden for assistive technology.
Every example uses native controls where possible, semantic structure where needed, and explicit relationships between labels, controls, and regions. State changes are reflected in the DOM and announced.
Focus is intentional. Dialogs trap focus and return it, menus close predictably, and only the active tab sits in the tab order. A visible focus ring appears on every interactive element.
The layout reflows into a single column, controls retain generous hit targets, and menus and panels never rely on visual placement alone. Content remains readable and operable at any supported browser zoom.
Yes. The showcase respects prefers-reduced-motion, shortening transitions and keeping every state change immediate without sacrificing visibility or accessibility.
Keyboard contract · Enter / Space opens and closes · multiple regions may remain open
Clear patterns make better products.
Use these examples as a starting point for your own interface. The smallest details are where trust is built.