Сохраняйте фокус на закрытие модальной или всплывающей

Question

У меня есть вопрос о доступности. Есть несколько слоев / модальных окон или всплывающих окон, которые открываются при нажатии кнопки или ссылки.

Мне нужно будет сохранить фокус на исходном элементе, по которому щелкнули, чтобы открыть модальное окно, всплывающее окно или всплывающую подсказку после их закрытия, фокус должен быть возвращен к элементу, по которому щелкнули.

В настоящее время, когда я вкладываю вкладку на страницу после закрытия модальных окон или выпадающих меню, фокус начинается с самого начала.

Я использую модальные угловые загрузочные и настраиваемые всплывающие окна, открытые через конфигурацию провайдера угловых состояний.

Answer 1

Официальная рекомендация WAI-ARIA Authoring Practices - Modal Dialog гласит:

Когда диалог закрывается, фокус возвращается к элементу, который вызвал диалог, если только:

• Вызывающий элемент больше не существует. Затем фокус устанавливается на другой элемент, который обеспечивает логический рабочий процесс.
• Схема рабочего процесса включает в себя следующие условия, которые могут иногда сделать фокусировку на другом элементе более логичным выбором:
  1. Очень маловероятно, что пользователи должны немедленно повторно вызвать диалог.
  2. Задача, выполненная в диалоговом окне, напрямую связана с последующим этапом рабочего процесса.

Чтобы вернуть фокус элементу, который был сфокусирован до открытия вашего модального окна:

1. Перед тем как открыть модальное, сохраните ссылку на document.activeElement,
2. После закрытия модального focus ссылка на предыдущий activeElement,

Пример:

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

Answer 2

Чтобы вернуть фокус элементу, который был сфокусирован до открытия вашего модального окна:

Перед тем как открыть модальное, сохраните ссылку на document.activeElement. После закрытия модального фокуса ссылка на предыдущий activeElement.

Answer 3

Решил вышеуказанную проблему, сохранив текущий фокус перед открытием модального и восстановив фокус, когда модальный был закрыт