Modal dialog focus demo (BEFORE/AFTER)

Modals often break keyboard navigation when focus can escape into the background, or when closing doesn’t return focus. This micro-demo compares a focus-leaky modal (BEFORE) with a focus-trapped modal that supports Escape and focus restore (AFTER). No tracking.

Before

The modal opens, but keyboard focus can escape to background controls. Escape doesn’t close.

Camp Inventory
Try Tab after opening the modal
Focus can escape
Background link

Tip: open the modal, then press Tab a few times. You can reach background controls even though a modal is on screen.

These should ideally be unreachable while the modal is open.

After

The modal traps keyboard focus, supports Escape, and returns focus to the opener on close.

Camp Inventory
Try Tab and Esc after opening
Focus trapped
Background link

Tip: after opening, Tab stays inside the modal. Esc closes and returns focus to “Open inventory modal”.

In a real app you’d also “inert” the background. Here we use aria-hidden while the modal is open.

Tip: press Space to toggle emphasis.

Copy the URL and share it.