From 00c324aa1ed62064f5aa6feb0dc992a75b604314 Mon Sep 17 00:00:00 2001 From: Molecule AI Core-UIUX Date: Sun, 10 May 2026 19:10:58 +0000 Subject: [PATCH] docs(canvas): fix focus ring color in design docs; update canvas-audit-items - canvas-design-system-v1.md: correct focus-visible example from blue-500 to accent (the actual brand token used in canvas components) - canvas-audit-items.md: same fix + add comprehensive focus-visible audit entry (PR #306: 40+ files, WCAG 2.4.7) Co-Authored-By: Claude Opus 4.7 --- docs/design-system/canvas-audit-items.md | 6 ++++-- docs/design-system/canvas-design-system-v1.md | 6 +++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/design-system/canvas-audit-items.md b/docs/design-system/canvas-audit-items.md index 5533c2ea..ec8ae6f8 100644 --- a/docs/design-system/canvas-audit-items.md +++ b/docs/design-system/canvas-audit-items.md @@ -2,7 +2,7 @@ > **Status:** VERIFIED — Cross-referenced against molecule-core/canvas/src/ (2026-05-09) > **Author:** Core-FE (draft), Core-UIUX (verification) -> **Updated:** 2026-05-10 with architecture structure + known issues + new test coverage (PR #205) +> **Updated:** 2026-05-10 evening with comprehensive focus-visible audit (PR #306) ## Canvas Stack (Verified) @@ -94,7 +94,7 @@ PR: `fix/ink-soft-wcag-contrast`. - Skip link → `#canvas-main` ✅ - `aria-label` on ReactFlow container ✅ - Focus trap in modals via Radix ✅ -- Focus ring: `focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950` +- Focus ring: `focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1` (brand color; WCAG 2.4.7 — visible for keyboard only, not mouse/touch) ### Accessibility Tree ✅ - Canvas is in accessibility tree (React Flow DOM nodes) @@ -125,8 +125,10 @@ PR: `fix/ink-soft-wcag-contrast`. | MEDIUM | Keyboard-accessible node drag | WorkspaceNode.tsx, useDragHandlers.ts | ✅ Done (PR #182) | | LOW | Keyboard-accessible edge anchors | A2AEdge.tsx, WorkspaceNode.tsx | ✅ Done (PR #190) | | LOW | Keyboard-accessible node resize | useKeyboardShortcuts.ts, WorkspaceNode.tsx | ✅ Done (PR #192) | +| HIGH | Comprehensive focus-visible audit (WCAG 2.4.7) | 40+ TSX/CSS files | ✅ Done (PR #306) | --- *Verified 2026-05-09 by Core-UIUX against molecule-core/canvas/src/* *Updated 2026-05-10: keyboard shortcut dialog (PR #175) + keyboard node drag (PR #182) + keyboard edge anchors (PR #190) + keyboard node resize (PR #192) + screen reader announcements (PR #172) + text-ink-soft WCAG AA fix + Next.js 15.5.15 + component test coverage (PR #205: Tooltip, Legend, TermsGate, ApprovalBanner)* +*Updated 2026-05-10 evening: comprehensive focus-visible audit — 40+ files upgraded from weak `/60`/`/40` opacity rings to full `focus-visible:ring-accent`; React Flow Controls + Minimap CSS rules added; docs corrected to `accent` (was `blue-500`); roving tabindex on SearchDialog listbox (PR #306)* diff --git a/docs/design-system/canvas-design-system-v1.md b/docs/design-system/canvas-design-system-v1.md index d8fbe7e9..f31625c3 100644 --- a/docs/design-system/canvas-design-system-v1.md +++ b/docs/design-system/canvas-design-system-v1.md @@ -1,6 +1,6 @@ # Canvas Design System v1 — VERIFIED -> **Status:** VERIFIED — Cross-referenced against molecule-core/canvas/src/ (2026-05-09) +> **Status:** VERIFIED — Cross-referenced against molecule-core/canvas/src/ (2026-05-09, updated 2026-05-10 evening) > **Authors:** Core-FE (draft), Core-UIUX (verification + updates) > **Source files verified:** > - `canvas/src/app/globals.css` @@ -302,8 +302,8 @@ type ResolvedTheme = "light" | "dark"; ## 5. Accessibility Rules (WCAG 2.1 AA) — VERIFIED ### 5.1 Focus Management ✅ VERIFIED -- All interactive elements have `focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950` -- No `outline-none` without equivalent focus ring +- All interactive elements have `focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1` (WCAG 2.4.7 — ring only appears for keyboard users, not mouse/touch) +- `focus-visible:outline-none` used only when paired with an explicit `focus-visible:ring-*` replacement - Radix Dialog traps focus automatically ### 5.2 Semantic HTML ✅ VERIFIED