Навигация с клавиатуры

Shepherd.js предоставляет встроенные возможности управления пошаговыми руководствами с помощью клавиатуры. Это критически важно для улучшения доступности (accessibility) интерфейса и обеспечения удобства использования для пользователей, которые не могут использовать мышь. Навигация с клавиатуры включает обработку клавиш Tab, Enter, Escape, а также стрелок для перемещения между шагами тура.

Управление шагами с клавиатуры

Каждый шаг Shepherd определяется объектом с конфигурацией, где можно настроить поведение при взаимодействии с клавиатурой:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    keyboardNavigation: true
  }
});

tour.addStep({
  id: 'intro',
  text: 'Добро пожаловать в тур!',
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

Ключевые моменты:

  • keyboardNavigation: true — включает возможность перемещаться между шагами с помощью клавиш Tab, Enter, Arrow.
  • cancelIcon.enabled: true — добавляет крестик для отмены шага, который также можно активировать клавишей Escape.
  • Кнопки шага автоматически становятся доступными для клавиатурной навигации.

Настройка поведения клавиш

Shepherd.js позволяет настраивать реакции на конкретные клавиши через объект keyboardNavigation. Можно определить собственные обработчики для событий нажатия:

tour.addStep({
  id: 'custom-keyboard',
  text: 'Используйте стрелки для перемещения.',
  keyboardNavigation: {
    next: ['ArrowRight', 'Enter'],
    prev: ['ArrowLeft'],
    cancel: ['Escape']
  }
});
  • next — массив клавиш, которые продвигают тур к следующему шагу.
  • prev — клавиши для возврата к предыдущему шагу.
  • cancel — клавиши, которые закрывают текущий шаг.

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

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

Shepherd автоматически управляет фокусом на интерактивных элементах кнопок внутри шага. При включённой навигации клавиатурой:

  • Tab перемещает фокус между кнопками шага.
  • Shift + Tab — обратное перемещение.
  • После закрытия шага фокус возвращается к элементу страницы, с которого был запущен тур.

Можно вручную управлять фокусом через параметр attachTo:

tour.addStep({
  id: 'focus-input',
  text: 'Введите данные в поле.',
  attachTo: {
    element: '#username',
    on: 'bottom'
  },
  when: {
    show: () => {
      document.querySelector('#username').focus();
    }
  }
});

Навигация через кнопки и действия

Shepherd.js использует объект action для каждой кнопки шага. При использовании клавиатуры активируется кнопка, на которой находится фокус. Основные действия:

  • tour.next — переход к следующему шагу.
  • tour.back — возврат к предыдущему шагу.
  • tour.cancel — завершение тура.
  • tour.complete — завершение тура с выполнением всех шагов.

Пример:

buttons: [
  {
    text: 'Назад',
    action: tour.back
  },
  {
    text: 'Далее',
    action: tour.next
  },
  {
    text: 'Закрыть',
    action: tour.cancel
  }
]

События, связанные с клавиатурой

Shepherd.js поддерживает глобальные события на уровне тура:

  • show — вызывается при отображении шага, можно устанавливать фокус.
  • complete — выполняется после завершения тура.
  • cancel — вызывается при прерывании тура.
  • active — срабатывает при активации шага.

Пример кастомного поведения при нажатии клавиши:

tour.on('active', (event) => {
  document.addEventListener('keydown', (e) => {
    if (e.key === 'F1') {
      tour.next();
    }
  });
});

Советы по доступности

  • Всегда включать keyboardNavigation: true для каждого шага.
  • Проверять фокус после открытия шага, чтобы пользователь сразу видел активный элемент.
  • Обеспечивать контрастный визуальный индикатор фокуса на кнопках.
  • Использовать логические последовательности кнопок для удобства Tab-навигации.

Заключение по клавиатурной навигации

Shepherd.js предоставляет полный набор инструментов для реализации клавиатурной навигации: от базового управления шагами через Tab/Enter/Escape до кастомных обработчиков конкретных клавиш. Грамотно настроенная навигация обеспечивает доступность и повышает UX любого веб-приложения.

Оглавление