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

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

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

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

Переключение между элементами с помощью клавиши Tab

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

Пример:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Вы не сможете отменить это действие!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет',
}).then((result) => {
  if (result.isConfirmed) {
    // Действия при подтверждении
  }
});

В этом примере при открытии окна пользователь может использовать клавишу Tab для переключения между кнопками «Да» и «Нет». Если добавить дополнительные поля ввода или другие элементы, навигация будет происходить по этим элементам по тому же принципу.

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

Чтобы фокус был правильно установлен на нужный элемент, можно использовать параметр focusConfirm или focusCancel. Эти параметры позволяют задать, какой элемент будет активирован первым при открытии окна.

  • focusConfirm: Устанавливает фокус на кнопку подтверждения.
  • focusCancel: Устанавливает фокус на кнопку отмены.
Swal.fire({
  title: 'Настройки сохранены',
  icon: 'success',
  showCancelButton: true,
  confirmButtonText: 'Ок',
  cancelButtonText: 'Отмена',
  focusConfirm: false,
  focusCancel: true,
}).then((result) => {
  if (result.isDismissed) {
    // Действия при закрытии окна
  }
});

В этом примере фокус изначально будет установлен на кнопку «Отмена», и пользователь может быстро использовать клавишу Enter или Space, чтобы закрыть окно.

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

Кроме стандартных клавиш Tab, Enter, и Escape, в некоторых случаях требуется настроить дополнительные действия на другие клавиши. Например, можно обрабатывать клавишу ArrowUp и ArrowDown для навигации по списку элементов в модальном окне или для выполнения специфичных действий при нажатии определенных клавиш.

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

Swal.fire({
  title: 'Выберите опцию',
  html: `
    <select id="options">
      <option value="1">Опция 1</option>
      <option value="2">Опция 2</option>
      <option value="3">Опция 3</option>
    </select>
  `,
  focusConfirm: false,
}).then((result) => {
  // Обработка результата
});

document.addEventListener('keydown', function(event) {
  const selectElement = document.getElementById('options');
  if (event.key === 'ArrowDown') {
    selectElement.selectedIndex = Math.min(selectElement.selectedIndex + 1, selectElement.options.length - 1);
  } else if (event.key === 'ArrowUp') {
    selectElement.selectedIndex = Math.max(selectElement.selectedIndex - 1, 0);
  }
});

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

Заключение

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

Оглавление