Получение всех атрибутов

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

Структура данных Aria-query

Aria-query экспортирует несколько ключевых структур:

  • aria — словарь всех ARIA-атрибутов с указанием их типов, допустимых значений и контекста использования.
  • roles — карта ролей, каждая из которых содержит список поддерживаемых атрибутов.
  • roleValues — информация о допустимых значениях для каждой роли, включая abstract, widget, document и т.д.

Пример импорта:

import { aria, roles } from 'aria-query';

aria хранит атрибуты как объекты с ключами:

  • name — имя атрибута (aria-label, aria-hidden и т.д.).
  • type — тип значения (string, boolean, tristate, idref, idlist).
  • values — если атрибут принимает фиксированный набор значений, здесь хранится массив допустимых значений.
  • defaultValue — значение по умолчанию, если оно определено.

roles представляют собой карту, где ключ — это имя роли, а значение — объект с полями:

  • attributes — массив объектов атрибутов, поддерживаемых данной ролью.
  • childrenPresentational — массив ролей детей, которые могут быть скрытыми от accessibility tree.
  • superClass — массив ролей, от которых данная роль наследует атрибуты.

Получение всех атрибутов для конкретной роли

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

Пример получения всех атрибутов для роли button:

import { roles } from 'aria-query';

const buttonRole = roles.get('button');

console.log('Атрибуты роли button:');
for (const [attr, value] of buttonRole.attributes) {
  console.log(attr, value);
}

attributes хранится в виде Map, где ключ — имя атрибута, а значение — объект с деталями (type, values, required).

Важно: Атрибуты включают как глобальные ARIA-атрибуты (aria-hidden, aria-label), так и специфичные для данной роли (aria-pressed для кнопки типа toggle).

Получение глобальных атрибутов

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

import { aria } from 'aria-query';

const globalAttrs = Array.from(aria)
  .filter(([name, data]) => data.global)
  .map(([name]) => name);

console.log('Глобальные ARIA-атрибуты:', globalAttrs);

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

Слияние атрибутов с учётом наследования

Некоторые роли наследуют атрибуты от родительских ролей (superClass). Для получения полного списка атрибутов необходимо учитывать цепочку наследования:

function getAllAttributesForRole(roleName) {
  const role = roles.get(roleName);
  const attrs = new Map();

  if (role.superClass) {
    role.superClass.forEach(superRoleName => {
      const superAttrs = getAllAttributesForRole(superRoleName);
      superAttrs.forEach((value, key) => attrs.set(key, value));
    });
  }

  role.attributes.forEach((value, key) => attrs.set(key, value));
  return attrs;
}

const buttonAttrs = getAllAttributesForRole('button');
console.log('Все атрибуты роли button:', Array.from(buttonAttrs.keys()));

Этот метод гарантирует, что учитываются как специфичные, так и унаследованные атрибуты.

Работа с типами и значениями атрибутов

Каждый атрибут имеет тип, определяющий допустимые значения. Основные типы:

  • string — любая текстовая строка.
  • boolean — true или false.
  • tristate — true, false или "mixed".
  • token — один элемент из фиксированного набора значений.
  • tokenlist — список элементов из фиксированного набора.
  • idref — ссылка на элемент по id.
  • idlist — список идентификаторов элементов.

Пример фильтрации атрибутов типа boolean:

const booleanAttrs = Array.from(buttonAttrs)
  .filter(([name, data]) => data.type === 'boolean')
  .map(([name]) => name);

console.log('Boolean-атрибуты для button:', booleanAttrs);

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

Практическое использование

  1. Валидация атрибутов — проверка, что на элементе присутствуют только допустимые ARIA-атрибуты для его роли.
  2. Генерация компонентов — создание UI-библиотек с динамическим назначением ARIA-атрибутов.
  3. Анализ доступности — построение инструментов для аудита accessibility в приложениях.
  4. Автоматическое наследование — при изменении роли компонента можно автоматически добавлять все унаследованные атрибуты.

Советы по оптимизации

  • Использовать Map для хранения атрибутов, чтобы избежать дублирования при объединении наследуемых свойств.
  • Сохранять глобальные атрибуты отдельно, чтобы добавлять их к любой роли без повторной фильтрации.
  • При генерации UI проверять типы атрибутов и значения на соответствие спецификации ARIA, чтобы избежать ошибок доступности.

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

Оглавление