Keyboard Shortcuts Panel
ProA modal overlay listing all available keyboard shortcuts grouped by category. Triggered by the ? key (Shift+/) and displays shortcut keys in styled <kbd> elements alongside their descriptions. Provides a quick reference for power users without leaving the current context.
2 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Full shortcuts panel with grouped categories and styled key indicators. | Use as the standard keyboard reference accessible from any page via the ? key. |
Usage Guidelines
Group shortcuts by category — Navigation, Actions, Editing — with clear headings.
Override the ? key in text inputs — only trigger when no input is focused.
Use <kbd> elements for key indicators to ensure correct semantics.
List shortcuts that are not actually implemented — keep the panel in sync with reality.
Show modifier keys with platform-appropriate symbols (⌘ for Mac, Ctrl for Windows).
Use the panel as a substitute for discoverability — shortcuts should enhance, not replace, UI controls.
Keep the panel dismissible with Escape.
Show platform-inappropriate key symbols — detect the OS and show the right modifier.
Code
Design Tokens
Accessibility
- Uses role="dialog" with aria-label="Keyboard shortcuts".
- Focus is trapped within the dialog while open.
- Close with Escape and return focus to the element that triggered the panel.
- Key indicators use <kbd> elements for semantic correctness.
- Screen readers should be able to navigate the grouped structure via headings.