Focus Trapping in Modals & Dialogs

When a modal dialog or drawer opens, it demands the user's immediate attention. If focus is not managed properly, two severe accessibility bugs occur:

1. Leaking Focus: Pressing Tab cycles behind the modal into the obscured background page, confusing screen reader and keyboard users.
2. Lost Focus on Close: When the modal closes, focus resets to the top <body> tag rather than returning to the button that triggered the modal.

A governed modal component must implement a Focus Trap:

• When opened, focus shifts automatically to the modal's primary heading or first interactive control.
• Pressing Tab on the last interactive element wraps focus back to the first element in the modal.
• Pressing Escape closes the modal immediately and restores focus to the triggering element.