Make the canvas keyboard-reachable + trap focus in dialogs (#92)

Closes #84 (scoped first slice). Objects are focusable role=button with an aria-label and Enter/Space selection — which makes the existing arrow-key nudge reachable by keyboard for the first time — with a :focus-visible ring. The <svg> gets role=application + label + title. Modal traps Tab (robustly: pulls back focus fallen to <body> when a control is removed/disabled) and restores focus to the opener if it's still in the DOM. Verified live with real keyboard. Gadfly round addressed (canonical kind label, aria-current, trap robustness).
2026-07-22 03:34:07 +00:00
parent 20bf7ee03d 4b348dcbc0
commit e3d8e01e5b
4 changed files with 116 additions and 5 deletions
@@ -1,5 +1,12 @@
 import { useEffect, useRef, type ReactNode } from 'react'

+// Tabbable controls inside the dialog, in DOM order. type="hidden" inputs are
+// excluded — they'd match `input:not([disabled])` and, sitting at a boundary,
+// break the wrap math. Hoisted out of the handler so it isn't rebuilt per Tab.
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), textarea:not([disabled]), ' +
+  'input:not([disabled]):not([type="hidden"]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
 /**
 * A centered modal dialog over a dimmed backdrop. Closes on Escape or a backdrop
 * click, unless `busy` (a mutation is in flight) — then it stays put so the
@@ -27,12 +34,57 @@ export function Modal({
  busyRef.current = busy

  useEffect(() => {
-    cardRef.current?.focus()
+    const card = cardRef.current
+    // Remember who opened the dialog so focus can return there on close —
+    // otherwise it lands on <body> and a keyboard user loses their place.
+    const opener = document.activeElement as HTMLElement | null
+    card?.focus()
+
+    const focusable = () =>
+      Array.from(card?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR) ?? [])
+
    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape' && !busyRef.current) onCloseRef.current()
+      if (e.key === 'Escape' && !busyRef.current) {
+        onCloseRef.current()
+        return
+      }
+      if (e.key !== 'Tab') return
+      const items = focusable()
+      if (items.length === 0) {
+        e.preventDefault()
+        card?.focus()
+        return
+      }
+      const first = items[0]
+      const last = items[items.length - 1]
+      const active = document.activeElement
+      // If focus is NOT inside the dialog, pull it back in rather than let Tab
+      // escape. This is the robust case that covers focus having fallen to
+      // <body> — a control that was removed (ShareGardenModal's remove-share
+      // button) or disabled while busy — as well as any externally-stolen focus.
+      if (!card || !card.contains(active)) {
+        e.preventDefault()
+        ;(e.shiftKey ? last : first).focus()
+        return
+      }
+      if (e.shiftKey && (active === first || active === card)) {
+        e.preventDefault()
+        last.focus()
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault()
+        first.focus()
+      }
    }
    document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      // Restore focus to the opener only if it's still in the document — the
+      // delete/clear flows this trap targets often remove the element that
+      // opened the dialog (a garden card, a plop row). A disconnected node's
+      // focus() silently no-ops and leaves focus on <body>, so fall through to
+      // that case explicitly rather than pretend it worked.
+      if (opener && opener.isConnected) opener.focus()
+    }
  }, [])

  return (
@@ -235,7 +235,13 @@ export function GardenCanvas({
        className="h-full w-full select-none"
        style={{ touchAction: 'none' }}
        onPointerDown={onCanvasPointerDown}
+        // role="application" tells a screen reader this is an interactive canvas
+        // to operate, not a document to read linearly. The <title> names it, and
+        // objects inside are individually focusable buttons (see ObjectShape).
+        role="application"
+        aria-label={`${garden.name} — garden layout. Tab between objects; Enter selects; arrow keys nudge a selection.`}
      >
+        <title>{garden.name} garden layout</title>
        <g transform={`translate(${viewport.tx} ${viewport.ty}) scale(${viewport.scale})`}>
          {drawnGridCm != null && (
            <>
@@ -1,5 +1,6 @@
-import { memo, type PointerEvent } from 'react'
+import { memo, type KeyboardEvent, type PointerEvent } from 'react'
 import { objectTransform } from './shared'
+import { kindDef, objectDisplayName } from './kinds'
 import type { EditorObject } from './types'

 const DEFAULT_FILL = '#8a8a8a'
@@ -57,11 +58,50 @@ export const ObjectShape = memo(function ObjectShape({
    onSelect(object.id)
  }

+  // Keyboard path into selection (#84): the arrow-key nudge handler already
+  // exists but only ever acted on a pointer selection, so it was unreachable
+  // without a mouse. Enter/Space on a focused object selects it, which is the
+  // step that was missing.
+  function handleKey(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      e.stopPropagation()
+      onSelect(object.id)
+    }
+  }
+
  const stroke = selected ? '#2f7a3e' : '#00000033'
  const strokeWidth = selected ? 2 : 1

+  // A concise accessible name: the object's label plus its kind's canonical
+  // label, e.g. "North Bed, In-ground" — reusing kindDef so it never diverges
+  // from what the UI shows (an ad-hoc kind.replace() gave "in ground"). The
+  // dimensions aren't included; they need the garden's unit context this
+  // component doesn't hold, so they're a follow-up.
+  const kindLabel = kindDef(object.kind)?.label ?? object.kind
+  const label = `${objectDisplayName(object)}, ${kindLabel}`
+
+  // Keyboard focus needs to be VISIBLE — that's the point of making the canvas
+  // keyboard-reachable. The `object-shape` class carries a :focus-visible rule
+  // (styles/index.css) that draws a dashed ring; :focus-visible means it shows
+  // for keyboard focus but NOT a mouse click, which is exactly what we want. CSS
+  // rather than React state because onFocus on an SVG <g> is unreliable and a
+  // presentation attribute is overridden by any CSS rule.
  return (
-    <g transform={objectTransform(object)} onPointerDown={handleDown} style={{ cursor: 'pointer' }}>
+    <g
+      className="object-shape"
+      transform={objectTransform(object)}
+      onPointerDown={handleDown}
+      onKeyDown={handleKey}
+      role="button"
+      tabIndex={0}
+      aria-label={label}
+      // aria-current, not aria-pressed: selecting an object isn't a toggle (a
+      // toggle is what aria-pressed means). aria-current marks it as the active
+      // item among the objects. Omitted, not "false", when unselected.
+      aria-current={selected || undefined}
+      style={{ cursor: 'pointer' }}
+    >
      {object.shape === 'circle' ? (
        <ellipse
          cx={0}
@@ -28,6 +28,19 @@
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
+
+  /* Keyboard focus on a canvas object (#84). :focus-visible shows the ring for
+     keyboard focus but not a mouse click; the dashed accent ring distinguishes
+     "focused" from the solid ring that marks "selected". A CSS rule overrides
+     the shape's inline stroke presentation attributes. */
+  .object-shape {
+    outline: none;
+  }
+  .object-shape:focus-visible :is(rect, ellipse) {
+    stroke: var(--color-accent-strong);
+    stroke-width: 2;
+    stroke-dasharray: 5 4;
+  }
 }

 /* Dark theme: override the same tokens so utilities recolor automatically. */