Add keyboard navigation for graph nodes (accessibility)

Enable keyboard navigation for git visualization nodes:
- Arrow keys: Navigate between nodes spatially
- Tab/Shift+Tab: Jump between node type groups
- Home/End: Jump to first/last node
- Escape: Clear focus

Accessibility features:
- Canvas is now focusable with tabindex
- ARIA live region announces focused nodes for screen readers
- Visual focus ring (dashed white border) indicates selected node
- sr-only CSS class for visually hidden announcements

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

Author: MarkJamesHoward

electron/src/renderer/canvas/DrawCircle.ts

@@ -13,7 +13,8 @@ import type { GitNode } from "./Types";
 export function DrawCircle(
   ctx: CanvasRenderingContext2D,
   node: GitNode,
-  dragging: boolean
+  dragging: boolean,
+  isFocused: boolean = false
 ) {
   var innerRadius = 1,
     outerRadius = 20;
@@ -84,4 +85,24 @@ export function DrawCircle(
 
   DrawText(ctx, node);
   ctx.closePath();
+
+  // Draw focus ring for keyboard navigation
+  if (isFocused) {
+    ctx.beginPath();
+    let focusRadius = radius;
+    if (node.type === NodeType.head) focusRadius = radiusHEAD;
+    else if (node.type === NodeType.branch) focusRadius = radiusBRANCH;
+    else if (node.type === NodeType.tag) focusRadius = radiusTAG;
+    else if (node.type === NodeType.remotebranch) focusRadius = radiusBRANCH;
+    else if (node.type === NodeType.tree) focusRadius = radiusTREE;
+    else if (node.type === NodeType.blob) focusRadius = radiusBLOB;
+
+    ctx.arc(node.xPos, node.yPos, focusRadius + 8, 0, 2 * Math.PI);
+    ctx.lineWidth = 4;
+    ctx.strokeStyle = "#fff";
+    ctx.setLineDash([8, 4]);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.closePath();
+  }
 }

electron/src/renderer/canvas/DrawNodes.ts

@@ -48,16 +48,23 @@ export function DrawText(ctx: CanvasRenderingContext2D, node: GitNode) {
   }
 }
 
