React fix guide
Fix Keyboard traps on React
If focus cannot escape a component, keyboard users are stuck.
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: Keyboard traps →
At a glance
Instructional
Confusing tab order
DOM order matches layout
Tab order should follow a predictable path.
Pattern
Modal pattern
Focus should move into the dialog on open, cycle inside, and return to the trigger on close. If focus escapes to the page behind, users can get lost.
Move focus into modals on open and restore it on close.
Where this comes from on React
Hand-rolled modals, date pickers, and custom dropdowns without focus guards.
What this issue means
Fixes
On open, move focus to the dialog; on close, restore focus. Escape should close when appropriate.
How to fix on React
Prefer accessible dialog libraries or follow WAI-ARIA dialog pattern tests.
How to fix
On open, send focus to the first interactive control; on close, restore focus to the trigger.
Support Escape where users expect dismissal; document exceptions.
Common mistakes on React
- Missing `useEffect` focus on open.
- Multiple portals fighting for focus.
- 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.1.2 No Keyboard Trap.
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