Issue: MEDIUM priority from canvas accessibility audit (2026-05-09).
The existing Quick Start help dialog in Toolbar omitted most keyboard shortcuts
from useKeyboardShortcuts.ts — users couldn't discover them visually.
Changes:
- Toolbar.tsx: enhance the help dialog (role="dialog") to include all
documented shortcuts: Esc, Enter, Shift+Enter, Cmd+], Cmd+[, Z, plus
mouse interaction tips for Palette, Right-click, Dbl-click, Shift+click.
Renamed from "Quick start" to "Shortcuts & tips".
- canvas-audit-items.md: update Keyboard Shortcuts section from PARTIAL
to complete; mark help dialog item as done.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Adds a note to the audit doc footer tracking the new component tests
(PR #205: Tooltip, Legend, TermsGate, ApprovalBanner) and bumps the
updated date.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Pre-commit Hook: moved stray "Action:" line inside the section (was appended to
WCAG entry below it after a rebase conflict resolution)
- Removed duplicate text-ink-soft WCAG AA entry (lines 62-68 were a rebase artifact)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Controls: all three buttons (zoom in/out/fit) have aria-label attributes from
React Flow; verified from @xyflow/react source (index.mjs:4453). Removed "verify
if keyboard accessible" caveat.
- MiniMap: actually present in Canvas.tsx (rendered at line 310). The old audit
note "not present (mocked as null in tests)" referred to the minimap being absent
from unit test renders, not from production. Updated to reflect actual presence
and status-coloring behavior.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Canvas runs Next.js 15.5.15 (package-lock.json). Audit doc had
Next.js 14 App Router from before the upgrade. Also add
KeyboardShortcutsDialog.tsx to the directory structure tree.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Cmd/Ctrl+Arrow Up/Down resizes node height (±10px, ±2px with Shift).
Cmd/Ctrl+Arrow Left/Right resizes node width (±10px, ±2px with Shift).
Uses the same onNodesChange('dimensions') path that NodeResizer uses
— no new store action needed. Respects min-width/min-height matching
the NodeResizer constraints (360×200 with children, 210×110 without).
The Arrow-key move shortcut now skips when a modifier key is held,
so Cmd/Ctrl+Arrow unambiguously means resize (not move).
Updates canvas audit doc: Node Rendering section updated and
the LOW node-resize item marked done. All Remaining Gaps items
are now complete.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Target handle (top of card): Enter/Space extracts this node from
its parent, moving it to the root level.
Source handle (bottom of card): Enter/Space nests the currently
selected node as a child of this node (requires another node to be
selected first).
Both handles gain tabIndex=0, role="button", a descriptive aria-label,
and a blue focus ring so keyboard-only users can navigate the
workspace hierarchy without a mouse. Uses the existing nestNode store
action — no new API surface needed.
Updates the canvas audit doc to mark the LOW edge-anchor item done.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The "Node Rendering" and "Drag and Drop" sections still said
"mouse only, no keyboard alternative" and "Keyboard alternative: None"
despite PR #182 (Arrow keys) being merged. Update both to reflect
the keyboard-accessible node drag.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Closes canvas audit item: MEDIUM keyboard-accessible node drag.
- Arrow keys move the selected node by 10px per press; Shift+Arrow
moves by 50px. Position is persisted to the backend via savePosition.
- The modal-dialog guard (same pattern as ? shortcut) prevents Arrow
keys from moving nodes when a modal like KeyboardShortcutsDialog is
open — dialogs own their own arrow semantics.
- All shortcuts guarded by the inInput check so Arrow keys still work
for text navigation inside inputs/textareas.
Changes:
- canvas.ts: new moveNode(dx, dy) store action — updates position
directly without the grow-parents pass that onNodesChange runs on
every drag tick (avoids edge-chase flicker).
- useKeyboardShortcuts.ts: Arrow key handler added.
- canvas.test.ts: new moveNode unit tests (position update, no-op,
savePosition call).
- useKeyboardShortcuts.test.tsx: new integration tests for all
keyboard shortcuts including the new Arrow key handlers.
- canvas-audit-items.md: Keyboard Shortcuts section upgraded to ✅,
drag item marked done.
- canvas-events.test.ts: fix pre-existing double-}); syntax error.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Mark PR #175 (keyboard shortcuts dialog) as ✅ done.
Note that screen reader announcements (HIGH) is in progress by Core-FE.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Major correction from Core-FE review:
- Canvas has THREE themes: System/Light/Dark, not dark-only
- Warm paper tones for light, zinc-adjacent dark for dark mode
- ThemeProvider handles switching, persisted in mol_theme cookie
- Use semantic tokens: bg-surface, bg-surface-card, border-line, text-ink
- NEVER use raw zinc for surfaces — only for borders/disabled/code
Updated:
- Section 1: Three-mode theme palette with exact hex values
- Section 4: Component patterns now use semantic tokens
- Added Section 4.6: ThemeProvider + useTheme() usage
- Section 7: Enforcement checklist now includes token rules
Co-Authored-By: Core-FE <core-fe@moleculesai.app>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Cross-reference the Core-FE draft against actual molecule-core/canvas/src/
codebase. Creates two new docs:
- canvas-design-system-v1.md: Full design system with verified color
palette, typography scale, animation tokens (from theme-tokens.css),
component patterns, WCAG 2.1 AA checklist. Marks all items as
VERIFIED with source file citations.
- canvas-audit-items.md: Updated architecture brain dump with verified
findings on React Flow canvas accessibility. Flags remaining gaps
(screen reader announcements, keyboard shortcuts help, keyboard drag).
Key verified discrepancies from draft:
- Font: system-ui stack (not Inter/Geist)
- Tooltip: uses aria-describedby + role=tooltip (not group-hover CSS)
- Animation tokens: already defined in theme-tokens.css
- ContextMenu: has full keyboard nav (arrow keys, wrap-around)
Co-Authored-By: Core-FE <core-fe@moleculesai.app>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
