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>
|
<p className="text-[var(--sidebar-foreground)]/60 text-xs mt-1.5 font-mono truncate">{space?.name || 'My Space'}</p>
|
||||||
</div>
|
</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 */}
|
||||||
<nav aria-label="Primary" className="flex-1 py-4 overflow-y-auto">
|
<nav aria-label="Primary" className="flex-1 py-4 overflow-y-auto">
|
||||||
<NavSection id="workspace" title="Workspace">
|
<NavSection id="workspace" title="Workspace">
|
||||||
|
|||||||
@@ -96,8 +96,13 @@ export function CommandPalette({
|
|||||||
setOpen(o => !o)
|
setOpen(o => !o)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const onOpen = () => setOpen(true)
|
||||||
document.addEventListener('keydown', onKey)
|
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(
|
const allowed = useCallback(
|
||||||
|
|||||||
Reference in New Issue
Block a user