إعادة التركيز عند إغلاق طبقة

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.

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.

The fix starts before opening: save a reference to the element that triggered the layer, usually document.activeElement.

When the layer closes, call focus() on that saved trigger so the user lands right back where they started.

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. 🔁

The browser's dialog element restores focus to the opener automatically when you call close(), saving you the manual bookkeeping.

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.

If the trigger was removed while the layer was open, send focus to a sensible nearby element instead, never to nowhere.

Sighted mouse users barely notice, but for keyboard and screen reader users a missed focus return can make a feature unusable.

Open the layer with Enter, close it with Escape, and confirm the focus ring reappears on the button that opened it.

Treat focus return as part of building any overlay, not an afterthought. Wire it the moment you add open and close logic.

A custom modal closes. What is the correct destination for focus?

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. 🎯