A dialog’s behavior includes focus placement, focus containment where modal, accessible naming and return focus. Rendering an overlay alone does not satisfy these requirements.
Before you start
You should know how a function component renders JSX, receives props and handles events. Follow the value through render, interaction and the next render. Small snippets below belong inside an existing React application unless they are explicitly shown as complete components.
The practical goal is to reason through this situation: Opening a dialog moves focus into meaningful content; closing returns it to the triggering button when available. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Name and place focus
Use an accessible title and move focus to an appropriate control when opening. The safest action may deserve initial focus.
Step 2: Enforce modal interaction
Keep background controls out of keyboard reach while modal. Support Escape according to the product’s dismissal policy.
Step 3: Restore the user’s position
On close, return focus to the trigger if it still exists. If deletion removed it, choose a meaningful nearby destination.
Worked scenario
Opening a dialog moves focus into meaningful content; closing returns it to the triggering button when available.
A delete confirmation opens from a row button. Cancel preserves the row and returns focus to that button. Confirm removes the row, so focus should move to a remaining row or list heading. A tested native dialog or established accessible primitive provides a stronger starting point than an overlay div alone.
Common mistake
A visually hidden background can still be keyboard reachable unless modality is implemented.
Verify the behavior
Use Tab, Shift+Tab and Escape without a mouse. Check the announced title, background isolation and focus destination after both cancel and successful deletion.
Interview exercise
Test a delete confirmation dialog.
Answer and reasoning
Use keyboard-only navigation, Escape and screen-reader naming checks; verify focus restoration and prevent accidental background actions.
Continue learning
Compare the scenario with the React interview questions and test your understanding with the React MCQs. For terminology and implementation details, consult the reference material.