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

Featherlight — это легковесная библиотека для реализации модальных окон на JavaScript и jQuery. Одним из важных аспектов при работе с модальными окнами является обеспечение удобной клавиатурной навигации, которая позволяет управлять окнами без использования мыши. Это критично для доступности (accessibility) и улучшения пользовательского опыта.

Основные события клавиатуры

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

$(document).on('keydown', function(e) {
    if (e.key === "Escape") {
        $.featherlight.close();
    }
});

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

Перемещение между элементами внутри модального окна

Для полноценной клавиатурной навигации важно реализовать циклическую фокусировку по интерактивным элементам внутри окна (кнопки, ссылки, поля ввода). Featherlight предоставляет доступ к содержимому через объект $.featherlight.current(), что позволяет динамически управлять фокусом:

var fl = $.featherlight.current();
var focusable = fl.$content.find('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])');
var first = focusable.first();
var last = focusable.last();

fl.$content.on('keydown', function(e) {
    if (e.key === 'Tab') {
        if (e.shiftKey && document.activeElement === first[0]) {
            e.preventDefault();
            last.focus();
        } else if (!e.shiftKey && document.activeElement === last[0]) {
            e.preventDefault();
            first.focus();
        }
    }
});

Особенности реализации:

  • Tab перемещает фокус по интерактивным элементам.
  • Shift + Tab позволяет идти в обратном направлении.
  • Циклическая фокусировка предотвращает уход фокуса за пределы модального окна.

Поддержка дополнительных клавиш

Featherlight позволяет расширять стандартное поведение, добавляя обработку других клавиш. Например, для галерей изображений удобно использовать стрелки для навигации между элементами:

$(document).on('keydown', function(e) {
    var fl = $.featherlight.current();
    if (!fl) return;

    switch(e.key) {
        case 'ArrowRight':
            fl.next(); // переход к следующему элементу галереи
            break;
        case 'ArrowLeft':
            fl.prev(); // переход к предыдущему элементу
            break;
    }
});

Здесь важно проверять наличие активного окна через $.featherlight.current(), чтобы навигация не срабатывала на основной странице.

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

Featherlight поддерживает конфигурацию через опции, которые позволяют включать или отключать определённые клавиатурные функции:

$.featherlight.defaults.closeOnEsc = true;
$.featherlight.defaults.closeOnClick = 'background';
  • closeOnEsc — закрытие модального окна при нажатии Esc.
  • closeOnClick — определяет, будет ли окно закрываться при клике на фон (можно указать 'background', 'anywhere' или false).

Дополнительно можно подключить обработку клавиш галереи или кастомных действий через afterOpen и beforeClose:

$.featherlight('<div>Контент</div>', {
    afterOpen: function() {
        var fl = this;
        fl.$content.on('keydown', function(e) {
            if (e.key === 'Enter') {
                console.log('Enter нажата внутри модального окна');
            }
        });
    }
});

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

  1. Фокус на открытие окна: сразу после открытия окна фокус следует устанавливать на первый интерактивный элемент.
  2. Фокус при закрытии окна: после закрытия модального окна фокус возвращается к элементу, с которого оно было вызвано.
  3. Роль ARIA: модальное окно рекомендуется обозначать role="dialog" и управлять атрибутами aria-modal и aria-hidden для контента за пределами окна.
  4. Тестирование клавиатурой: все элементы должны быть доступны через Tab, Enter и Esc.

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

Оглавление