Modal Dialog Pattern

Critical Requirements

1. Focus Trap: Tab focus must cycle only within the modal while it is open.
2. Inert Background: Content outside the modal must be hidden from screen readers (aria-hidden="true") and unreachable by keyboard.
3. Escape Key: Pressing Esc must close the modal.
4. Focus Restoration: Closing the modal must return focus to the trigger button.

The Native <dialog>

The modern and robust way to solve this.

const dialog = document.querySelector('dialog');
dialog.showModal(); // Activates focus trap and backdrop automatically
dialog.close(); // Returns focus

<dialog aria-labelledby="dialog-title">
  <h2 id="dialog-title">Terms of Service</h2>
  <p>...</p>
  <button onclick="this.closest('dialog').close()">Close</button>
</dialog>