Установка и подключение

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

Установка через npm

Самый распространённый способ подключения — установка через npm. Для этого используется стандартная команда:

npm install tabbable

После успешной установки библиотека появляется в папке node_modules, и её можно импортировать в проект.

Подключение в коде

В проектах на ES6 можно подключить библиотеку через import:

import { tabbable } from 'tabbable';

Для CommonJS используется require:

const { tabbable } = require('tabbable');

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

Использование с CDN

Для проектов без сборщика модулей можно подключить библиотеку через CDN. Пример подключения:

<script src="https://cdn.jsdelivr.net/npm/tabbable@6.1.2/dist/index.umd.min.js"></script>
<script>
  const tabbableElements = tabbable(document.body);
  console.log(tabbableElements);
</script>

В этом случае tabbable становится глобальной функцией, доступной в скриптах на странице.

Типы экспорта и совместимость

Библиотека предоставляет named export tabbable, что позволяет импортировать только необходимую функцию, снижая размер бандла. Полная совместимость обеспечена с современными браузерами, поддерживающими стандартные методы DOM, такие как querySelectorAll, matches, getAttribute, а также с Node.js для серверной генерации интерфейсов.

Проверка установки

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

const focusable = tabbable(document.querySelector('#app'));
console.log(focusable); // массив доступных для табуляции элементов

Если массив содержит ожидаемые элементы (input, button, a[href] и др.), библиотека установлена и подключена правильно.

Основные моменты при подключении

  • Совместимость модулей: выбирать import или require в зависимости от конфигурации сборщика.
  • Подключение через CDN: удобно для простых страниц, но требует контроля версии.
  • Проверка работы: вызов tabbable(container) позволяет убедиться, что библиотека функционирует корректно.
  • Минимизация: использовать named export позволяет не загружать лишние функции.

Установка и подключение — фундаментальная часть работы с Tabbable. Правильное подключение обеспечивает корректное определение фокусируемых элементов и дальнейшее построение доступного интерфейса.

Оглавление