Связь с eslint-plugin-jsx-a11y

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

В основе библиотеки лежат два ключевых объекта: roles и properties.

  • roles — содержит информацию о каждой ARIA-роли, включая её поддерживаемые свойства, разрешённые дочерние элементы и поведение в дереве DOM.
  • properties — описывает ARIA-свойства, их допустимые значения, типы данных и правила применения.

Эти структуры позволяют выполнять статический анализ компонентов и выявлять ошибки, связанные с некорректным использованием ARIA.

Интеграция с eslint-plugin-jsx-a11y

Библиотека Aria-query активно используется в плагине eslint-plugin-jsx-a11y для проверки JSX-компонентов на соответствие стандартам доступности. Связь осуществляется следующим образом:

  1. Проверка ролей: ESLint получает список ролей из aria-query/roles и сопоставляет их с компонентами. Плагин выявляет:

    • использование недопустимых или устаревших ARIA-ролей;
    • несоответствие роли элементу (например, <div> с ролью button без клавиатурной поддержки).

  2. Валидация свойств: Через aria-query/properties плагин проверяет ARIA-атрибуты:

    • соответствие типов данных (например, aria-hidden должно быть boolean);
    • правильность комбинаций атрибутов с ролью (некоторые свойства поддерживаются только для конкретных ролей).

  3. Структурные ограничения: С помощью данных о дочерних элементах и поддерживаемых ролях ESLint может предупреждать о нарушении логики DOM:

    • недопустимые вложенные элементы;
    • конфликтующие роли в пределах одного родителя.

Применение в правилах плагина

Каждое правило eslint-plugin-jsx-a11y использует Aria-query как справочник для проверки. Примеры правил:

  • role-has-required-aria-props: проверяет, что элемент с определённой ролью содержит все обязательные ARIA-свойства.
  • aria-props: контролирует, что атрибуты ARIA применяются только к элементам, которые их поддерживают.
  • aria-unsupported-elements: выявляет элементы, которые не могут иметь ARIA-атрибуты согласно спецификации.

Данные Aria-query позволяют реализовать точную статическую проверку без необходимости парсинга спецификаций ARIA вручную.

Пример использования данных Aria-query

const { roles, properties } = require('aria-query');

// Получение всех допустимых ролей
const allRoles = Array.from(roles.keys());
console.log(allRoles); // ['button', 'checkbox', 'dialog', ...]

// Проверка поддерживаемых свойств для роли button
const buttonRole = roles.get('button');
console.log(buttonRole.requiredProps); // ['aria-pressed']
console.log(buttonRole.props); // все допустимые ARIA-свойства для button

// Проверка типа значения свойства
const ariaHidden = properties.get('aria-hidden');
console.log(ariaHidden.type); // 'boolean'

Этот подход обеспечивает точное соответствие спецификации WAI-ARIA и является основой для корректного анализа в eslint-plugin-jsx-a11y.

Поддержка обновлений ARIA

Aria-query регулярно обновляется в соответствии с последними спецификациями WAI-ARIA. Это гарантирует, что eslint-plugin-jsx-a11y проверяет компоненты по актуальным правилам доступности, включая новые роли, свойства и изменения допустимых комбинаций.

Поддержка версий и корректное обновление данных особенно важно при разработке масштабных React-приложений, где ручная проверка ARIA становится непрактичной.

Преимущества использования Aria-query

  • Централизованная база данных ARIA: исключает необходимость хранить локальные списки ролей и свойств.
  • Совместимость с ESLint: облегчает интеграцию с проверкой JSX и React-компонентов.
  • Уменьшение ошибок доступности: автоматическая валидация предотвращает распространённые проблемы с ARIA.
  • Обновляемость: быстрое внедрение новых стандартов без переписывания правил.

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

Оглавление