Библиотека Aria-query предназначена для работы с семантическими и ARIA-атрибутами в контексте веб-разработки. Она позволяет получать детальную информацию о ролях, состояниях и свойствах элементов интерфейса, что особенно важно при создании доступных приложений. Основная архитектура библиотеки строится вокруг трех ключевых сущностей: roles, properties и elementRoles.
rolesМассив или объект roles содержит описание всех
ARIA-ролей, определенных стандартом WAI-ARIA. Каждая роль включает:
button, checkbox).Пример использования:
import { roles } from 'aria-query';
const buttonRole = roles.get('button');
console.log(buttonRole.props['aria-pressed']); // выводит информацию о свойстве aria-pressed
Ключевой момент: roles — это Map, что
обеспечивает быстрый доступ к любой роли по её имени.
elementRoleselementRoles сопоставляет HTML-элементы с ARIA-ролями,
которые они могут принимать по умолчанию или с дополнительными
атрибутами. Это позволяет проверять соответствие семантики HTML и
ARIA-ролей.
Структура объекта:
div,
button, ul и др.).Пример:
import { elementRoles } from 'aria-query';
const buttonElements = elementRoles.get('button');
console.log(buttonElements.has('button')); // true
console.log(buttonElements.has('menu')); // false
Важно: библиотека учитывает ARIA в контексте HTML5, что делает проверки валидными для современных веб-приложений.
propertiesproperties содержит описание всех ARIA-свойств и
состояний (aria- атрибутов). Для каждого свойства
указано:
aria-hidden,
aria-checked и др.).boolean,
tristate, string, idref,
token и т.д.).Пример:
import { properties } from 'aria-query';
const hiddenProp = properties.get('aria-hidden');
console.log(hiddenProp.type); // 'boolean'
Особенности: все свойства представлены через Map, что упрощает проверку типов и валидность значений при динамическом присвоении атрибутов.
Aria-query предоставляет набор утилит для работы с ролями и свойствами:
roles.get(roleName) — получение
объекта роли по имени.elementRoles.get(elementName) —
получение набора ролей для HTML-элемента.properties.get(propertyName) —
получение информации о конкретном ARIA-свойстве.roles.keys(),
properties.keys(),
elementRoles.keys() — перечисление всех
доступных ключей.Дополнительно возможна фильтрация:
// Получение всех интерактивных ролей
const interactiveRoles = Array.from(roles.values()).filter(role => role.props['aria-disabled']);
Использование Aria-query позволяет:
Библиотека действует как единственный источник правды по ARIA, облегчая построение доступных веб-компонентов и интеграцию с тестовыми фреймворками.