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

Tippy.js предоставляет богатый функционал для управления всплывающими подсказками и тултипами, включая поддержку клавиатурной навигации. Это критически важно для доступности веб-приложений (Accessibility, A11y), когда пользователи взаимодействуют с интерфейсом исключительно через клавиатуру.

Фокусировка на элементе и привязка тултипа

По умолчанию Tippy.js привязывает всплывающую подсказку к определённому DOM-элементу. Чтобы тултип появлялся при фокусе с клавиатуры, необходимо использовать опцию trigger: 'focus':

tippy('#button', {
  content: 'Подсказка при фокусе',
  trigger: 'focus',
});
  • trigger: 'focus' — позволяет всплывать тултипу при переходе на элемент через Tab.
  • Можно комбинировать с другими триггерами, например 'mouseenter focus', если нужна поддержка как мыши, так и клавиатуры.

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

Tippy.js поддерживает интерактивные тултипы, внутри которых пользователь может перемещаться с помощью клавиатуры:

tippy('#menu', {
  content: '<button>Кнопка 1</button><button>Кнопка 2</button>',
  allowHTML: true,
  interactive: true,
  trigger: 'click',
});
  • interactive: true — позволяет удерживать тултип открытым при взаимодействии с его содержимым.
  • В сочетании с клавиатурой важно учитывать Tab-циклы, чтобы фокус не терялся вне тултипа. Обычно для этого используется focus trap.

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

Для кастомного управления тултипами можно использовать методы экземпляра Tippy.js:

const instance = tippy('#icon', {
  content: 'Интерактивная подсказка',
});

const button = document.querySelector('#open-tooltip');

button.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    instance.show();
  }
  if (e.key === 'Escape') {
    instance.hide();
  }
});
  • instance.show() и instance.hide() позволяют полностью контролировать видимость через Enter, Space и Escape.
  • Особенно полезно для кастомных виджетов, где стандартный фокус не подходит.

Управление последовательностью с Tab и Shift+Tab

При наличии нескольких интерактивных тултипов важно поддерживать корректную навигацию:

  1. Tab — перемещает фокус на следующий интерактивный элемент.
  2. Shift+Tab — возвращает фокус на предыдущий элемент.
  3. Для элементов внутри тултипа можно использовать tabindex="0" на кнопках или ссылках, чтобы их можно было достигнуть с клавиатуры.

Пример:

<div id="tooltip-container" tabindex="0">
  <button>Опция 1</button>
  <button>Опция 2</button>
</div>
tippy('#trigger', {
  content: document.querySelector('#tooltip-container'),
  interactive: true,
});
  • Установка tabindex="0" на контейнер позволяет удерживать фокус внутри тултипа.
  • Можно интегрировать с библиотекой focus-trap для более сложной логики, когда фокус не должен покидать тултип до закрытия.

Горячие клавиши для комплексных интерфейсов

Для сложных UI-компонентов можно назначать клавиши навигации для открытия тултипов, переключения между их элементами и закрытия:

document.addEventListener('keydown', (e) => {
  switch(e.key) {
    case 'ArrowDown':
      // Переместить фокус на следующий элемент в тултипе
      break;
    case 'ArrowUp':
      // Переместить фокус на предыдущий элемент
      break;
    case 'Escape':
      // Закрыть тултип
      instance.hide();
      break;
  }
});
  • Такой подход делает тултипы полноценными компонентами интерфейса, управляемыми полностью с клавиатуры.
  • Важная практика — всегда проверять, что фокус возвращается на исходный элемент после закрытия тултипа, чтобы пользователь не терял контекст.

Поддержка ARIA и доступность

Для корректной работы клавиатурной навигации необходимо использовать ARIA-атрибуты:

tippy('#info', {
  content: 'Информация о кнопке',
  trigger: 'focus',
  aria: {
    content: 'describedby',
  },
});
  • aria: { content: 'describedby' } автоматически связывает тултип с элементом.
  • Это обеспечивает чтение подсказки скринридерами при фокусе на элементе.

Итоговые рекомендации по навигации с клавиатуры

  • Использовать trigger: 'focus' для появления подсказки при фокусе.
  • Включать interactive: true для интерактивных элементов внутри тултипа.
  • Контролировать открытие и закрытие через методы show() и hide().
  • Обеспечить логичную последовательность фокусировки через tabindex и обработку Tab/Shift+Tab.
  • Использовать ARIA-атрибуты для совместимости с ассистивными технологиями.

Правильная комбинация этих техник позволяет создавать доступные и управляемые с клавиатуры тултипы в любом веб-приложении с Tippy.js.

Оглавление