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.

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.

• javascript
• angularjs
• angular-ui-bootstrap
• accessibility
• uiaccessibility

Share Improve this question Follow asked Apr 25, 2017 at 17:50 ShashiShashi 1,17222 gold badges1818 silver badges3232 bronze badges 1

• 2 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. – georgeawg Commented Apr 25, 2017 at 18:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

The official remendation 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:
  1. It is very unlikely users need to immediately re-invoke the dialog.
  2. The task pleted 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:

1. Before opening the modal, save a reference to document.activeElement.
2. 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();
}

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

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.