Параметр setReturnFocus

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

Основное назначение

Параметр setReturnFocus определяет, куда будет возвращён фокус после выхода из активного элемента с зафиксированным фокусом. По умолчанию Focus-trap возвращает фокус на элемент, который был активен до активации трепа. Это обеспечивает естественный пользовательский опыт и предотвращает потерю ориентации при использовании клавиатуры.

Пример типичной конфигурации трепа с setReturnFocus:

import { createFocusTrap } from 'focus-trap';

const modal = document.getElementById('modal');
const buttonOpen = document.getElementById('openModal');

const trap = createFocusTrap(modal, {
  setReturnFocus: buttonOpen
});

buttonOpen.addEventListener('click', () => {
  trap.activate();
});

В данном случае после закрытия модального окна фокус вернётся на кнопку buttonOpen.

Типы значений

setReturnFocus может принимать несколько видов значений:

  1. Булево значение true или false

    • true — поведение по умолчанию: фокус возвращается на элемент, который был активен до активации трепа.
    • false — фокус не возвращается автоматически, остаётся в документе или перемещается на первый доступный элемент после деактивации.

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

setReturnFocus: document.getElementById('customButton')
  1. Функция Можно передать функцию, возвращающую элемент, который должен получить фокус. Функция вызывается при деактивации трепа:
setReturnFocus: () => document.querySelector('.last-focused')

Функция позволяет динамически определять элемент, например, исходя из состояния интерфейса или пользовательских действий.

Особенности поведения

  • Если элемент, указанный в setReturnFocus, отсутствует в DOM или недоступен (например, скрыт через display: none), фокус будет возвращён на первый доступный элемент в документе или останется в текущей области фокуса.
  • setReturnFocus: false полезен в ситуациях, когда управление фокусом требуется полностью перенести на другой скрипт или библиотеку.
  • В сочетании с параметром onDeactivate можно реализовать сложные сценарии навигации и анимации, гарантируя корректное восстановление фокуса.
const trap = createFocusTrap(modal, {
  setReturnFocus: () => document.querySelector('.active-button'),
  onDeactivate: () => console.log('Focus trap деактивирован')
});

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

  • Всегда использовать setReturnFocus, если модальный элемент или интерактивный компонент открывается с клавиатуры, чтобы сохранить доступность (a11y).
  • Для повторно используемых компонентов лучше передавать функцию, возвращающую целевой элемент фокуса, чтобы обеспечить гибкость и избежать жёсткой привязки к конкретному элементу.
  • Не использовать false без явной причины, так как это может привести к неожиданным ситуациям для пользователей с клавиатурой и вспомогательными технологиями.

Связь с другими параметрами Focus-trap

setReturnFocus тесно взаимодействует с:

  • onDeactivate — позволяет выполнять дополнительные действия при деактивации трепа и корректно управлять состоянием интерфейса.
  • fallbackFocus — задаёт элемент, который получает фокус, если треп не имеет активного элемента при активации. Важно для предотвращения потери фокуса.
  • initialFocus — определяет, какой элемент получает фокус при активации трепа, а setReturnFocus отвечает за обратный путь фокуса.

setReturnFocus обеспечивает предсказуемость и контроль над навигацией клавиатурой, что критично для доступных веб-интерфейсов. Его гибкость позволяет реализовать как простые сценарии возврата фокуса на исходный элемент, так и динамическое управление фокусом в сложных интерфейсах.

Оглавление