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

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

Автоматическая фокусировка

Каждый шаг тура в Shepherd.js может автоматически устанавливать фокус на целевой элемент с помощью параметра attachTo. При этом используется объект с двумя свойствами:

attachTo: {
  element: '#my-element',
  on: 'bottom'
}
  • element — CSS-селектор или DOM-элемент, на который будет установлен фокус.
  • on — положение тултипа относительно целевого элемента (top, bottom, left, right).

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

Настройка поведения фокуса

Shepherd.js позволяет детально контролировать поведение фокуса через параметры шага:

  • focus — Boolean, определяет, будет ли элемент получать фокус при активации шага. По умолчанию установлено значение true.
tour.addStep({
  id: 'step-1',
  text: 'Сначала заполните это поле.',
  attachTo: { element: '#input-name', on: 'top' },
  focus: true
});

Если значение focus установлено в false, фокус на элемент не будет перемещаться, что полезно для шагов, не связанных с конкретным элементом, например, описательных подсказок.

  • canClickTarget — Boolean, разрешает пользователю взаимодействовать с целевым элементом во время шага. Установка true позволяет кликать по кнопкам или ссылкам без выхода из шага, что важно для интерактивных туров.
tour.addStep({
  id: 'step-2',
  text: 'Нажмите на кнопку, чтобы продолжить.',
  attachTo: { element: '#next-button', on: 'bottom' },
  focus: true,
  canClickTarget: true
});

Программная установка фокуса

Иногда требуется более точное управление фокусом, например, для элементов, появляющихся динамически. Shepherd.js предоставляет метод beforeShowPromise, который позволяет выполнять действия перед отображением шага:

tour.addStep({
  id: 'step-3',
  text: 'Поле динамически появляется здесь.',
  attachTo: { element: '#dynamic-input', on: 'right' },
  beforeShowPromise: () => {
    const el = document.querySelector('#dynamic-input');
    if (el) el.focus();
    return Promise.resolve();
  }
});

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

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

После завершения шага или всего тура важно возвращать фокус к исходному элементу для сохранения доступности приложения. Shepherd.js автоматически сохраняет предыдущий фокус, если используется стандартное поведение шагов. Дополнительно можно управлять возвратом вручную с помощью события complete или cancel:

tour.on('complete', () => {
  const startButton = document.querySelector('#start-tour');
  if (startButton) startButton.focus();
});

Фокус и доступность (ARIA)

Shepherd.js интегрирован с ARIA для обеспечения доступности. Каждый активный шаг получает атрибут aria-describedby, указывающий на тултип, что позволяет скринридерам правильно озвучивать подсказку. Управление фокусом совместно с ARIA атрибутами повышает уровень доступности туров для пользователей с нарушениями зрения.

  • Использование focus: true обеспечивает перемещение фокуса и правильное озвучивание шагов.
  • Добавление canClickTarget: true предотвращает прерывание фокусировки при взаимодействии.

Примеры комплексного управления фокусом

Комбинация всех параметров позволяет создавать сложные сценарии:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  id: 'step-4',
  text: 'Начнем с главного меню.',
  attachTo: { element: '#main-menu', on: 'bottom' },
  focus: true,
  canClickTarget: false,
  beforeShowPromise: () => {
    console.log('Подготовка к фокусировке на меню');
    return Promise.resolve();
  }
});

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

Фокус в Shepherd.js — это инструмент, который делает туры интерактивными, наглядными и доступными. Правильная комбинация параметров focus, canClickTarget, beforeShowPromise и событий тура позволяет создавать гибкие и безопасные для пользователя подсказки.

Оглавление