Handling Focus & Keyboard Traps in Modals
Keep focus inside open modals for accessibility using useRef and event listeners.
Welcome
In this lesson you will implement a focus trap inside a modal so that keyboard users cannot Tab their way out of an open modal — a key accessibility requirement (WCAG 2.4.3).
Why Focus Traps Are Required
When a modal opens, keyboard users should be able to interact only with the modal's content. Without a focus trap, pressing Tab moves focus to elements behind the modal overlay — those elements are visually hidden but still reachable.
All lessons in this course
- What Are React Portals?
- Building a Modal Component with Portals
- Handling Focus & Keyboard Traps in Modals
- Tooltips & Dropdown Menus with Portals