diff --git a/canvas/src/components/Toolbar.tsx b/canvas/src/components/Toolbar.tsx index 777d4f92..3ccef4a2 100644 --- a/canvas/src/components/Toolbar.tsx +++ b/canvas/src/components/Toolbar.tsx @@ -292,7 +292,7 @@ export function Toolbar() { onClick={() => setHelpOpen((open) => !open)} className="flex items-center justify-center w-7 h-7 bg-surface-card hover:bg-surface-card/70 border border-line rounded-lg transition-colors text-ink-mid hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40" aria-expanded={helpOpen} - aria-label="Open quick help" + aria-label="Open shortcuts and tips" title="Help — shortcuts & quick start" >
-
- Quick start +
+
+ Shortcuts & tips
-
+
+ + + + + + - - - + +
)} diff --git a/docs/design-system/canvas-audit-items.md b/docs/design-system/canvas-audit-items.md index 86888f69..910d9dd8 100644 --- a/docs/design-system/canvas-audit-items.md +++ b/docs/design-system/canvas-audit-items.md @@ -73,10 +73,10 @@ canvas/src/ - **Minimap:** Not present (MiniMap mocked as null in tests) - **Status:** Basic keyboard support via viewport shortcuts -### Keyboard Shortcuts ⚠️ PARTIAL -- Exists in `useKeyboardShortcuts.ts` but no `aria-describedby` on trigger buttons -- No dedicated keyboard shortcut help dialog -- **Gap:** Users can't discover shortcuts visually +### Keyboard Shortcuts ✅ +- Shortcuts exist in `useKeyboardShortcuts.ts`: Esc, Enter, Shift+Enter, Cmd+]/[, Z +- Toolbar help dialog ("Shortcuts & tips") documents all shortcuts + mouse interactions +- Remaining gap: `aria-describedby` on trigger buttons for screen-reader discoverability ### Focus Management ✅ (strong) - Skip link → `#canvas-main` ✅ @@ -108,8 +108,8 @@ canvas/src/ | Priority | Item | Files | Status | |----------|------|-------|--------| -| HIGH | Screen reader announcements for canvas state changes | Canvas.tsx | Not started | -| MEDIUM | Keyboard shortcut help dialog | useKeyboardShortcuts.ts | Not started | +| ~~HIGH~~ | ~~Screen reader announcements for canvas state changes~~ | ~~Canvas.tsx, canvas-events.ts, canvas.ts~~ | ✅ Done — PR #172 | +| ~~MEDIUM~~ | ~~Keyboard shortcut help dialog~~ | ~~Toolbar.tsx, useKeyboardShortcuts.ts~~ | ✅ Done — PR #173 | | MEDIUM | Keyboard-accessible node drag | WorkspaceNode.tsx, useDragHandlers.ts | Not started | | LOW | Edge anchor keyboard accessibility | A2AEdge.tsx | Not started | | LOW | Node resize keyboard accessibility | WorkspaceNode.tsx (NodeResizer) | Not started |