How to fix: keyboard trap in modal or widget

What it looks like in the wild

Tab inside a modal cycles forever; no way to escape with the keyboard.

The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.

Why it fails WCAG

Keyboard users must always be able to leave a focus area.

The wrong pattern (avoid)

// custom modal with no Esc handler

The right pattern (copy this)

import { FocusTrap } from 'focus-trap-react';

<FocusTrap>
  <div role="dialog" aria-modal="true">
    <button aria-label="Close" onClick={close}>×</button>
    <button onClick={close}>Cancel</button>
    <button onClick={save}>Save</button>
  </div>
</FocusTrap>

Notes from real audits

• Esc must close. Focus must restore to the trigger when closed.

Related fixes