الإغلاق بمفتاح Escape واستعادة التركيز

A modal that you cannot leave is a trap. Users expect a fast, reliable way to close it without hunting for a tiny button.

The Escape key is the agreed shortcut to dismiss a dialog. Keyboard and screen reader users reach for it first, so always support it.

A native dialog opened with showModal() closes on Escape automatically, firing a cancel event you can listen to if needed.

For a custom modal, listen for the keydown event and close when the key is Escape. It is a few lines, but never skip it.

Before you open the modal, save the element that had focus. document.activeElement is the trigger you will return to later.

When the modal closes, send focus back to that saved trigger. This restore focus step is what makes closing feel seamless.

Without restore, focus jumps to the top of the page. The user loses their place and must tab all the way back. Frustrating and avoidable. 😕

Escape is not enough on its own. Offer a clearly labeled close button so mouse and touch users have an obvious exit as well.

Many modals also close when you click the dimmed backdrop. It is a nice extra, but it must never replace Escape or the button.

For dialogs that confirm something risky, you may suppress quick dismissal so a stray Escape does not skip an important choice.

Open with the keyboard, press Escape, and confirm focus lands back on the exact trigger you started from. That round trip is the goal. ✅

A user opens a modal from a button and presses Escape. Where should focus land?

You learned to support Escape, offer a visible close button, and restore focus to the opener so closing never strands the user. 🎯