molecule-ai/molecule-core
39
0
Fork 2
Code Issues 38 Pull Requests 17 Actions 107 Packages Projects Releases Wiki Activity

docs(canvas): fix focus ring color in design docs; update canvas-audit-items

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux 2026-05-10 19:10:58 +00:00 committed by Molecule AI Core-FE
parent fab80b5b38
commit 00c324aa1e
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/design-system/canvas-audit-items.md
View File

@ -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)*

6
docs/design-system/canvas-design-system-v1.md
View File

@ -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