Six items from the WCAG 2.1 AA audit's "polish" tier: #4 — `ariaLabel` prop on IngredientTypeahead, default 'Suggestions'. Generic was misleading for SR users hearing it on every typeahead in the page. Updated callers to pass field-specific labels: - IngredientForm: "Ingredient name suggestions" / "Category suggestions" - RecipeForm: "Tag suggestions" / "Cookware suggestions" - RecipesIndexPage: "Recipe title suggestions" - IngredientsPage (app + web): "Pantry filter suggestions" - IngredientEditor: "Ingredient name suggestions" / "Unit suggestions" #5 — Polite live region announces match count. New `<div role="status" aria-live="polite" aria-atomic="true" className="sr-only">` inside the typeahead's wrapper, updated to `"N suggestion(s) available"` whenever the listbox is open. Wired into the input's `aria-describedby` so the announcement ALSO attributes to the field on first focus. #6 — `listOnly` prop on IngredientTypeahead. When true and `mode='single'`, sets `aria-invalid` on the input while the value is non-empty and not an exact match in `suggestions`/`groups`. Opted in on the IngredientForm Category field (the one fixed-list single-mode caller). Parents enforce on submit. #7 — Active option also bumps `fontWeight: 500`. Bg + fg color change plus weight gives a multi-channel cue (WCAG 1.4.1 belt-and-suspenders). #8 — `onPointerDown` replaces `onMouseDown` on the listbox. Stylus / hybrid devices fire pointer events more reliably than mouse events. #9 — Drop the listbox upward when there's not enough room below within the visualViewport (soft keyboard up on mobile, or input near page bottom). New `dropUp` state, useEffect on `open` + viewport resize, spreads `listboxDropUpStyle` on the listbox `style` when applicable. Falls back to the default `top: auto, marginTop: 4` when there's room. #5 also touches every consumer that passes `aria-describedby` — the chain now becomes `${ariaDescribedBy} ${liveRegionId}` so SR users hear both the existing hint and the suggestion count. For the cookware caller specifically, opted out of segmented-mode's default `autoCapitalize='off'` with an explicit `autoCapitalize='words'` since cookware names ("Instant Pot", "Cast Iron Skillet") benefit from title case. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

OpenClaw/IronClaw integration writeup #4

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions