FocusScope

The problem

A dialog opens and Tab walks into the page behind it. Close the dialog and focus is lost (jumps to <body>). Modal keyboard users are stranded. aria-modal on a div does not trap Tab by itself.

The pattern that fixes it

FocusScope: on mount, remember document.activeElement and move focus in. On Tab at the edges, wrap. On unmount, restore. Aria FocusScope and Radix Dialog.Content both do this. Escape to dismiss is a sibling layer (DismissableLayer).

Keep learning

• Previous: Behavior hooks
• Next: createSafeContext
• Related: asChild / Slot
• Related: Roving tabindex
• Related: Behavior hooks
• Related: createSafeContext
• Related: useDisclosure

More courses

• Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
• Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
• Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
• System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
• Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
• Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
• Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
• CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
• Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
• Docker — What an image is, why layers cache, and how containers find each other on a network.
• Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.