From 6e68bcb7b71d994460a5d8ffb06b4765a4d31048 Mon Sep 17 00:00:00 2001 From: Molecule AI Core-UIUX Date: Sun, 10 May 2026 18:54:10 +0000 Subject: [PATCH] fix(canvas): add focus-visible rings for React Flow Controls + Minimap The React Flow toolbar (zoom in/out/fit) and Minimap are third-party components that render their own buttons. Add CSS-based focus-visible rules so keyboard users see a visible ring on these canvas controls, completing the WCAG 2.4.7 coverage for all interactive elements. Co-Authored-By: Claude Opus 4.7 --- canvas/src/app/globals.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/canvas/src/app/globals.css b/canvas/src/app/globals.css index 71013ed1..7f93dc53 100644 --- a/canvas/src/app/globals.css +++ b/canvas/src/app/globals.css @@ -274,4 +274,17 @@ body { .react-flow__node { animation: none !important; } + + /* React Flow Controls toolbar buttons — WCAG 2.4.7 focus-visible */ + .react-flow__controls button:focus-visible { + outline: 2px solid var(--accent, #3b5bdb); + outline-offset: 2px; + } + + /* React Flow Minimap nodes — WCAG 2.4.7 focus-visible */ + .react-flow__minimap:focus-visible, + .react-flow__minimap svg:focus-visible { + outline: 2px solid var(--accent, #3b5bdb); + outline-offset: 2px; + } }