React fix guide
Fix Missing focus indicator on React
Do not remove outlines without replacing them.
This page ties the generic issue to how it usually shows up in React markup and tooling, then walks you through a fix and verification loop.
Verify on a live URL
Scan, fix, deploy, then rescan the same address to compare reports.
Main issue guide: Missing focus indicator →
At a glance
Instructional
No visible focus style
Focus visible
If you remove the default outline, replace it with a custom ring that meets contrast.
Where this comes from on React
Component trees and shared UI primitives—trace which component renders the failing DOM node.
What this issue means
Fixes
Use `:focus-visible` styles with sufficient contrast. Avoid `outline: none` unless you supply a custom ring.
How to fix on React
Check focus styles in both light and dark themes.
How to fix
Use :focus-visible with a high-contrast ring or offset box.
Never remove outlines unless you replace them with an equally clear indicator.
Common mistakes on React
- Fixing Storybook but not production props.
- Conditional roles that differ between tests and prod.
How to verify the fix
- Run `npm run build && npm start` and test the production bundle.
- Tab through the component; check the accessibility tree in devtools.
- Rerun the scan on the deployed or staging URL.
Related: 2.4.7 Focus Visible.
Same issue on other platforms
Related issues
Guides
Next steps
- Run a scan on staging or production.
- Re-read the main issue page for context and WCAG notes.
- React and Next.js accessibility hub for more platform resources.
TestAccessibility · React fix · localhost:3001