Получение списка всех ролей

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

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

Aria-query распространяется через npm и интегрируется в любые проекты на Node.js или фронтенд-приложения с использованием сборщиков модулей:

npm install aria-query

В JavaScript-модуле подключение выглядит следующим образом:

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

Здесь roles — это Map, где ключами являются названия ARIA-ролей, а значениями — объекты с детальной информацией о ролях.

Структура объекта ролей

Каждая запись в roles содержит следующие ключи:

  • name — строковое имя роли, например "button".
  • abstract — логическое значение, указывающее, является ли роль абстрактной (не предназначенной для прямого использования).
  • requiredProps — объект с обязательными атрибутами для корректного использования роли.
  • props — объект с описанием всех поддерживаемых ARIA-свойств и их типов.
  • superClass — массив, показывающий иерархию ролей (например, роль "menuitem" наследуется от "command").

Пример структуры роли:

roles.get('button')

Выведет объект вида:

{
  "abstract": false,
  "baseConcepts": [],
  "requiredProps": {},
  "props": {
    "aria-pressed": "tristate"
  },
  "superClass": [["command"]]
}

Перебор всех ролей

Для получения списка всех ролей удобно использовать методы Map. Пример перебора:

for (const [roleName, roleDefinition] of roles) {
  console.log(`Роль: ${roleName}`);
  console.log(`Абстрактная: ${roleDefinition.abstract}`);
  console.log(`Обязательные свойства:`, Object.keys(roleDefinition.requiredProps));
  console.log(`Все свойства:`, Object.keys(roleDefinition.props));
  console.log(`Наследует от:`, roleDefinition.superClass.map(sc => sc.join(', ')).join('; '));
  console.log('------------------------------------');
}

Этот код выводит полный перечень ролей, включая их характеристики, обязательные свойства и иерархию.

Фильтрация и получение только используемых ролей

В спецификации ARIA существуют абстрактные роли, которые предназначены только для наследования. Для практического применения часто требуется исключить их:

const concreteRoles = Array.from(roles)
  .filter(([name, definition]) => !definition.abstract)
  .map(([name]) => name);

console.log(concreteRoles);

В результате формируется массив строк, содержащий только роли, которые можно использовать напрямую в HTML.

Интеграция с проверкой атрибутов

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

function validateRoleAttributes(roleName, elementAttributes) {
  const role = roles.get(roleName);
  if (!role) return false;

  const requiredProps = Object.keys(role.requiredProps);
  return requiredProps.every(prop => prop in elementAttributes);
}

// Пример использования
const isValid = validateRoleAttributes('button', { 'aria-pressed': 'false' });
console.log(isValid); // true, если все обязательные свойства присутствуют

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

Советы по работе с ролями

  • Использовать roles.keys() для быстрого получения списка всех названий ролей.
  • Проверять abstract перед использованием роли в DOM.
  • Изучать superClass для понимания, какие свойства могут быть унаследованы.
  • Комбинировать Aria-query с библиотеками тестирования (например, Jest или Testing Library) для автоматической проверки доступности компонентов.

Пример вывода всех ролей в виде массива объектов

const allRolesArray = Array.from(roles, ([name, definition]) => ({
  name,
  abstract: definition.abstract,
  requiredProps: Object.keys(definition.requiredProps),
  props: Object.keys(definition.props),
  superClass: definition.superClass.map(sc => sc.join(', '))
}));

console.log(allRolesArray);

Такой подход облегчает последующую обработку данных, создание документации по доступности и динамическое построение UI-компонентов с поддержкой ARIA.

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

Оглавление