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

Библиотека Toastify в JavaScript позволяет создавать настраиваемые уведомления (toasts) с минимальными усилиями, но её возможности управления взаимодействием с клавиатурой часто остаются недооценёнными. Toastify поддерживает как базовое отображение уведомлений, так и их управление с помощью клавиш, что критически важно для доступности и удобства пользовательского интерфейса.

Инициализация уведомления

Для начала необходимо создать уведомление с помощью метода Toastify({ ...options }). Ключевые параметры:

Toastify({
  text: "Сообщение",
  duration: 3000,
  close: true, // добавляет кнопку закрытия
  gravity: "top", // расположение сверху или снизу
  position: "right", // позиция по горизонтали
}).showToast();
  • text — текст уведомления.
  • duration — время показа в миллисекундах; если 0, уведомление остаётся до явного закрытия.
  • close — добавляет кнопку закрытия. Это важно, так как клавиатурная навигация часто опирается на фокусируемые элементы, а кнопка закрытия становится доступной для клавиатуры.

Фокус и доступность

Чтобы уведомления были полностью управляемы с клавиатуры, элемент toast должен быть фокусируемым. Toastify создаёт контейнер div.toastify, к которому можно программно добавить атрибут tabindex:

const toast = Toastify({
  text: "Нажмите Enter для действия",
  close: true,
  duration: 0
}).showToast();

toast.toastElement.setAttribute("tabindex", "0");

После этого уведомление может принимать фокус при навигации с клавиатуры с помощью клавиш Tab и Shift+Tab.

Обработка событий клавиш

Toastify позволяет привязывать обработчики событий к элементу уведомления. Для навигации с клавиатуры важно использовать события keydown:

toast.toastElement.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    console.log("Enter нажата — выполнить действие");
    toast.hideToast();
  }
  if (event.key === "Escape") {
    toast.hideToast();
  }
});
  • Enter — часто используется для подтверждения действия или перехода по ссылке внутри toast.
  • Escape — стандартная клавиша для закрытия уведомления.

Перемещение между несколькими уведомлениями

Если на странице отображается несколько toast, навигация между ними требует явного управления фокусом. Например, можно создать массив элементов уведомлений и обрабатывать ArrowUp / ArrowDown:

const toasts = document.querySelectorAll(".toastify");

toasts.forEach((toast, index) => {
  toast.addEventListener("keydown", (event) => {
    if (event.key === "ArrowDown") {
      const nextIndex = (index + 1) % toasts.length;
      toasts[nextIndex].focus();
    }
    if (event.key === "ArrowUp") {
      const prevIndex = (index - 1 + toasts.length) % toasts.length;
      toasts[prevIndex].focus();
    }
  });
});

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

Управление закрытием через клавиатуру

Если используется кнопка закрытия, она должна быть фокусируемой (tabindex="0") и реагировать на Enter или Space:

const closeButton = toast.toastElement.querySelector(".toast-close");
closeButton.setAttribute("tabindex", "0");
closeButton.addEventListener("keydown", (event) => {
  if (event.key === "Enter" || event.key === " ") {
    toast.hideToast();
  }
});

Это обеспечивает полную совместимость с клавиатурной навигацией и улучшает доступность.

Стилизация фокуса

Для удобства визуальной навигации важно выделять активный toast с помощью CSS:

.toastify:focus {
  outline: 2px solid #007acc;
  outline-offset: 2px;
}
.toast-close:focus {
  outline: 2px solid #ff0000;
}

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

Поддержка событий кастомного действия

Toastify позволяет добавлять кастомные действия на toast. Для клавиатуры это особенно удобно:

toast.toastElement.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    performCustomAction();
    toast.hideToast();
  }
});

Функция performCustomAction() может выполнять любые задачи: от открытия модального окна до перенаправления пользователя.

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

  1. Установить tabindex="0" для toast и кнопки закрытия.
  2. Обработать keydown для клавиш Enter, Escape, ArrowUp, ArrowDown.
  3. Визуально обозначить фокус через CSS.
  4. Обеспечить циклическую навигацию при нескольких уведомлениях.
  5. Добавлять кастомные действия на клавишу Enter или Space.

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

Оглавление