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:
@@ -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">
|
||||
|
||||
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user