Keyboard navigation

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

Основы работы с Vex.js

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

Настройка навигации с клавиатуры

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

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

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

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

vex.defaultOptions.className = 'vex-theme-default';
vex.defaultOptions.overlayClosesOnClick = false;

let notifications = [];

function createNotification(message) {
  const notification = vex.open({
    message: message,
    close: () => {
      // Удаление уведомления из списка
      notifications = notifications.filter(item => item !== notification);
    }
  });
  notifications.push(notification);
}

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowDown') {
    let current = notifications.indexOf(vex.activeElement);
    if (current < notifications.length - 1) {
      vex.activeElement = notifications[current + 1];
    }
  } else if (event.key === 'ArrowUp') {
    let current = notifications.indexOf(vex.activeElement);
    if (current > 0) {
      vex.activeElement = notifications[current - 1];
    }
  }
});

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

Закрытие уведомлений с клавиатуры

Для улучшения UX, важно также обеспечить возможность закрытия уведомлений с клавиатуры. Обычно для этого используется клавиша Esc, что является стандартом для большинства интерфейсов.

Vex.js позволяет легко настроить обработчик для закрытия уведомлений с помощью клавиатуры. Для этого необходимо добавить обработчик на событие keydown, который будет отслеживать нажатие клавиши Esc и закрывать текущее активное уведомление.

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    if (vex.activeElement) {
      vex.activeElement.close();
    }
  }
});

Этот код гарантирует, что нажатие клавиши Esc закроет активное уведомление. Уведомление будет закрыто даже в том случае, если оно в данный момент активно и на нем установлен фокус.

Расширенные возможности

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

Установка фокуса на уведомление

Для уведомлений, которые требуют дополнительного внимания пользователя, может быть полезным установка фокуса на них сразу после их создания. Vex.js позволяет установить фокус на конкретное уведомление с помощью vex.activeElement, что позволяет пользователю взаимодействовать с ним, не двигаясь по странице.

const notification = vex.open({
  message: 'This is a high priority notification',
  onClose: () => {
    console.log('Notification closed');
  }
});

vex.activeElement = notification;

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

Настройка горячих клавиш для уведомлений

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

document.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && vex.activeElement) {
    // Выполнение действия для текущего уведомления
    vex.activeElement.close();
    console.log('Notification confirmed');
  }
});

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

Учет доступности

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

Для этого Vex.js интегрирует подходы для обеспечения доступности уведомлений с клавиатуры, например, добавляя атрибуты ARIA и гарантируя, что все уведомления могут быть закрыты с помощью клавиш, без использования мыши.

const notification = vex.open({
  message: 'Press Esc to close this notification',
  close: () => {
    console.log('Notification closed');
  },
  aria: {
    role: 'alert',
    label: 'Important notification'
  }
});

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

Заключение

Поддержка клавиатурной навигации в Vex.js открывает множество возможностей для улучшения взаимодействия с уведомлениями. Внедрение клавиш для навигации между уведомлениями, их закрытия и взаимодействия с ними с использованием клавиатуры повышает доступность и удобство работы с веб-приложениями.

Оглавление