Make modal dialogs keyboard accessible

Without proper focus trapping and keyboard handling, modal dialogs are invisible traps for keyboard users—they can't navigate, can't escape, and can't complete tasks.

Quick Reference

• Use role='dialog' and aria-modal='true' on the modal container
• Trap focus inside the modal—Tab should cycle within modal only
• Close on Escape key press and return focus to trigger element
• Add aria-labelledby pointing to the modal title

Check

Verify modals have proper ARIA roles, focus trapping, keyboard dismissal (Escape), and return focus on close.

Fix

Implement accessible modals using role='dialog', aria-modal='true', focus trapping, and proper keyboard handling.