- Object aria-label uses kindDef().label (the canonical "In-ground") instead of
an ad-hoc kind.replace() that produced "in ground" and diverged from the UI.
4+ models flagged this.
- aria-current, not aria-pressed, for the selected object — selection isn't a
toggle, which is what aria-pressed means; aria-current marks the active item.
- Modal focus trap made robust: if focus is NOT inside the dialog (fell to
<body> because the focused control was removed — ShareGardenModal's
remove-share button — or disabled while busy, or externally stolen), Tab now
pulls it back in instead of escaping. The previous branches only handled
focus being exactly at a known boundary.
- Focus restore checks opener.isConnected before calling focus(): the delete/
clear flows this targets often remove the element that opened the dialog, and
a disconnected node's focus() silently no-ops.
- Hoisted the focusable-element selector to a module constant, and excluded
input[type="hidden"] (it matched input:not([disabled]) and, at a boundary,
broke the wrap).
Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
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
Fixes from the PR #29 adversarial review (considered; not graded).
Performance / correctness
- ObjectShape is memo'd, so a pan/zoom (which only mutates the world <g>
transform) no longer re-renders every object.
- 'circle' objects render as an <ellipse> (rx/ry), honoring both dims — a
circle when width == height — instead of ignoring heightCm.
- The 1 m grid now actually fades in (opacity ramps as cells grow past the
visibility threshold), matching its description.
- Unique SVG pattern id (useId) so multiple canvases can't collide.
- The canvas re-fits when the garden id changes (not just once), so #11
switching gardens reframes.
Robustness
- geometry.zoomToFitRect takes rect size by magnitude; wheel/pinch ignore
non-finite deltas; ObjectShape clamps dimensions to >= 0 (no invalid SVG).
Maintainability
- Renamed the Size params from `viewport` to `canvasSize` (4 models); moved
easeInOutCubic/lerp into geometry.ts; renamed toLocal → clientToCanvas;
named constants for the label/corner factors; DEFAULT_FILL const;
EditorGarden.unitPref imports UnitPref; the Fit control uses the shared
Button. focusedObjectId/plantable are intentionally reserved for #11/#15.
tsc + 17 vitest tests green; re-verified in a browser (ellipses render,
unique pattern id, wheel zoom + Fit).
Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01JdQpdYYsTgtkJBxbcpAszi
The editor's technically-riskiest slice, built against mock data so #11
only adds interactions on top.
- lib/geometry.ts (+ vitest): world<->screen and object-local<->world
transforms, clampScale, zoomViewportAt (the wheel/pinch "keep the point
under the cursor stationary" math), zoomToFitRect. 11 geometry tests
(round-trips, rotation, cursor-anchored zoom, fit) + 6 units tests.
- editor/store.ts: Zustand store for ephemeral editor state — viewport,
selection, focusedObjectId (selection interactions grow in #11).
- editor/useViewport.ts: @use-gesture wiring — wheel + pinch zoom toward
the pointer, drag-pan, scale clamped to [0.05, 20] px/cm, and an animated
fitToRect (eased rAF tween). touch-action:none so the browser doesn't
fight gestures.
- editor/ObjectShape.tsx: rect/circle centered + rotated, kind default
colors, name label; non-scaling strokes so outlines stay 1px at any zoom.
- editor/GardenCanvas.tsx: full-size svg, single world <g>, fading 1m grid,
garden boundary, z-ordered objects; ResizeObserver-driven auto-fit, a
zoom readout, and a Fit control. Deps: zustand, @use-gesture/react,
vitest (+ test scripts).
- GardenEditorPage renders the canvas with a mock scene (#11 swaps in
/full).
Verified in a real browser: wheel zoom keeps the world point under the
cursor stationary (sub-cm drift on a 12m garden), a real drag pans, and
Fit animates to frame the garden. tsc + vitest green.
Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01JdQpdYYsTgtkJBxbcpAszi
steveandClaude Opus 4.8