wtf( )unctionsystem design, drawn
← all problemsAccessibilityMedium

Where focus lands when the dialog opens

A native modal dialog opens. Focus has to go somewhere, and the browser resolves it through a fixed sequence — the first rule that applies wins.

The common assumption is "the first focusable element inside", which is close enough to be wrong in the case that matters.

Put the rules in the order the browser applies them.
?Getting this wrong means focus lands somewhere a keyboard user has to hunt for.

Outside every boundary: What opened it (gets focus back), The modal dialog (rest of the page inert), Focus lands inside (and is kept there) Connections: What opened it calls The modal dialog — showModal() The modal dialog calls Focus lands inside

What opened itgets focus back
The modal dialogrest of the page inert
Focus lands insideand is kept there
Applied first
Your order
    Nothing yet. Tap them on the left, best first.
Order them by applied first. Tap to place, tap again to take back.