Параметр onActivate

Библиотека Focus-trap предназначена для управления фокусом внутри заданного DOM-элемента, что особенно важно при реализации модальных окон, всплывающих подсказок и сложных интерактивных компонентов. Одним из ключевых параметров при создании ловушки фокуса является onActivate. Этот параметр позволяет задать функцию, которая будет вызвана непосредственно при активации фокуса внутри ловушки.

Назначение onActivate

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

  • Управления стилями страницы (например, блокировка скролла или затемнение фона модального окна).
  • Логирования событий активации.
  • Настройки начального фокуса внутри ловушки при динамически создаваемых компонентах.

Функция, переданная в onActivate, вызывается один раз при вызове метода activate() и получает объект с параметрами активации.

Синтаксис

const trap = focusTrap(element, {
  onActivate: function() {
    console.log("Ловушка фокуса активирована");
  }
});
  • element — DOM-элемент, внутри которого будет ограничен фокус.
  • onActivate — функция без обязательных аргументов. Может быть как обычной функцией, так и стрелочной.

Пример использования с управлением скроллом

const modal = document.querySelector('#modal');

const trap = focusTrap(modal, {
  onActivate: () => {
    // Блокировка прокрутки страницы
    document.body.style.overflow = 'hidden';
    console.log("Фокус внутри модального окна активирован");
  },
  onDeactivate: () => {
    // Возврат прокрутки
    document.body.style.overflow = '';
  }
});

// Активация ловушки
trap.activate();

В этом примере при активации ловушки:

  1. Фокус перемещается внутрь модального окна.
  2. Стиль overflow у <body> меняется на hidden, блокируя прокрутку страницы.
  3. В консоль выводится сообщение о активации.

Взаимодействие с initialFocus

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

const trap = focusTrap(modal, {
  initialFocus: '#first-input',
  onActivate: () => {
    console.log("Активирован фокус, первый input будет выбран автоматически");
  }
});

Если initialFocus не задан, библиотека автоматически фокусируется на первом доступном фокусируемом элементе внутри контейнера.

Асинхронные действия в onActivate

Функция onActivate может выполнять асинхронные операции, но важно понимать, что фокус будет активирован сразу, независимо от завершения асинхронного кода. Для примера:

const trap = focusTrap(modal, {
  onActivate: async () => {
    await fetch('/api/log-activation');
    console.log("Активация зарегистрирована на сервере");
  }
});

Фокус внутри контейнера установится сразу, а сетевой запрос выполняется параллельно.

Практические рекомендации

  1. Минимизировать сложные операции внутри onActivate, чтобы пользователь не заметил задержки фокусировки.
  2. Не использовать setTimeout для установки начального фокуса, если есть initialFocus — библиотека справится автоматически.
  3. Сочетание с onDeactivate позволяет полностью контролировать поведение страницы при открытии и закрытии интерактивных блоков.
  4. В проектах с модальными окнами рекомендуется в onActivate блокировать фоновые действия, чтобы предотвратить взаимодействие с элементами вне модального окна.

Взаимодействие с другими параметрами Focus-trap

onActivate выполняется до установки фокуса, тогда как onPostActivate вызывается после завершения всех действий по активации, включая перемещение фокуса. Разделение этих двух событий позволяет:

  • onActivate — подготовить DOM или стили.
  • onPostActivate — запускать логику, которая зависит от уже установленного фокуса.
const trap = focusTrap(modal, {
  onActivate: () => console.log('Подготовка модального окна'),
  onPostActivate: () => console.log('Фокус установлен, пользователь может взаимодействовать')
});

Особенности при повторной активации

Если ловушка активируется повторно без деактивации, onActivate не будет вызван снова, пока не произойдёт deactivate(). Это предотвращает повторное выполнение побочных эффектов, таких как повторная блокировка скролла.

Итоговые моменты

  • onActivate — точка для подготовки интерфейса перед взаимодействием пользователя.
  • Вызывается один раз при активации.
  • Может использоваться для управления стилями, начальным фокусом и логирования.
  • Асинхронные операции не блокируют перемещение фокуса.
  • В сочетании с onDeactivate и onPostActivate обеспечивает полный контроль над поведением фокусируемых элементов.

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

Оглавление