0Pricing
React Academy · Lesson

Portals, Focus Trap, Escape-to-Close

Render modals via portals, trap focus for keyboard users, and close on Escape/backdrop for a solid a11y baseline.

Portals, Focus Trap, Escape-to-Close is a free React Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why portals & traps?

Goal: Build modals that work for everyone.

  • Portal to body
  • Focus trap keeps tab inside
  • Escape/backdrop to close

A11y essentials

  • Use role="dialog" + aria-modal="true"
  • Focus first interactive element on open
  • Restore focus to the trigger on close

Demo: portal modal (open/close)

Render the dialog via a portal so it sits above everything else.

<div id="root"></div>

Demo: focus trap essentials

Auto-focus the first button and trap Tab inside the dialog.

<div id="root"></div>

Demo: close patterns + restore focus

Close with Escape or backdrop and restore focus to the trigger button.

<div id="root"></div>

Tips & checklist

  • Add role="dialog" and aria-modal="true"
  • Focus first control on open; restore to trigger on close
  • Handle Escape and backdrop click

Modal a11y check

Which two practices most improve an accessible modal dialog?

Recap

Recap: Render modals via a portal, keep focus inside, and let users dismiss with Escape/backdrop while restoring focus to the opener.

Frequently asked questions

Is the “Portals, Focus Trap, Escape-to-Close” lesson free?

Yes — the full text of “Portals, Focus Trap, Escape-to-Close” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Portals, Focus Trap, Escape-to-Close”?

Render modals via portals, trap focus for keyboard users, and close on Escape/backdrop for a solid a11y baseline. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Portals, Focus Trap, Escape-to-Close” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Portals, Focus Trap, Escape-to-Close
  2. Global Overlay Manager (Context + Reducer)
  3. Announcements for Accessibility (aria-live)
← Back to React Academy