Preserve focus on closing a modal or flyout

Question

I have a question on accessibility. There are several layers/modals or flyout windows which are opened on click of a button or link.

I will need to preserve the focus on the original element which was clicked to open a modal or popup or flyout once they are closed the focus should be back to the clicked element.

Currently when I tab on the page after closing the modal windows or flyouts, focus starts from begining

i am using angular bootstrap modal and custom flyout windows opened via angular state provider configuration.

Save the event target from the event that opened the modal/flyout and set focus on that target when the modal/flyout closes. See [MDN HTMLelement Reference - focus method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus). — georgeawg, Apr 25 '17 at 18:40

score 4 · Answer 1 · answered Sep 05 '17 at 06:58

The official recommendation from WAI-ARIA Authoring Practices - Modal Dialog states:

When a dialog closes, focus returns to the element that invoked the dialog unless either:

The invoking element no longer exists. Then, focus is set on another element that provides logical work flow.

The work flow design includes the following conditions that can occasionally make focusing a different element a more logical choice:

It is very unlikely users need to immediately re-invoke the dialog.

The task completed in the dialog is directly related to a subsequent step in the work flow.

To return focus to the element that was focused before your modal opened:

Before opening the modal, save a reference to document.activeElement.
After closing the modal, focus the reference to the previous activeElement.

Example:

let previousActiveElement = document.activeElement;
// Open and close the modal
if (document.body.contains(previousActiveElement)) {
    previousActiveElement.focus();
}

Shashi · Answer 2 · 2017-08-21T14:35:08.810

0

Solved the above issue by preserving the current focus before opening the modal and restore the focus back when modal is closed

edited Aug 21 '17 at 14:35

answered Aug 21 '17 at 14:29

Shashi

1,112
2
17
32

score 0 · Answer 3 · answered Sep 22 '17 at 14:51

0

To return focus to the element that was focused before your modal opened:

Before opening the modal, save a reference to document.activeElement. After closing the modal, focus the reference to the previous activeElement.

answered Sep 22 '17 at 14:51

Shashi

1,112
2
17
32

Preserve focus on closing a modal or flyout

3 Answers3