Returning Focus When a Layer Closes
Restore the user to where they left off.
Returning Focus When a Layer Closes is a free Web Accessibility Academy lesson on CoddyKit — lesson 3 of 4. 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 Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Layers Borrow Focus
When a modal, menu, or drawer opens, focus moves inside it. When it closes, you are responsible for returning focus to where the user was.
The Lost-Focus Problem
If a closed layer leaves focus on a removed element, it falls back to the page body. The user is stranded with no sense of place.
Remember the Trigger
The fix starts before opening: save a reference to the element that triggered the layer, usually document.activeElement.
const trigger = document.activeElement;Restore on Close
When the layer closes, call focus() on that saved trigger so the user lands right back where they started.
trigger.focus();The Full Round Trip
Open: store the trigger and focus the layer. Close: hide it and restore the trigger. That loop is the focus contract of any dismissible layer. 🔁
Native dialog Helps
The browser's dialog element restores focus to the opener automatically when you call close(), saving you the manual bookkeeping.
myDialog.close();Handle Every Exit Path
Restore focus no matter how the layer closes: a Close button, the Escape key, or a click on the backdrop should all return the user.
When the Trigger Is Gone
If the trigger was removed while the layer was open, send focus to a sensible nearby element instead, never to nowhere.
Why This Matters So Much
Sighted mouse users barely notice, but for keyboard and screen reader users a missed focus return can make a feature unusable.
Test It Keyboard-Only
Open the layer with Enter, close it with Escape, and confirm the focus ring reappears on the button that opened it.
Make It a Habit
Treat focus return as part of building any overlay, not an afterthought. Wire it the moment you add open and close logic.
Quick Check
A custom modal closes. What is the correct destination for focus?
Recap
You can now close the loop: save the trigger on open, restore focus to it on every close path, and lean on native dialog when you can. 🎯
Frequently asked questions
Is the “Returning Focus When a Layer Closes” lesson free?
Yes — the full text of “Returning Focus When a Layer Closes” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Returning Focus When a Layer Closes”?
Restore the user to where they left off. You practise Web Accessibility 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 Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Returning Focus When a Layer Closes” 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 Web Accessibility Academy lesson?
Yes. Every Web Accessibility 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
- tabindex 0, -1, and Never Positive
- Moving Focus After an Action
- Returning Focus When a Layer Closes
- Managing roving tabindex in Widgets