feat(ux/a11y): visible, labeled command-palette trigger in the sidebar

A ⌘K palette with no visible entry point is itself a discoverability +
a11y gap (keyboard/SR users can't find it). Added a labeled 'Jump to…'
button (aria-label spells out the shortcut) that dispatches a
'commandpalette:open' event the palette now also listens for. Verified
the other top a11y items are already satisfied here (sonner Toaster
provides the aria-live region; sidebar icon buttons are aria-labeled;
skip-link + drawer focus mgmt already present).
This commit is contained in:
Moheeb Zara
2026-05-17 02:02:31 -07:00
parent 390046a96b
commit 331a0c60ce
2 changed files with 18 additions and 1 deletions
+12
View File
@@ -166,6 +166,18 @@ export function AppSidebar({ member, roleName, taskBadge = 0, commsBadge = 0, pa
<p className="text-[var(--sidebar-foreground)]/60 text-xs mt-1.5 font-mono truncate">{space?.name || 'My Space'}</p>
</div>
<div className="px-3 pt-3">
<button
type="button"
onClick={() => window.dispatchEvent(new Event('commandpalette:open'))}
aria-label="Open command palette (Control or Command + K)"
className="w-full flex items-center justify-between gap-2 rounded-md border border-[var(--sidebar-border)] bg-[var(--sidebar-accent)]/40 px-3 py-2 text-xs text-[var(--sidebar-foreground)]/60 hover:text-[var(--sidebar-foreground)] hover:bg-[var(--sidebar-accent)] transition"
>
<span>Jump to…</span>
<kbd className="font-mono text-[10px] border border-[var(--sidebar-border)] rounded px-1.5 py-0.5">⌘K</kbd>
</button>
</div>
{/* Nav */}
<nav aria-label="Primary" className="flex-1 py-4 overflow-y-auto">
<NavSection id="workspace" title="Workspace">
+6 -1
View File
@@ -96,8 +96,13 @@ export function CommandPalette({
setOpen(o => !o)
}
}
const onOpen = () => setOpen(true)
document.addEventListener('keydown', onKey)
return () => document.removeEventListener('keydown', onKey)
window.addEventListener('commandpalette:open', onOpen)
return () => {
document.removeEventListener('keydown', onKey)
window.removeEventListener('commandpalette:open', onOpen)
}
}, [])
const allowed = useCallback(