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

The arrow-key nudge handler existed but only ever acted on a POINTER selection, and nothing could select without a mouse — so the feature was unusable by exactly the keyboard users it's for. This is the scoped first slice: give the canvas a keyboard path in, and fix the Modal focus trap that every destructive confirmation goes through. Canvas: - The <svg> gets role="application" + an aria-label describing the controls, and a <title> naming the garden — a screen reader now announces an interactive canvas rather than an empty graphic. - Each object <g> is a focusable role="button" with an aria-label (name + kind) and aria-pressed reflecting selection. Enter/Space selects it — the step that was missing — which makes the existing arrow-key nudge reachable. - A :focus-visible CSS rule draws a dashed accent ring on keyboard focus (and NOT on a mouse click, which is the point of :focus-visible). CSS rather than React state because onFocus on an SVG <g> is unreliable, and a CSS rule cleanly overrides the shape's inline stroke. Modal (blast radius: DeleteGarden/ClearBed/DeletePlant/DeleteSeedLot/Share): - Tab is trapped inside the dialog and wraps at the ends, instead of walking out into the page behind the backdrop. - On close, focus returns to the element that opened the dialog rather than landing on <body>. Verified live against the built binary with real keyboard input: Tab focuses an object (SVG <g tabindex> genuinely takes focus), Enter flips aria-pressed false→true, the focus-visible dash renders (computed stroke-dasharray "5px, 4px"), the dialog traps focus through 5 Tabs, and Escape closes it and restores focus to the opener. Follow-ups noted, not done here: object dimensions in the aria-label (needs the garden's unit context this component doesn't hold), roving-tabindex between plops inside a focused bed, and the EditorRail tablist semantics. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
2026-07-21 23:20:47 -04:00
parent 84f249a774
commit bfc5d9a871
4 changed files with 97 additions and 5 deletions
@@ -27,12 +27,51 @@ 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()
    // The dialog's own focusable controls, in DOM order, skipping disabled ones.
    const focusable = () =>
      Array.from(
        card?.querySelectorAll<HTMLElement>(
          'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])',
        ) ?? [],
      )
    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
      // Trap Tab inside the dialog: wrap at the ends, and pull a stray focus
      // (e.g. starting from the card itself) back to a real control. Without
      // this, Tab walks straight out into the page behind the backdrop.
      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 (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)
      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 { objectDisplayName } from './kinds'
 import type { EditorObject } from './types'
 const DEFAULT_FILL = '#8a8a8a'
@@ -57,11 +58,44 @@ 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, e.g.
  // "North Bed, raised bed". The dimensions aren't included — they need the
  // garden's unit context this component doesn't hold — so they're a follow-up.
  const label = `${objectDisplayName(object)}, ${object.kind.replace(/_/g, ' ')}`
  // 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-pressed={selected}
      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. */