Управление фокусом

Одной из ключевых особенностей библиотек модальных окон является корректное управление фокусом, чтобы обеспечить доступность и удобство использования. Micromodal, несмотря на свою легковесность, предоставляет все необходимые механизмы для этого.

Проблема фокуса в модальных окнах

Когда открывается модальное окно, необходимо следить за фокусом. Он должен быть перемещён в модальное окно, чтобы пользователи могли взаимодействовать с элементами внутри. Также важно, чтобы фокус возвращался в прежнее место после закрытия модального окна. Невозможность правильного управления фокусом может привести к проблемам для пользователей, например, для людей с ограниченными возможностями.

Micromodal предоставляет механизм для контроля над фокусом, который можно настроить в зависимости от требований интерфейса.

Стандартное поведение фокуса

По умолчанию Micromodal обеспечивает следующее поведение с фокусом:

  • Когда модальное окно открывается, фокус перемещается на первый интерактивный элемент внутри окна (кнопку, поле ввода и т.д.).
  • При закрытии модального окна фокус возвращается на элемент, который был активен до открытия окна.

Для обеспечения максимальной доступности библиотека следит за тем, чтобы фокус не уходил за пределы модального окна, когда оно активно. Это предотвращает «путаницу» фокуса, когда пользователь не может вернуться к интерфейсу за пределами модального окна.

Настройка фокуса

Micromodal предоставляет несколько опций для тонкой настройки поведения фокуса, что позволяет подстраивать его под конкретные нужды приложения.

  1. Focus on open (focusOnOpen) Это свойство позволяет определить, какой элемент получит фокус при открытии модального окна. По умолчанию фокус устанавливается на первый интерактивный элемент, но его можно переназначить. Вариант можно передать через параметр при инициализации модального окна:

    const modal = new MicroModal.modal({
  target: 'modal-1',
  focusOnOpen: 'modal-close-btn', // кнопка закрытия получит фокус
});

    В этом примере при открытии модального окна фокус будет перемещен на кнопку с id modal-close-btn. Это может быть полезно в случае, если требуется, чтобы именно кнопка закрытия окна была активна по умолчанию.

  2. Focus on close (focusOnClose) В случае, если нужно изменить элемент, на который будет возвращён фокус после закрытия модального окна, можно использовать параметр focusOnClose. Например:

    const modal = new MicroModal.modal({
  target: 'modal-1',
  focusOnClose: 'back-to-main-button', // фокус вернется на кнопку, которая была активна до открытия окна
});

    Этот параметр гарантирует, что фокус вернется на указанную кнопку или другой элемент.

  3. Обработка фокуса вручную Иногда может возникнуть ситуация, когда необходимо вручную контролировать, на каком элементе должен быть фокус при открытии или закрытии модального окна. Для этого можно использовать дополнительные методы библиотеки.

    Micromodal позволяет вручную установить фокус с помощью метода focus() на нужный элемент:

    const modal = new MicroModal.modal({
  target: 'modal-1',
  onShow: (modal) => {
    document.querySelector('#modal-input').focus(); // Устанавливаем фокус на элементе input
  },
});

    В данном примере, когда модальное окно открывается, фокус будет установлен на элемент #modal-input.

Защита от выхода фокуса за пределы модального окна

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

С помощью параметра trapFocus можно контролировать, следует ли ограничивать фокус только элементами внутри модального окна. По умолчанию это поведение включено.

const modal = new MicroModal.modal({
  target: 'modal-1',
  trapFocus: true, // Включает ограничение фокуса в пределах модального окна
});

При отключении этого параметра фокус может выйти за пределы модального окна, что не рекомендуется с точки зрения доступности.

Пример с полным контролем фокуса

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

const modal = new MicroModal.modal({
  target: 'modal-1',
  focusOnOpen: 'modal-close-btn',  // фокус на кнопке закрытия
  focusOnClose: 'main-content',   // фокус возвращается на основной контент
  trapFocus: true,                // фокус ограничен модальным окном
  onShow: () => {
    console.log('Модальное окно открыто');
  },
  onClose: () => {
    console.log('Модальное окно закрыто');
  }
});

Этот код позволяет настроить полный контроль за фокусом и добавить логику для выполнения дополнительных действий при открытии и закрытии модального окна.

Заключение

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

Оглавление