Return Focus

title: "Return Focus — Sending Focus Back When a Modal Closes" description: "Learn how to return focus to the triggering element when a modal dialog closes, maintaining context for keyboard and screen reader users." weight: 7 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, modals]

When a modal closes, focus must return to the element that triggered the dialog, maintaining the user's place in the page flow.

## What You'll Learn

How to save and restore focus when modals open and close, and why this matters for user experience.

## Why It Matters

After closing a modal, users expect to continue where they left off. If focus is lost or lands on the wrong element, users must search for their previous position.

## Real-World Use

A user clicks "Edit profile" to open a modal. After saving and closing, focus returns to the "Edit profile" button. The user can immediately click it again or tab to the next element.

## Return Focus Implementation

```javascript
let previousFocus = null;

function openModal(dialogElement) {
  previousFocus = document.activeElement;
  dialogElement.style.display = 'block';
  setInitialFocus(dialogElement);
  trapFocus(dialogElement);
}

function closeModal(dialogElement) {
  dialogElement.style.display = 'none';
  removeTrap(dialogElement);
  if (previousFocus && previousFocus.focus) {
    previousFocus.focus();
  }
  previousFocus = null;
}

With Multiple Trigger Elements

<button class="edit-btn" data-modal="edit-modal">Edit Item 1</button>
<button class="edit-btn" data-modal="edit-modal">Edit Item 2</button>

<div id="edit-modal" role="dialog" aria-labelledby="edit-title">
  <h2 id="edit-title">Edit item</h2>
  <!-- form content -->
  <button onclick="closeModal(this.closest('[role=dialog]'))">Save</button>
</div>

Common Mistakes

1. Not saving the trigger element reference

Store the trigger element in a variable before opening the modal.

2. Focus returns but element is gone

If the trigger element is removed or replaced while the modal is open, store a fallback focus target.

3. Scroll position not restored

Focus return should also restore scroll position so the trigger element is visible.

4. Return focus on cancel only

Return focus should happen on all close methods: Confirm, Cancel, Escape, and backdrop click.

5. Multiple modals layered

If modals stack, each modal must store its own previous focus reference.

Practice Questions

1. Where should focus return when a modal closes? To the element that triggered the modal opening.

2. How do you save the trigger element reference? Store document.activeElement in a variable before the modal opens.

3. What if the trigger element is removed while the modal is open? Store a backup focus target, such as the trigger's parent container.

Challenge: Create a modal system where the trigger element is a list of "Edit" buttons. Each button opens a modal, and closing returns focus to the correct "Edit" button.

FAQ

Mini Project

Create a modal system with a list of items, each with an "Edit" button. Opening a modal saves focus, and closing returns to the correct button. Test with keyboard and screen reader.

What's Next

Learn how to handle Closing Modal with Escape key and click-outside patterns.