Demo 03: Modal Focus Trap

Focus stays trapped inside modal, Escape closes it

Focus management in overlays

When a modal opens, keyboard focus must stay trapped inside. Users shouldn't be able to Tab to elements behind the modal. When closed, focus should return to the trigger button.

Tab Cycle inside modal Escape Close modal

Try the Modal

Click the button below to open a modal dialog with proper focus management.

</> For developers

<!-- Native dialog = automatic focus trap -->
<dialog id="modal">
  <h2>Modal Title</h2>
  <button onclick="modal.close()">Close</button>
</dialog>

<button onclick="modal.showModal()">
  Open
</button>

Use native <dialog> with showModal() for automatic focus trap, Escape handling, and backdrop. No JS focus management needed!

What makes a good modal:

✅ Focus moves to modal when opened
✅ Tab cycles through modal elements only
✅ Escape key closes the modal
✅ Focus returns to trigger on close
✅ Background content is not reachable