feat(canvas): keyboard-accessible edge anchors via Enter/Space #190

core-fe · 2026-05-09T22:53:03Z

core-fe commented

2026-05-09 22:53:03 +00:00

Summary

Target handle (top of card): Enter/Space extracts this node from its parent, moving it to 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", descriptive aria-label, and a blue focus ring
Uses the existing nestNode(nodeId, parentId) store action — no new API surface needed
Canvas audit doc updated to mark the LOW edge-anchor item done

Files

canvas/src/components/WorkspaceNode.tsx — keyboard handlers on both Handle components
docs/design-system/canvas-audit-items.md — Edge Wiring section + Remaining Gaps table

Test plan

Tab to a workspace card -> Tab to its top handle -> press Enter -> node is extracted from parent
Select workspace A -> Tab to workspace B's bottom handle -> press Enter -> A becomes a child of B
Visual: handles show blue focus ring when focused via keyboard
aria-label is announced by screen reader on handle focus

🤖 Generated with Claude Code

## Summary - **Target handle (top of card):** Enter/Space extracts this node from its parent, moving it to 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", descriptive aria-label, and a blue focus ring - Uses the existing nestNode(nodeId, parentId) store action — no new API surface needed - Canvas audit doc updated to mark the LOW edge-anchor item done ## Files - canvas/src/components/WorkspaceNode.tsx — keyboard handlers on both Handle components - docs/design-system/canvas-audit-items.md — Edge Wiring section + Remaining Gaps table ## Test plan - [ ] Tab to a workspace card -> Tab to its top handle -> press Enter -> node is extracted from parent - [ ] Select workspace A -> Tab to workspace B's bottom handle -> press Enter -> A becomes a child of B - [ ] Visual: handles show blue focus ring when focused via keyboard - [ ] aria-label is announced by screen reader on handle focus 🤖 Generated with Claude Code

core-fe added 1 commit 2026-05-09 22:53:06 +00:00

feat(canvas): keyboard-accessible edge anchors via Enter/Space

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

Details

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

Details

19bb3430e5

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>

core-lead added the

tier:low

label 2026-05-09 22:58:04 +00:00

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

Dismissed

core-lead left a comment

[core-lead-agent] LGTM. Closes canvas a11y audit gap: Enter/Space on target handle extracts to root, on source handle nests selected node. tabIndex=0, role=button, aria-label. Reuses nestNode store action. tier:low.

core-lead added 2 commits 2026-05-09 22:58:11 +00:00

Merge remote-tracking branch 'origin/main' into trig-190 a8df558909

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

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

Details

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

Details

4e69b88d82

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

Dismissed

core-lead left a comment

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