Try it
In each panel: press Ctrl/Cmd + K, then try Arrow keys + Enter.
Tip: if your browser uses Ctrl+K for search, click inside the panel first so the demo can listen for it.
BEFORE
Undiscoverable shortcut + no focus management + color-only highlight.
There’s no visible “Command palette” button or hint. Users must already know the shortcut.
Command palette
(Focus stays where it was; no ARIA; no listbox semantics.)
Close
Go to settings
(Example command)
Open help
(Example command)
Create new project
(Example command)
Sign out
(Example command)
Failure modes: no discoverability; opening doesn’t place focus in the search box; Arrow keys/Enter don’t work; “active” is color-only.
AFTER
Discoverable button + predictable dialog + Arrow keys + Enter (input keeps focus).
Shortcut: Ctrl/Cmd+K
When the palette opens, focus goes to the search field. Use ↑/↓ and Enter to run a command. Esc closes and restores focus.
Key decisions: provide a visible entry point; move focus only on open; keep focus in the input while navigating (aria-activedescendant); restore focus on close.