-export function DrawNodes<T>(ctx: CanvasRenderingContext2D, nodes: Array<T>) {
+export function DrawNodes<T>(
+  ctx: CanvasRenderingContext2D,
+  nodes: Array<T>,
+  focusedNode: GitNode | null = null
+) {
   nodes.forEach((node) => {
-    DrawNode(ctx, node as unknown as GitNode, false);
+    const n = node as unknown as GitNode;
+    const isFocused = focusedNode !== null && n.hash === focusedNode.hash && n.type === focusedNode.type;
+    DrawNode(ctx, n, false, isFocused);
   });
 }
 
 export function DrawNode(
   ctx: CanvasRenderingContext2D,
   node: GitNode,
-  dragging: boolean
+  dragging: boolean,
+  isFocused: boolean = false
 ) {
-  DrawCircle(ctx, node, dragging);
+  DrawCircle(ctx, node, dragging, isFocused);
 }

electron/src/renderer/canvas/KeyboardNav.ts

@@ -0,0 +1,283 @@
+import type { GitNode, GitCommit, GitTree, GitBlob, GitBranch, GitTag } from "./Types";
+import { NodeType } from "./Types";
+import type { VisState } from "./Redraw";
+
+type AnyNode = GitNode | GitCommit | GitTree | GitBlob | GitBranch | GitTag;
+
+let focusedNode: AnyNode | null = null;
+let focusableNodes: AnyNode[] = [];
+let focusIndex = -1;
+
+const TYPE_NAMES = ["Branch", "Commit", "Tree", "Blob", "HEAD", "Remote Branch", "Tag"];
+
+export function getFocusedNode(): AnyNode | null {
+  return focusedNode;
+}
+
+export function setFocusedNode(node: AnyNode | null): void {
+  focusedNode = node;
+  if (node) {
+    focusIndex = focusableNodes.indexOf(node);
+    announceNode(node);
+  } else {
+    focusIndex = -1;
+    clearAnnouncement();
+  }
+}
+
+export function buildFocusableList(state: VisState): AnyNode[] {
+  const nodes: AnyNode[] = [];
+
+  // Add in visual column order (left to right)
+  nodes.push(...state.HEADNodes);
+  nodes.push(...state.BranchNodes);
+  if (state.showTags) nodes.push(...state.TagNodes);
+  nodes.push(...state.CommitNodes);
+  if (state.showTrees) nodes.push(...state.TreeNodes);
+  if (state.showBlobs) nodes.push(...state.BlobNodes);
+  nodes.push(...state.RemoteBranchNodes);
+
+  // Sort by x position first, then y position for consistent navigation
+  focusableNodes = nodes.sort((a, b) => {
+    const ax = a.xPos ?? 0;
+    const bx = b.xPos ?? 0;
+    const ay = a.yPos ?? 0;
+    const by = b.yPos ?? 0;
+    return ax - bx || ay - by;
+  });
+
+  return focusableNodes;
+}
+
+function announceNode(node: AnyNode): void {
+  const announcer = document.getElementById("node-announcer");
+  if (!announcer) return;
+
+  const typeName = TYPE_NAMES[node.type] || "Node";
+  let label = "";
+
+  if ("name" in node && node.name) {
+    label = node.name;
+  } else if ("filename" in node && node.filename) {
+    label = node.filename;
+  } else if (node.hash) {
+    label = node.hash.substring(0, 7);
+  }
+
+  const text = node.text ? `, ${node.text}` : "";
+  announcer.textContent = `${typeName}: ${label}${text}`;
+}
+
+function clearAnnouncement(): void {
+  const announcer = document.getElementById("node-announcer");
+  if (announcer) {
+    announcer.textContent = "";
+  }
+}
+
+function findNearestNode(
+  currentNode: AnyNode,
+  direction: "left" | "right" | "up" | "down"
+): AnyNode | null {
+  if (focusableNodes.length === 0) return null;
+
+  const cx = currentNode.xPos ?? 0;
+  const cy = currentNode.yPos ?? 0;
+
+  let candidates: AnyNode[] = [];
+
+  switch (direction) {
+    case "left":
+      candidates = focusableNodes.filter(n => (n.xPos ?? 0) < cx - 10);
+      break;
+    case "right":
+      candidates = focusableNodes.filter(n => (n.xPos ?? 0) > cx + 10);
+      break;
+    case "up":
+      candidates = focusableNodes.filter(n => (n.yPos ?? 0) < cy - 10);
+      break;
+    case "down":
+      candidates = focusableNodes.filter(n => (n.yPos ?? 0) > cy + 10);
+      break;
+  }
+
+  if (candidates.length === 0) return null;
+
+  // Find nearest by distance
+  let nearest = candidates[0];
+  let minDist = Infinity;
+
+  for (const n of candidates) {
+    const nx = n.xPos ?? 0;
+    const ny = n.yPos ?? 0;
+    const dist = Math.sqrt((nx - cx) ** 2 + (ny - cy) ** 2);
+    if (dist < minDist) {
+      minDist = dist;
+      nearest = n;
+    }
+  }
+
+  return nearest;
+}
+
+function getNodesByTypeGroup(state: VisState): Map<string, AnyNode[]> {
+  const groups = new Map<string, AnyNode[]>();
+  groups.set("head", state.HEADNodes);
+  groups.set("branch", state.BranchNodes);
+  if (state.showTags) groups.set("tag", state.TagNodes);
+  groups.set("commit", state.CommitNodes);
+  if (state.showTrees) groups.set("tree", state.TreeNodes);
+  if (state.showBlobs) groups.set("blob", state.BlobNodes);
+  groups.set("remote", state.RemoteBranchNodes);
+  return groups;
+}
+
+function getNextTypeGroup(currentType: NodeType, state: VisState, reverse: boolean): AnyNode | null {
+  const typeOrder = [
+    NodeType.head,
+    NodeType.branch,
+    NodeType.tag,
+    NodeType.commit,
+    NodeType.tree,
+    NodeType.blob,
+    NodeType.remotebranch,
+  ];
+
+  const currentIndex = typeOrder.indexOf(currentType);
+  const direction = reverse ? -1 : 1;
+
+  for (let i = 1; i <= typeOrder.length; i++) {
+    const nextIndex = (currentIndex + i * direction + typeOrder.length) % typeOrder.length;
+    const nextType = typeOrder[nextIndex];
+
+    // Check if this type is visible
+    if (nextType === NodeType.tag && !state.showTags) continue;
+    if (nextType === NodeType.tree && !state.showTrees) continue;
+    if (nextType === NodeType.blob && !state.showBlobs) continue;
+
+    // Find first node of this type
+    const node = focusableNodes.find(n => n.type === nextType);
+    if (node) return node;
+  }
+
+  return null;
+}
+
+export function createKeyboardHandler(
+  canvas: HTMLCanvasElement,
+  state: VisState,
+  onFocusChange: () => void
+): void {
+  canvas.addEventListener("keydown", (e: KeyboardEvent) => {
+    // Only handle keys when canvas is focused
+    if (document.activeElement !== canvas) return;
+
+    let handled = false;
+
+    switch (e.key) {
+      case "ArrowLeft":
+        if (focusedNode) {
+          const next = findNearestNode(focusedNode, "left");
+          if (next) {
+            setFocusedNode(next);
+            handled = true;
+          }
+        }
+        break;
+
+      case "ArrowRight":
+        if (focusedNode) {
+          const next = findNearestNode(focusedNode, "right");
+          if (next) {
+            setFocusedNode(next);
+            handled = true;
+          }
+        } else if (focusableNodes.length > 0) {
+          // First focus - start with first node
+          setFocusedNode(focusableNodes[0]);
+          handled = true;
+        }
+        break;
+
+      case "ArrowUp":
+        if (focusedNode) {
+          const next = findNearestNode(focusedNode, "up");
+          if (next) {
+            setFocusedNode(next);
+            handled = true;
+          }
+        }
+        break;
+
+      case "ArrowDown":
+        if (focusedNode) {
+          const next = findNearestNode(focusedNode, "down");
+          if (next) {
+            setFocusedNode(next);
+            handled = true;
+          }
+        } else if (focusableNodes.length > 0) {
+          // First focus - start with first node
+          setFocusedNode(focusableNodes[0]);
+          handled = true;
+        }
+        break;
+
+      case "Tab":
+        if (focusedNode) {
+          const next = getNextTypeGroup(focusedNode.type, state, e.shiftKey);
+          if (next) {
+            setFocusedNode(next);
+            handled = true;
+          }
+        } else if (focusableNodes.length > 0) {
+          setFocusedNode(focusableNodes[0]);
+          handled = true;
+        }
+        break;
+
+      case "Home":
+        if (focusableNodes.length > 0) {
+          setFocusedNode(focusableNodes[0]);
+          handled = true;
+        }
+        break;
+
+      case "End":
+        if (focusableNodes.length > 0) {
+          setFocusedNode(focusableNodes[focusableNodes.length - 1]);
+          handled = true;
+        }
+        break;
+
+      case "Escape":
+        if (focusedNode) {
+          setFocusedNode(null);
+          handled = true;
+        }
+        break;
+
+      case "Enter":
+      case " ":
+        // Select/activate the focused node (currently just keeps focus)
+        if (focusedNode) {
+          handled = true;
+        }
+        break;
+    }
+
+    if (handled) {
+      e.preventDefault();
+      e.stopPropagation();
+      onFocusChange();
+    }
+  });
+
+  // Clear focus when canvas loses focus
+  canvas.addEventListener("blur", () => {
+    if (focusedNode) {
+      setFocusedNode(null);
+      onFocusChange();
+    }
+  });
+}

electron/src/renderer/canvas/Redraw.ts

@@ -35,26 +35,27 @@ export interface VisState {
 export function ReDraw(
   canvas: HTMLCanvasElement,
   ctx: CanvasRenderingContext2D,
-  state: VisState
+  state: VisState,
+  focusedNode: GitNode | null = null
 ) {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-  DrawNodes(ctx, state.CommitNodes);
+  DrawNodes(ctx, state.CommitNodes, focusedNode);
 
   if (state.showTrees) {
-    DrawNodes(ctx, state.TreeNodes);
+    DrawNodes(ctx, state.TreeNodes, focusedNode);
   }
 
   if (state.showBlobs) {
-    DrawNodes(ctx, state.BlobNodes);
+    DrawNodes(ctx, state.BlobNodes, focusedNode);
   }
 
-  DrawNodes(ctx, state.BranchNodes);
+  DrawNodes(ctx, state.BranchNodes, focusedNode);
   if (state.showTags) {
-    DrawNodes(ctx, state.TagNodes);
+    DrawNodes(ctx, state.TagNodes, focusedNode);
   }
-  DrawNodes(ctx, state.RemoteBranchNodes);
-  DrawNodes(ctx, state.HEADNodes);
+  DrawNodes(ctx, state.RemoteBranchNodes, focusedNode);
+  DrawNodes(ctx, state.HEADNodes, focusedNode);
 
   if (state.showTrees) {
     DrawCommitToTreeLinks(ctx, state.CommitNodes, state.TreeNodes);