Modal Dialogues: The Sacred Focus Trap

When a modal or dialogue opens, sighted users see a dark dimmed backdrop obscuring the background. But for a keyboard user, unless you trap focus, pressing Tab will navigate behind the modal into hidden background links and buttons!

The Three Mandatory Modal Focus Rules:

1. Initial Focus Transfer: When the modal opens, immediately move keyboard focus into the first focusable element inside the modal (or the modal container itself).
2. The Focus Trap: When focus reaches the last interactive element inside the modal, pressing Tab wraps focus back to the first element. Focus must never leak into the background page.
3. Return Focus on Close: When the user closes the modal (via Escape or Close button), immediately restore focus to the trigger button that originally opened it.