Portals, Focus Trap, Escape-to-Close
Render modals via portals, trap focus for keyboard users, and close on Escape/backdrop for a solid a11y baseline.
Why portals & traps?
Goal: Build modals that work for everyone.
- Portal to body
- Focus trap keeps tab inside
- Escape/backdrop to close
A11y essentials
- Use role="dialog" + aria-modal="true"
- Focus first interactive element on open
- Restore focus to the trigger on close
All lessons in this course
- Portals, Focus Trap, Escape-to-Close
- Global Overlay Manager (Context + Reducer)
- Announcements for Accessibility (aria-live)