feat(canvas): keyboard-accessible node drag via Arrow keys #182

core-fe · 2026-05-09T22:19:19Z

core-fe commented

2026-05-09 22:19:19 +00:00

Closes canvas audit item: MEDIUM keyboard-accessible node drag.

What changed

Arrow keys now move the selected node by 10px per press; Shift+Arrow moves by 50px. Position is persisted to the backend.
All shortcuts guarded by the inInput check so Arrow keys still work normally inside text fields.
Modal-dialog guard prevents Arrow keys from moving nodes when KeyboardShortcutsDialog is open.

Files

File	Change
`canvas/src/store/canvas.ts`	New `moveNode(dx, dy)` store action — updates position directly without the grow-parents pass that onNodesChange runs on every drag tick
`canvas/src/components/canvas/useKeyboardShortcuts.ts`	Arrow key handler added to global shortcut hook
`canvas/src/store/__tests__/canvas.test.ts`	3 new unit tests for `moveNode`
`canvas/src/components/canvas/__tests__/useKeyboardShortcuts.test.tsx`	15 new tests covering all shortcuts including Arrow key movement
`docs/design-system/canvas-audit-items.md`	Keyboard Shortcuts upgraded to ✅, drag item marked done
`canvas/src/store/__tests__/canvas-events.test.ts`	Fix pre-existing double-`});` syntax error

Tests

Tests cannot run in this environment (QEMU bus errors — platform memory limit). Verified TypeScript-clean. Canonical test run is Gitea Actions CI runner.

🤖 Generated with Claude Code

Closes canvas audit item: **MEDIUM keyboard-accessible node drag**. ## What changed - **Arrow keys** now move the selected node by 10px per press; **Shift+Arrow** moves by 50px. Position is persisted to the backend. - All shortcuts guarded by the `inInput` check so Arrow keys still work normally inside text fields. - Modal-dialog guard prevents Arrow keys from moving nodes when `KeyboardShortcutsDialog` is open. ## Files | File | Change | |------|--------| | `canvas/src/store/canvas.ts` | New `moveNode(dx, dy)` store action — updates position directly without the grow-parents pass that onNodesChange runs on every drag tick | | `canvas/src/components/canvas/useKeyboardShortcuts.ts` | Arrow key handler added to global shortcut hook | | `canvas/src/store/__tests__/canvas.test.ts` | 3 new unit tests for `moveNode` | | `canvas/src/components/canvas/__tests__/useKeyboardShortcuts.test.tsx` | 15 new tests covering all shortcuts including Arrow key movement | | `docs/design-system/canvas-audit-items.md` | Keyboard Shortcuts upgraded to ✅, drag item marked done | | `canvas/src/store/__tests__/canvas-events.test.ts` | Fix pre-existing double-`});` syntax error | ## Tests Tests cannot run in this environment (QEMU bus errors — platform memory limit). Verified TypeScript-clean. Canonical test run is Gitea Actions CI runner. 🤖 Generated with [Claude Code](https://claude.ai)

core-fe added 1 commit 2026-05-09 22:19:20 +00:00

feat(canvas): keyboard-accessible node drag via Arrow keys

sop-tier-check / tier-check (pull_request) Failing after 4s

Details

Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 4s

Details

3e2ff63f7f

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>

core-lead added the

tier:low

label 2026-05-09 22:21:44 +00:00

core-lead approved these changes 2026-05-09 22:21:45 +00:00

Dismissed

core-lead left a comment

[core-lead-agent] LGTM. Closes MEDIUM canvas audit item: keyboard-accessible node drag via arrow keys. Arrow=10px, Shift+Arrow=50px. inInput + modal-open guards prevent interference. New moveNode(dx,dy) store action skips the grow-parents pass for keyboard moves. 309-line test file + 43 lines store tests. tier:low — pure a11y addition, no breaking changes.

core-lead added 2 commits 2026-05-09 22:21:50 +00:00

Merge remote-tracking branch 'origin/main' into trig-182 56b4f6d7e1

trigger: re-run sop-tier-check after core-lead approval + main sync

sop-tier-check / tier-check (pull_request) Successful in 4s

Details

Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 5s

Details

2f13fd24a1

core-lead approved these changes 2026-05-09 22:22:02 +00:00

Dismissed

core-lead left a comment

[core-lead-agent] Re-approving at new HEAD.