Use the native dialog element with showModal where you can, since it gives you the top layer, focus trapping and Escape handling for free. Otherwise you need role dialog with aria-modal, a labelled heading, focus moved into the dialog on open and returned to the trigger on close, a focus trap, Escape to dismiss, and the background made inert so screen readers and Tab do not wander into it.
Why interviewers ask this
Modals are the standard test of whether a candidate treats accessibility as real work or as a checklist item added later. The interviewer wants to hear about focus management specifically, because that is what most implementations get wrong, plus awareness that the platform now solves much of this. Mentioning portals, scroll locking and returning focus shows you have shipped one that survived an audit.
How to structure your answer
- Reach for the platform first: the dialog element and showModal.
- List the requirements: labelling, focus in and out, Escape, inert background.
- Mention portals and stacking or scroll issues.
- Say how you would verify it, keyboard only and with a screen reader.
Example answer
My first move is to not build it. The native dialog element with showModal handles the top layer so I stop fighting z-index and overflow hidden ancestors, and it gives me Escape and background inerting without any of my code. On top of that I still label it, so aria-labelledby pointing at the heading, and I move focus to a sensible first element on open, usually the heading or the first field rather than the close button. On close I put focus back on whatever opened it, because losing focus to the body is the thing that actually strands keyboard users. If I have to hand roll it for browser or design reasons, then it is role dialog with aria-modal true, a real focus trap on Tab and Shift Tab, Escape and backdrop click to dismiss, inert on the rest of the page, and scroll locking that does not shift the layout. I test it keyboard only first, then with a screen reader, because that combination catches almost everything an automated checker misses.
Walking into this interview soon? GhostPilot listens to your live call, spots the question the moment it is asked, and puts a structured answer on your screen in real time. Try it on your next mock, or grab a $29 Session Pass, no subscription, for the real thing.
See how it worksFollow-up questions to expect
- How do you handle two stacked dialogs?
- What goes wrong when a modal is not rendered in a portal?
- How would you announce an async error that appears inside the dialog?
Related react developer questions
Your interviewer will ask their own version of this. Paste your actual job description into the free Question Predictor and get the 20 questions that role is most likely to ask, with what each one is really probing.
Predict my questions