test(canvas): add KeyboardShortcutsDialog a11y render tests

6 tests covering:
- role=dialog + aria-modal=true
- aria-labelledby pointing to dialog title
- no render when open=false
- Escape calls onClose
- focus moves to close button on open
- Tab is intercepted to trap focus within dialog

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

canvas/src/components/__tests__/KeyboardShortcutsDialog.test.tsx

@@ -0,0 +1,90 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup, act, waitFor } from "@testing-library/react";
+
+// ── Component under test — imported AFTER mocks ───────────────────────────────
+import { KeyboardShortcutsDialog } from "../KeyboardShortcutsDialog";
+
+afterEach(cleanup);
+
+const onCloseMock = vi.fn();
+
+beforeEach(() => {
+  onCloseMock.mockReset();
+});
+
+describe("KeyboardShortcutsDialog — a11y render", () => {
+  it("renders with role=dialog and aria-modal=true when open", async () => {
+    render(<KeyboardShortcutsDialog open={true} onClose={onCloseMock} />);
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeTruthy();
+    });
+    const dialog = screen.getByRole("dialog");
+    expect(dialog.getAttribute("aria-modal")).toBe("true");
+  });
+
+  it("has aria-labelledby pointing to the dialog title", async () => {
+    render(<KeyboardShortcutsDialog open={true} onClose={onCloseMock} />);
+    const dialog = await waitFor(() => screen.getByRole("dialog"));
+    const labelledby = dialog.getAttribute("aria-labelledby");
+    expect(labelledby).toBeTruthy();
+    // The labelledby should reference the h2 with id="keyboard-shortcuts-title"
+    const title = document.getElementById(labelledby!);
+    expect(title?.textContent).toMatch(/keyboard shortcuts/i);
+  });
+
+  it("does not render when open=false", () => {
+    render(<KeyboardShortcutsDialog open={false} onClose={onCloseMock} />);
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("calls onClose when Escape is pressed", async () => {
+    render(<KeyboardShortcutsDialog open={true} onClose={onCloseMock} />);
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeTruthy());
+    act(() => {
+      fireEvent.keyDown(window, { key: "Escape" });
+    });
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("focuses the first focusable element (close button) when dialog opens", async () => {
+    render(<KeyboardShortcutsDialog open={true} onClose={onCloseMock} />);
+    // The component uses requestAnimationFrame to move focus; wait for it to settle.
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeTruthy());
+    await act(async () => {
+      await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+    });
+    const closeBtn = screen.getByRole("button", { name: /close/i });
+    expect(document.activeElement).toBe(closeBtn);
+  });
+
+  it("traps Tab focus within the dialog", async () => {
+    render(<KeyboardShortcutsDialog open={true} onClose={onCloseMock} />);
+    const dialog = await waitFor(() => screen.getByRole("dialog"));
+
+    // Collect all focusable elements inside the dialog
+    const focusableSelectors =
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    const focusableEls = Array.from(
+      dialog.querySelectorAll<HTMLElement>(focusableSelectors)
+    );
+    expect(focusableEls.length).toBeGreaterThan(0);
+
+    const onlyFocusable = focusableEls[0];
+    act(() => { onlyFocusable.focus(); });
+
+    // Simulate Tab keydown. The dialog's handler should call preventDefault()
+    // to stop focus leaving the dialog. Verify by checking the event was
+    // handled (focus remains on the only focusable element).
+    let tabWasIntercepted = false;
+    const tabHandler = (e: KeyboardEvent) => {
+      if (e.key === "Tab") tabWasIntercepted = e.defaultPrevented;
+    };
+    window.addEventListener("keydown", tabHandler);
+    act(() => {
+      fireEvent.keyDown(onlyFocusable, { key: "Tab", shiftKey: false });
+    });
+    expect(tabWasIntercepted).toBe(true);
+    window.removeEventListener("keydown", tabHandler);
+  });
+});

docs/design-system/canvas-audit-items.md

@@ -55,7 +55,7 @@ canvas/src/
 ### Node Rendering ✅ (with notes)
 - **Framework:** `@xyflow/react` (React Flow) — DOM-based, not SVG/Canvas
 - **Node selection:** `aria-pressed` + border ring (`border-accent/70`) + shadow
-- **Node drag:** React Flow native drag — mouse only, no keyboard alternative yet
+- **Node drag:** React Flow native drag (mouse) + arrow-key nudge (10px, 50px with Shift) — keyboard accessible (PR #182) ✅
 - **Node resize:** `NodeResizer` component visible on selected card, keyboard-inaccessible
 - **Status:** Accessible via `aria-label` on node cards — "Alpha Workspace workspace — online"
 
@@ -76,7 +76,7 @@ canvas/src/
 - All shortcuts in `useKeyboardShortcuts.ts` with `inInput` guard ✅
 - Global `?` shortcut opens `KeyboardShortcutsDialog` (PR #175) ✅
 - Dialog: portal-based, aria-modal, focus trap, Escape close ✅
-- Arrow keys move selected node 10px (50px with Shift) — keyboard node drag (this PR) ✅
+- Arrow keys move selected node 10px (50px with Shift) — keyboard node drag (PR #182) ✅
 - Hierarchy navigation (Enter/Shift+Enter), z-order (Cmd+]/[), zoom-to-team (Z) ✅
 
 ### Focus Management ✅ (strong)
@@ -97,11 +97,11 @@ canvas/src/
 - Escape + Tab close menu ✅
 - Auto-focus first item on open ✅
 
-### Drag and Drop ⚠️ PARTIAL
+### Drag and Drop ✅
 - **Mouse drag:** React Flow native
 - **Drop target:** Visual indicator (`bg-emerald-950/40 border-emerald-400/60`) ✅
-- **Keyboard alternative:** None — nodes repositioned only via mouse drag
-- **Status:** Mouse-only. Keyboard users cannot rearrange nodes.
+- **Keyboard alternative:** Arrow-key nudge via `useKeyboardShortcuts` (PR #182) ✅
+- **Status:** Full — mouse and keyboard users can reposition nodes.
 
 ---
 
@@ -111,11 +111,11 @@ canvas/src/
 |----------|------|-------|--------|
 | ~~HIGH~~ | ~~Screen reader announcements for canvas state changes~~ | ~~Canvas.tsx, canvas-events.ts, canvas.ts~~ | ✅ Done — PR #172 |
 | MEDIUM | Keyboard shortcut help dialog | useKeyboardShortcuts.ts | ✅ Done (PR #175) |
-| MEDIUM | Keyboard-accessible node drag | WorkspaceNode.tsx, useDragHandlers.ts | ✅ Done (this PR) |
+| MEDIUM | Keyboard-accessible node drag | WorkspaceNode.tsx, useDragHandlers.ts | ✅ Done (PR #182) |
 | LOW | Edge anchor keyboard accessibility | A2AEdge.tsx | Not started |
 | LOW | Node resize keyboard accessibility | WorkspaceNode.tsx (NodeResizer) | Not started |
 
 ---
 
 *Verified 2026-05-09 by Core-UIUX against molecule-core/canvas/src/*
-*Updated 2026-05-09: screen reader announcements (PR #172) + keyboard shortcut dialog (PR #175) completed*
+*Updated 2026-05-10: keyboard shortcut dialog (PR #175) + keyboard node drag (PR #182) + screen reader announcements (PR #172) all complete*