Keyboard focus does not trap in any component

A focus trap in a modal or overlay that has no Escape key handler and prevents Tab from exiting leaves keyboard users permanently stuck — they cannot dismiss the overlay, access page content, or use browser navigation. WCAG 2.2 SC 2.1.2 (No Keyboard Trap) is a Level A requirement. Note: intentional focus trapping inside an open modal dialog is correct behavior (users should not Tab out of an open modal); the violation is when there is no way to close the dialog at all.

Ensure every modal and overlay can be dismissed with the Escape key, and that closing it returns focus to the trigger element.

export function Modal({ open, onClose, triggerRef }: ModalProps) {
  const modalRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!open) return
    // Focus first focusable element inside modal
    const first = modalRef.current?.querySelector<HTMLElement>(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    )
    first?.focus()

    const handleKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }
    document.addEventListener('keydown', handleKey)
    return () => document.removeEventListener('keydown', handleKey)
  }, [open, onClose])

  // Restore focus to trigger on close
  useEffect(() => {
    if (!open) triggerRef.current?.focus()
  }, [open])

  return open ? <div ref={modalRef} role="dialog" aria-modal="true">{/* content */}</div> : null
}