Клавиатурная навигация

Bliss.js предоставляет удобные методы для работы с событиями клавиатуры, что позволяет реализовывать полноценную клавиатурную навигацию по интерфейсу веб-приложения. В основе лежит событийная модель JavaScript, но Bliss.js упрощает работу с ней через обёртки и цепочки методов.

События клавиатуры

В JavaScript существуют три основных события клавиатуры:

  • keydown — срабатывает при нажатии клавиши.
  • keypress — срабатывает при вводе символа (устаревшее, редко используется).
  • keyup — срабатывает при отпускании клавиши.

Bliss.js позволяет регистрировать обработчики через метод on, применяемый к DOM-элементам:

var input = Bliss.$('#input');
Bliss.$(input).on('keydown', function(event) {
    console.log('Нажата клавиша: ', event.key);
});

Здесь event.key возвращает строковое представление клавиши, что значительно упрощает обработку по сравнению с использованием keyCode.

Навигация между элементами

Для реализации клавиатурной навигации обычно используется логика перемещения по фокусируемым элементам: кнопки, ссылки, поля ввода. Bliss.js облегчает работу с DOM-коллекциями через метод Bliss.$, возвращающий массивоподобный объект, на который можно навешивать события циклически.

var items = Bliss.$$('.menu-item');
var index = 0;

Bliss.$(document).on('keydown', function(event) {
    if(event.key === 'ArrowDown') {
        items[index].classList.remove('focused');
        index = (index + 1) % items.length;
        items[index].classList.add('focused');
    }
    if(event.key === 'ArrowUp') {
        items[index].classList.remove('focused');
        index = (index - 1 + items.length) % items.length;
        items[index].classList.add('focused');
    }
});

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

  • Используется класс focused для визуального обозначения текущего элемента.
  • Циклическая навигация через модульное вычисление индекса.
  • Все элементы выбираются через $$, что упрощает работу с коллекцией.

Обработка специальных клавиш

Bliss.js позволяет проверять клавиши и модификаторы (Shift, Ctrl, Alt) через объект события. Это важно для сложных интерфейсов:

Bliss.$(document).on('keydown', function(event) {
    if(event.key === 'Enter') {
        console.log('Активирован элемент:', items[index].textContent);
    }
    if(event.key === 'ArrowRight' && event.shiftKey) {
        console.log('Перемещение с Shift + стрелка вправо');
    }
});

Использование event.shiftKey, event.ctrlKey и других свойств позволяет создавать комбинации клавиш для управления интерфейсом.

Фокус и управление состоянием

Для полноценной клавиатурной навигации важна логика фокуса:

items.forEach(function(item, i) {
    Bliss.$(item).on('focus', function() {
        index = i;
        items.forEach(el => el.classList.remove('focused'));
        item.classList.add('focused');
    });
});

Таким образом:

  • Любое внешнее действие, приводящее к фокусу, синхронизирует индекс.
  • Можно использовать tabindex для управления порядком перехода по клавише Tab.
  • Bliss.js позволяет легко навешивать события на коллекции элементов без необходимости цикла for.

Комбинирование событий мыши и клавиатуры

Часто требуется, чтобы клавиатурная навигация сочеталась с кликами мыши. Bliss.js обеспечивает единый подход:

Bliss.$(items).on('click', function(event) {
    items.forEach(el => el.classList.remove('focused'));
    event.currentTarget.classList.add('focused');
    index = items.indexOf(event.currentTarget);
});

Преимущества такого подхода:

  • Клик и навигация через клавиши управляют одним и тем же состоянием index.
  • Изменение фокуса визуально отражается сразу.
  • Код остаётся компактным за счёт методов Bliss.js.

Доступность и ARIA

При реализации клавиатурной навигации важно учитывать ARIA-атрибуты:

  • aria-selected для выбора текущего элемента.
  • aria-activedescendant для контейнеров с фокусом.
  • role="menu" и role="menuitem" для меню.

Пример синхронизации состояния с ARIA:

items.forEach(function(item) {
    item.setAttribute('role', 'menuitem');
});

function updateFocus(index) {
    items.forEach((el, i) => {
        el.setAttribute('aria-selected', i === index);
        if(i === index) el.focus();
    });
}

Реактивные обновления интерфейса

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

Bliss.$(document).on('keydown', '.menu-item', function(event) {
    if(event.key === 'Enter') {
        console.log('Активирован динамический элемент:', event.currentTarget.textContent);
    }
});

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

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

  • Для больших интерфейсов следует хранить текущий индекс и управлять фокусом централизованно.
  • Комбинировать keydown для перемещения и click для выбора.
  • Использовать классы и ARIA для визуальной и семантической синхронизации.
  • Делегирование событий избавляет от необходимости повторного навешивания обработчиков на новые элементы.

Bliss.js объединяет простоту работы с DOM и гибкость событийной модели, что делает её мощным инструментом для реализации клавиатурной навигации в современных веб-приложениях.

Оглавление