Обработка клавиатуры

Взаимодействие с пользователем через клавиатуру является неотъемлемой частью работы с модальными окнами. Для обеспечения удобства пользователей необходимо учитывать несколько факторов, таких как закрытие модального окна при нажатии на клавишу Escape, управление фокусом и блокировка клавиш для предотвращения нежелательных действий. В библиотеке Micromodal предусмотрены встроенные механизмы для обработки событий клавиатуры, что упрощает реализацию таких функций.

Закрытие модального окна при нажатии клавиши Escape

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

В библиотеке Micromodal для этого используется обработчик события keydown. При нажатии клавиши Escape система проверяет, открыт ли модальный диалог, и если он активен, закрывает его.

Пример реализации:

Micromodal.init({
    onShow: modal => {
        document.addEventListener('keydown', handleEscapeKey);
    },
    onClose: modal => {
        document.removeEventListener('keydown', handleEscapeKey);
    }
});

function handleEscapeKey(event) {
    if (event.key === 'Escape') {
        Micromodal.close();
    }
}

В этом примере обработка нажатия клавиши Escape выполняется только в случае, если модальное окно активно. Для этого в функции onShow добавляется слушатель события keydown, а в onClose — удаляется.

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

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

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

Пример:

Micromodal.init({
    onShow: modal => {
        const firstFocusableElement = modal.querySelector('button');
        firstFocusableElement.focus();
    },
    onClose: modal => {
        document.querySelector('[data-modal-trigger]').focus();
    }
});

В этом примере после открытия модального окна фокус будет установлен на первую кнопку, а после закрытия — возвращён на элемент, который вызвал окно.

Блокировка ввода с клавиатуры при открытом модальном окне

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

Micromodal по умолчанию включает блокировку прокрутки страницы при открытии модального окна. Однако для блокировки ввода с клавиатуры также можно добавить дополнительные настройки, например, заблокировав использование клавиш, кроме Escape, Tab и Enter.

Пример:

Micromodal.init({
    onShow: modal => {
        document.body.style.overflow = 'hidden'; // Блокируем прокрутку
        document.addEventListener('keydown', blockOtherKeys);
    },
    onClose: modal => {
        document.body.style.overflow = ''; // Разблокируем прокрутку
        document.removeEventListener('keydown', blockOtherKeys);
    }
});

function blockOtherKeys(event) {
    const allowedKeys = ['Escape', 'Tab', 'Enter'];
    if (!allowedKeys.includes(event.key)) {
        event.preventDefault();
    }
}

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

Обработка клавиши Tab

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

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

Пример:

Micromodal.init({
    onShow: modal => {
        const focusableElements = modal.querySelectorAll('button, input, textarea, a');
        const firstFocusable = focusableElements[0];
        const lastFocusable = focusableElements[focusableElements.length - 1];

        modal.addEventListener('keydown', function trapTabKey(event) {
            if (event.key === 'Tab') {
                if (event.shiftKey) { // Shift + Tab
                    if (document.activeElement === firstFocusable) {
                        lastFocusable.focus();
                        event.preventDefault();
                    }
                } else { // Tab
                    if (document.activeElement === lastFocusable) {
                        firstFocusable.focus();
                        event.preventDefault();
                    }
                }
            }
        });
    },
    onClose: modal => {
        modal.removeEventListener('keydown', trapTabKey);
    }
});

Здесь добавлена логика для «ловушки» клавиши Tab: если пользователь находится на первом или последнем фокусируемом элементе, при следующем нажатии клавиши Tab фокус будет перемещён на противоположный элемент (последний или первый соответственно).

Заключение

Обработка клавиатурных событий является важной частью взаимодействия с модальными окнами. В библиотеке Micromodal предусмотрены встроенные механизмы для управления клавишами Escape, Tab, а также для блокировки ввода с клавиатуры и предотвращения нежелательных действий. Разработка с учётом этих аспектов помогает создать интуитивно понятный и удобный интерфейс для пользователя, обеспечивая тем самым высокий уровень доступности и удобства.

Оглавление