Работа с наборами элементов

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

Наборы ролей и их использование

В aria-query ключевым понятием является роль (role). Каждая роль описана объектом с набором свойств:

name: имя роли, например "button".
superClass: массив базовых ролей, от которых наследуются свойства.
requiredProps: обязательные атрибуты ARIA для корректной работы.
props: все допустимые свойства и состояния.

Пример получения всех ролей:

import { roles } from 'aria-query';

for (const [roleName, roleDefinition] of roles) {
  console.log(roleName, roleDefinition.requiredProps);
}

Это позволяет быстро проверять, какие атрибуты нужны для конкретной роли и какие элементы HTML могут её поддерживать.

Наборы элементов и их соответствие ролям

Aria-query содержит карту соответствия между HTML-элементами и ARIA-ролями. Главные структуры:

elements — карта, где ключи — HTML-теги, а значения — объекты с допустимыми ролями.
elementRoles — обратная карта: ключи — роли, значения — множество элементов, которым можно присвоить эту роль.

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

import { elementRoles } from 'aria-query';

const buttonElements = elementRoles.get('button');
console.log(buttonElements); // Set { 'button', 'a', 'input' }

Это позволяет проверять соответствие элементов и ролей, предотвращая ошибки в атрибутах ARIA.

Свойства и состояния ARIA

Каждая роль имеет набор свойств и состояний, которые могут быть использованы для управления доступностью:

ARIA-свойства (aria-*) описываются через props.
Состояния — свойства, значения которых могут динамически меняться, например aria-expanded или aria-checked.

Пример проверки допустимых свойств для роли:

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(Object.keys(buttonRole.props));
// ['aria-pressed', 'aria-expanded', 'aria-label', ...]

С помощью этих данных можно строить валидаторы ARIA и обеспечивать соответствие стандартам доступности.

Проверка валидности элементов

Для проверки соответствия элемента его роли используется сочетание elementRoles и roles. Алгоритм:

Получить роль элемента.
Проверить, входит ли тег в множество разрешённых элементов для этой роли.
Проверить наличие обязательных свойств.

Пример функции:

function validateElementRole(tagName, roleName, attributes) {
  const validElements = elementRoles.get(roleName);
  if (!validElements || !validElements.has(tagName)) {
    return false;
  }

  const roleDefinition = roles.get(roleName);
  for (const prop of Object.keys(roleDefinition.requiredProps)) {
    if (!(prop in attributes)) return false;
  }
  return true;
}

console.log(validateElementRole('button', 'button', { 'aria-label': 'Save' })); // true

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

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

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

Благодаря структурам roles и elementRoles проверка становится простой и надёжной.

Расширение и модификация наборов

Хотя aria-query предоставляет стандартные наборы ролей и элементов, их можно расширять:

import { roles } from 'aria-query';

// Клонирование роли и добавление нового свойства
const customRoles = new Map(roles);
customRoles.set('custom-button', {
  ...roles.get('button'),
  props: {
    ...roles.get('button').props,
    'aria-custom': {}
  }
});

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