steve/pansy
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Address Gadfly findings on #84
Build image / build-and-push (push) Successful in 10s
Details

Browse Source 
- 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
This commit is contained in:
steve
2026-07-21 23:33:38 -04:00
co-authored by Claude Opus 4.8
parent bfc5d9a871
commit 4b348dcbc0
2 changed files with 35 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/ui/Modal.tsx
+23 -10
View File
@@ -1,5 +1,12 @@
import { useEffect, useRef, type ReactNode } from 'react' 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 * 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 * click, unless `busy` (a mutation is in flight) — then it stays put so the
@@ -33,13 +40,8 @@ export function Modal({
const opener = document.activeElement as HTMLElement | null const opener = document.activeElement as HTMLElement | null
card?.focus() card?.focus()
// The dialog's own focusable controls, in DOM order, skipping disabled ones.
const focusable = () => const focusable = () =>
Array.from( Array.from(card?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR) ?? [])
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) { function onKey(e: KeyboardEvent) {
if (e.key === 'Escape' && !busyRef.current) { if (e.key === 'Escape' && !busyRef.current) {
@@ -47,9 +49,6 @@ export function Modal({
return return
} }
if (e.key !== 'Tab') 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() const items = focusable()
if (items.length === 0) { if (items.length === 0) {
e.preventDefault() e.preventDefault()
@@ -59,6 +58,15 @@ export function Modal({
const first = items[0] const first = items[0]
const last = items[items.length - 1] const last = items[items.length - 1]
const active = document.activeElement 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)) { if (e.shiftKey && (active === first || active === card)) {
e.preventDefault() e.preventDefault()
last.focus() last.focus()
@@ -70,7 +78,12 @@ export function Modal({
document.addEventListener('keydown', onKey) document.addEventListener('keydown', onKey)
return () => { return () => {
document.removeEventListener('keydown', onKey) document.removeEventListener('keydown', onKey)
opener?.focus?.() // 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()
} }
}, []) }, [])
web/src/editor/ObjectShape.tsx
+12 -6
View File
@@ -1,6 +1,6 @@
import { memo, type KeyboardEvent, type PointerEvent } from 'react' import { memo, type KeyboardEvent, type PointerEvent } from 'react'
import { objectTransform } from './shared' import { objectTransform } from './shared'
import { objectDisplayName } from './kinds' import { kindDef, objectDisplayName } from './kinds'
import type { EditorObject } from './types' import type { EditorObject } from './types'
const DEFAULT_FILL = '#8a8a8a' const DEFAULT_FILL = '#8a8a8a'
@@ -73,10 +73,13 @@ export const ObjectShape = memo(function ObjectShape({
const stroke = selected ? '#2f7a3e' : '#00000033' const stroke = selected ? '#2f7a3e' : '#00000033'
const strokeWidth = selected ? 2 : 1 const strokeWidth = selected ? 2 : 1
// A concise accessible name: the object's label plus its kind, e.g. // A concise accessible name: the object's label plus its kind's canonical
// "North Bed, raised bed". The dimensions aren't included — they need the // label, e.g. "North Bed, In-ground" — reusing kindDef so it never diverges
// garden's unit context this component doesn't hold — so they're a follow-up. // from what the UI shows (an ad-hoc kind.replace() gave "in ground"). The
const label = `${objectDisplayName(object)}, ${object.kind.replace(/_/g, ' ')}` // 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 focus needs to be VISIBLE — that's the point of making the canvas
// keyboard-reachable. The `object-shape` class carries a :focus-visible rule // keyboard-reachable. The `object-shape` class carries a :focus-visible rule
@@ -93,7 +96,10 @@ export const ObjectShape = memo(function ObjectShape({
role="button" role="button"
tabIndex={0} tabIndex={0}
aria-label={label} aria-label={label}
aria-pressed={selected} // 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' }} style={{ cursor: 'pointer' }}
> >
{object.shape === 'circle' ? ( {object.shape === 'circle' ? (