Trap keyboard focus inside a modal so Tab can't escape it

Tab a few times inside my confirmation modal, and I'm suddenly clicking a button on the page behind it.

IntermediateRead 5 minDoing: 45 minutes to an hour to build and test the trap once, a few minutes to reuse the helper in the next modal7 steps

▶ Start

What you'll have at the end

A modal where Tab and Shift+Tab cycle only through its own buttons, and Escape returns focus to the trigger

Before you start

You need

A confirmation modal already rendered through a portal, shown when a piece of state names the project being confirmed, containing a Cancel button and a destructive confirm button, opened by a Delete button in whichever row triggers it.

Not covered

This does not cover styling the overlay, animating the open and close transition, or the native dialog element's own built-in trap, which needs almost none of this, see the variant at the end.

Leans on

7 steps

Where to go next

Restore the focus outline your reset deleted

if Cancel and Delete show no focus ring the moment a project-wide CSS reset strips the browser's own outline.

What does your app sound like to a screen reader user?

for a first screen-reader pass across the whole app, beyond this one modal.

Checked 24 Aug 2026

Part of the Web Accessibility cookbook