Tree-shaking и side effects

Библиотека Aria-query предназначена для работы с ARIA-ролями, их свойствами и состояниями. Она предоставляет структурированные данные о поддерживаемых элементах, отношениях между ролями и допустимых атрибутах, что позволяет создавать доступные интерфейсы и проверять корректность разметки.

В основе Aria-query лежат три основных объекта:

  1. Roles – описывает все доступные ARIA-роли, их свойства и состояния.
  2. ElementRoles – связывает HTML-элементы с ролями, которые они могут принимать.
  3. RoleKeys – список ключевых ролей для быстрого поиска и фильтрации.

Каждая роль содержит несколько ключевых характеристик:

  • abstract – указывает, является ли роль абстрактной (не используется напрямую в HTML).
  • superClass – массив ролей, от которых данная роль наследует свойства.
  • props – список атрибутов и состояний, которые поддерживает роль.
  • name – имя роли.
import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(buttonRole.superClass); // ['widget', 'command']
console.log(buttonRole.props);      // Map { 'aria-disabled' => {} }

ElementRoles и соответствие HTML

ElementRoles обеспечивает сопоставление HTML-элементов с ARIA-ролями, включая условия применения. Каждая запись содержит:

  • name – имя HTML-элемента (div, span, button).
  • attributes – набор атрибутов, определяющих применение роли.
  • implicitRoles – роли, которые браузер назначает элементу по умолчанию.

Пример использования:

import { elementRoles } from 'aria-query';

const buttonElements = elementRoles.get('button');
console.log(buttonElements.attributes); // Map { 'type' => ['submit', 'button', 'reset'] }

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

Методы и работа с коллекциями

Все коллекции в Aria-query реализованы через Map, что обеспечивает быстрый поиск и фильтрацию. Основные методы:

  • get(key) – получение элемента по имени роли или HTML-тега.
  • has(key) – проверка существования роли или элемента.
  • keys() – возвращает итератор по ключам.
  • entries() – возвращает пары ключ-значение.

Использование этих методов позволяет обходить данные с сохранением производительности и удобством работы с массивами:

for (const [roleName, roleData] of roles.entries()) {
  if (!roleData.abstract) {
    console.log(roleName, roleData.superClass);
  }
}

Свойства и состояния ролей

Aria-query детализирует поддерживаемые ARIA-свойства и состояния. Основные моменты:

  • Свойства бывают обязательными и необязательными, что отражено в объекте props.
  • Каждое свойство хранит допустимые значения и их тип (string, boolean, token).
  • Наследование через superClass позволяет автоматически учитывать свойства родительских ролей.

Пример проверки поддерживаемых свойств:

const textbox = roles.get('textbox');
for (const [prop, meta] of textbox.props.entries()) {
  console.log(prop, meta.type); // 'aria-multiline', 'boolean'
}

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

Aria-query отлично интегрируется с TypeScript благодаря строго типизированным коллекциям. Map с ролями и элементами позволяет получить автодополнение и проверку типов, минимизируя ошибки при работе с ARIA-атрибутами.

import { roles } from 'aria-query';

const slider = roles.get('slider');
if (slider && slider.props.has('aria-valuemin')) {
  // TypeScript гарантирует, что ключ существует в коллекции
}

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

Aria-query активно используется в тестах для проверок:

  • валидности HTML-элементов в соответствии с ARIA-ролями,
  • корректного использования атрибутов aria-*,
  • предотвращения конфликтов между явными и неявными ролями.

Это особенно важно для библиотек UI, таких как React или Vue, где компоненты динамически назначают роли и атрибуты.

Оптимизация при сборке: tree-shaking и side effects

Благодаря структуре Aria-query с именованными экспортами, можно эффективно использовать tree-shaking. Импорт конкретных объектов минимизирует размер бандла:

import { roles } from 'aria-query'; // поддерживает tree-shaking

Важно учитывать, что Aria-query не содержит побочных эффектов при импорте (side effects free). Это позволяет безопасно исключать неиспользуемые части при сборке через Webpack, Rollup или Vite.

  • Tree-shaking удаляет неиспользуемые роли и элементы из итогового бандла.
  • Side effects free гарантирует, что импорт коллекций не выполняет код автоматически, что критично для больших проектов с множеством UI-компонентов.

Эта структура делает Aria-query мощным инструментом для анализа, проверки и генерации доступного HTML, позволяя создавать надежные интерфейсы с полной поддержкой ARIA.

Оглавление