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

Подключение через npm

Для использования библиотеки ally.js в проекте на JavaScript рекомендуется установка через npm. Выполняется команда:

npm install ally.js

После установки можно импортировать необходимые функции или весь модуль в проекте. Например, при использовании ES6-модулей:

import ally from 'ally.js';

Или импорт отдельных методов:

import { queryTabbable, isFocusable } from 'ally.js';

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

Подключение через CDN

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

После этого все функции библиотеки становятся доступными через глобальный объект ally. Например:

const tabbableElements = ally.query.tabbable();

Основные модули и функции

Библиотека предоставляет несколько ключевых функций для работы с доступностью элементов на странице:

  • query.tabable([context]) — возвращает массив всех элементов, доступных для навигации через клавишу Tab.
  • is.focusable(element) — проверяет, можно ли сфокусировать указанный элемент.
  • is.tabindexFocusable(element) — проверяет, можно ли сфокусировать элемент с помощью атрибута tabindex.
  • nextFocus([options]) — позволяет программно перемещать фокус на следующий элемент.
  • previousFocus([options]) — перемещает фокус на предыдущий элемент.

Каждая функция принимает контекст (корневой элемент DOM) и дополнительные опции, что позволяет точно контролировать выборку элементов.

Интеграция с современными фреймворками

Для React, Vue или Svelte подключение ally.js не отличается от стандартного подхода через npm. Например, в React:

import React, { useEffect } from 'react';
import ally from 'ally.js';

const FocusExample = () => {
  useEffect(() => {
    const tabbable = ally.query.tabbable();
    console.log(tabbable);
  }, []);

  return (
    

      
      
    

  );
};

export default FocusExample;

В Vue аналогично:

Подключение в старых браузерах

Библиотека ally.js совместима с современными браузерами, но для поддержки устаревших версий Internet Explorer рекомендуется подключать полифиллы для методов Element.matches и Array.from. Пример:

Настройка сборщика

При использовании Webpack, Rollup или Vite рекомендуется проверять tree-shaking, если подключаются отдельные функции:

import { query, is } from 'ally.js';

const tabbableElements = query.tabbable();
const focusableCheck = is.focusable(tabbableElements[0]);

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

Проверка подключения

Для проверки корректности подключения можно вызвать базовую функцию в консоли:

console.log(ally.query.tabbable());

Если возвращается массив элементов, библиотека подключена корректно и готова к работе.

Оглавление