Skip to main content

Next.js fix guide

Fix Keyboard traps on Next.js

If focus cannot escape a component, keyboard users are stuck.

Check your live page

Canonical issue page: Keyboard traps

What this issue means

Fixes

On open, move focus to the dialog; on close, restore focus. Escape should close when appropriate.

How to fix on Next.js

In Next.js, verify both server and client components: hydration can change roles/names. Use `next/image` with meaningful `alt`, and ensure dynamic imports do not drop focus management.

How to fix

On open, send focus to the first interactive control; on close, restore focus to the trigger.

Support Escape where users expect dismissal; document exceptions.

Related: 2.1.2 No Keyboard Trap.

Other platforms

TestAccessibility · Programmatic fix page · localhost:3001