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

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

Основные клавиши навигации

Driver.js поддерживает несколько стандартных клавиш для управления шагами гида:

  • Tab / Shift + Tab — перемещение между фокусируемыми элементами.
  • Enter / Space — переход к следующему шагу.
  • Escape (Esc) — закрытие текущего тура.
  • Стрелки (← → / ↑ ↓) — могут быть настроены для перемещения вперед и назад по шагам.

По умолчанию Driver.js автоматически обрабатывает Tab, Enter и Escape. Дополнительные клавиши требуют явной конфигурации через события.

Настройка клавиатурного управления

Для расширенной настройки клавиатурного взаимодействия используется объект keyboardControl в конфигурации Driver:

const driver = new Driver({
    keyboardControl: true
});

Если значение keyboardControl установлено в true, активируются стандартные клавиши: Enter, Escape, Tab.

Для более гибкой настройки можно использовать метод on('event', callback) для отслеживания пользовательских клавиш:

driver.on('next', () => {
    console.log('Переход к следующему шагу');
});

driver.on('previous', () => {
    console.log('Возврат к предыдущему шагу');
});

driver.on('close', () => {
    console.log('Тур завершен');
});

Пользовательская обработка клавиш

Можно подключить свои обработчики событий клавиатуры, чтобы управлять навигацией по шагам:

document.addEventListener('keydown', (event) => {
    switch (event.key) {
        case 'ArrowRight':
            driver.moveNext();
            break;
        case 'ArrowLeft':
            driver.movePrevious();
            break;
        case 'Escape':
            driver.reset();
            break;
    }
});

Методы moveNext(), movePrevious() и reset() позволяют полностью контролировать логику движения по шагам, включая кастомные комбинации клавиш.

Фокус на элементе при навигации

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

const steps = [
    {
        element: '#button1',
        popover: {
            title: 'Кнопка 1',
            description: 'Описание кнопки 1',
            position: 'bottom'
        }
    },
    {
        element: '#input1',
        popover: {
            title: 'Поле ввода',
            description: 'Описание поля ввода',
            position: 'top'
        }
    }
];

driver.defineSteps(steps);
driver.start();

При переходе к следующему шагу Driver.js автоматически переносит фокус на element текущего шага, обеспечивая доступность.

Ограничение клавиш для конкретного тура

Если необходимо запретить определённые клавиши для конкретного тура, можно использовать событие beforeNext:

driver.on('beforeNext', (step) => {
    if (step.popover.title === 'Поле ввода') {
        // Блокируем переход по Enter
        return false;
    }
});

Возврат false отменяет стандартное поведение клавиши и позволяет внедрять кастомную логику.

Поддержка клавиатурной доступности (ARIA)

Driver.js совместим с ARIA-атрибутами, что повышает уровень доступности для пользователей с ограничениями:

  • Каждый поповер получает role="dialog" и aria-modal="true".
  • Элементы, на которые установлен фокус, получают tabindex="0", что делает их доступными для навигации клавиатурой.
  • При переходе между шагами библиотека управляет атрибутами aria-hidden для скрытия остальных элементов интерфейса.

Комбинации клавиш для кастомных действий

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

document.addEventListener('keydown', (event) => {
    if (event.ctrlKey && event.key === 'ArrowRight') {
        driver.moveNext();
    }
    if (event.ctrlKey && event.key === 'ArrowLeft') {
        driver.movePrevious();
    }
});

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

Итоговые рекомендации по клавиатурному управлению

  • Всегда включать keyboardControl: true для базовой навигации.
  • Использовать методы moveNext(), movePrevious(), reset() для кастомного управления шагами.
  • Настраивать обработку событий beforeNext и beforePrev для ограничения действий на отдельных шагах.
  • Следить за ARIA-атрибутами для обеспечения полной доступности.
  • Для сложных интерфейсов внедрять комбинации клавиш через обработчики keydown.

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

Оглавление