Tab moves behind the modal
← Back to incidents
React incident
Modal opens visually but fails screen-reader users
The modal looks fine on screen, but keyboard focus escapes behind it and screen readers do not announce it properly.
Intermediate15 min
Failure signals
The clues you start with
Screen reader does not announce the modal title
Focus does not return to the button that opened it
Overview
What failed in production?
Start by making the bug legible: what the user saw, why it mattered, and what the product was doing underneath.
Symptom
A billing confirmation modal opens, but keyboard users can tab into the page behind it and the screen reader says only 'group' instead of the dialog title.
User impact
Screen-reader and keyboard users lose track of where they are and may hesitate to confirm a destructive action.
Environment
Custom React portal modal built from divs and an overlay, not from a real dialog component.
Evidence pack
What you can inspect before answering
Note
Keyboard walkthrough
Tab leaves the visible modal and lands on navigation links behind the overlay.
Log
Screen reader check
The modal root has no dialog role and no accessible name.
Snippet
Current markup
<div className="overlay">
<div className="modal">
<h2>Delete card?</h2>
<button>Confirm</button>
</div>
</div>