Keyboard interaction spec

Framework for documenting keyboard behavior per Rad UI component. Use this when adding or reviewing component docs and tests.

Spec template

Each interactive component page should document:

KeyActionScope
Tabmoves focus to/from the controlpage
Space / Enteractivates or togglescontrol
Escapedismisses overlay (if applicable)overlay
Arrow keysmoves within collection (if applicable)list/menu

Link the relevant WAI-ARIA APG pattern when the component implements a known pattern (Dialog, Menu, Tabs, Combobox, etc.).

Pattern mapping (starter)

Component familyAPG patternNotes
Dialog, AlertDialogModal dialogfocus trap, Escape closes
DropdownMenu, ContextMenu, MenubarMenu / menubarroving aria-activedescendant or roving tabindex
Select, ComboboxSelect / comboboxtypeahead, open/close, item activation
Tabs, TabNavTabshorizontal/vertical arrows between triggers
Accordion, CollapsibleDisclosureEnter/Space on trigger
RadioGroup, ToggleGroupRadio grouparrow keys within group
TreeTree viewexpand/collapse, vertical navigation

Expand this table as components ship keyboard tables on their docs pages.

Authoring checklist

  • Document keys for closed and open states separately when behavior differs
  • Note loop / wrap behavior for menus and tabs when supported
  • Call out disabled items and how focus skips them
  • Add interaction tests that mirror the documented table (Contributor checklist)

Example entry (Dialog)

KeyAction
Tabcycles focus within the dialog
Shift+Tabcycles focus backward within the dialog
Escapecloses the dialog and returns focus to the trigger

Reference: Dialog Modal pattern