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

fix(canvas): add focus-visible rings for React Flow Controls + Minimap

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux 2026-05-10 18:54:10 +00:00 committed by Molecule AI Core-FE
parent 728f60b451
commit 70a662bf6b
1 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
canvas/src/app/globals.css
View File

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