Implementation Plan: UX & accessibility hardening roadmap #10

New issue

Open

opened 2026-02-20 22:07:37 +00:00 by echo · 1 comment

echo commented

2026-02-20 22:07:37 +00:00

Owner

Goal

Ship a full UX + accessibility hardening pass for KinCode with small, reviewable PRs.

Scope issues

#3 QR grid overflows on narrow mobile screens
#4 Form validation is generic and not field-level accessible
#5 prefers-reduced-motion is not fully respected
#6 i18n is incomplete for static metadata and dynamic alt text
#7 Missing ARIA wiring for collapsible manual entry and decorative SVG icons
#8 Broad CSS transitions hurt motion control and performance
#9 Immutable cache policy applied to translation JSON assets

PR grouping (logical)

Closes: #3 #5 #7 #8

Changes:

Fix QR grid min width for mobile
Add explicit focus-visible styles for controls
Wire aria-controls/aria-expanded for manual details toggle
Mark decorative SVGs as aria-hidden="true"
Implement reduced-motion CSS + disable smooth scroll when reduced motion is requested
Replace broad transition: all with targeted transitions

PR B — Form validation UX/accessibility

Closes: #4

Changes:

Inline per-field validation messages
aria-invalid, aria-describedby, focus first invalid input
Localized error messages + preserve toast for non-field failures

PR C — i18n completeness + caching policy

Closes: #6 #9

Changes:

Localize title/meta/OG + skip link + dynamic QR alt text
Update translation files (fr/en/es) with new keys
Nginx cache split: immutable for css/js, non-immutable for json translations

Execution order

PR A
PR B
PR C

Verification checklist

npm test passes
No horizontal scroll at 320px viewport
Keyboard navigation + focus rings are visible
Reduced-motion behavior verified
Language switch updates static metadata + dynamic labels
Translation updates are served predictably

## Goal Ship a full UX + accessibility hardening pass for KinCode with small, reviewable PRs. ## Scope issues - #3 QR grid overflows on narrow mobile screens - #4 Form validation is generic and not field-level accessible - #5 prefers-reduced-motion is not fully respected - #6 i18n is incomplete for static metadata and dynamic alt text - #7 Missing ARIA wiring for collapsible manual entry and decorative SVG icons - #8 Broad CSS transitions hurt motion control and performance - #9 Immutable cache policy applied to translation JSON assets ## PR grouping (logical) ### PR A — Responsive + motion + interaction a11y Closes: #3 #5 #7 #8 Changes: - Fix QR grid min width for mobile - Add explicit focus-visible styles for controls - Wire `aria-controls`/`aria-expanded` for manual details toggle - Mark decorative SVGs as `aria-hidden="true"` - Implement reduced-motion CSS + disable smooth scroll when reduced motion is requested - Replace broad `transition: all` with targeted transitions ### PR B — Form validation UX/accessibility Closes: #4 Changes: - Inline per-field validation messages - `aria-invalid`, `aria-describedby`, focus first invalid input - Localized error messages + preserve toast for non-field failures ### PR C — i18n completeness + caching policy Closes: #6 #9 Changes: - Localize title/meta/OG + skip link + dynamic QR alt text - Update translation files (fr/en/es) with new keys - Nginx cache split: immutable for css/js, non-immutable for json translations ## Execution order 1. PR A 2. PR B 3. PR C ## Verification checklist - [ ] `npm test` passes - [ ] No horizontal scroll at 320px viewport - [ ] Keyboard navigation + focus rings are visible - [ ] Reduced-motion behavior verified - [ ] Language switch updates static metadata + dynamic labels - [ ] Translation updates are served predictably