dom Map

Библиотека aria-query предоставляет мощные инструменты для работы с ARIA-атрибутами и ролями в DOM. Она часто используется для валидации доступности компонентов, анализа структуры интерфейса и создания инструментов, ориентированных на доступность. Центральным элементом библиотеки является DOM Map, который связывает роли, элементы и их атрибуты.

Основные сущности aria-query

Библиотека предоставляет несколько ключевых коллекций:

  1. elementRoles – карта HTML-элементов и их возможных ARIA-ролей. Каждое имя элемента сопоставляется с набором ролей.
  2. roleElements – обратная карта: для каждой роли указаны допустимые HTML-элементы.
  3. roles – полный набор ARIA-ролей с описанием их свойств и разрешённых состояний.
  4. attributes – описание ARIA-атрибутов и их допустимых значений.

Эти структуры реализованы через Map и Set, что обеспечивает быстрый доступ и проверку.

elementRoles и поиск ролей

import { elementRoles } from 'aria-query';

const buttonRoles = elementRoles.get('button');
console.log(buttonRoles); // Set { 'button', 'menuitem', ... }

elementRoles позволяет определить, какие роли может иметь конкретный HTML-элемент. Например, элемент <div> может быть использован с ролью button, если требуется кастомная кнопка.

Особенности:

  • Для элементов с фиксированными ролями (<button>) Set содержит только стандартную роль.
  • Для семантически нейтральных элементов (<div>, <span>) список ролей обширен.
  • Коллекция учитывает глобальные и локальные роли.

roleElements и обратное соответствие

import { roleElements } from 'aria-query';

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

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

Применение:

  • Валидация структуры интерфейса.
  • Автоматическая генерация ARIA-атрибутов для кастомных компонентов.
  • Инструменты тестирования доступности.

Роли и их свойства

Коллекция roles содержит объекты с описанием:

  • name – имя роли (button, checkbox, dialog).
  • superClass – список родительских ролей.
  • requiredProps – обязательные ARIA-атрибуты.
  • props – допустимые дополнительные атрибуты.
  • abstract – флаг, определяющий абстрактные роли, которые не используются напрямую в DOM.

Пример проверки обязательного атрибута:

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(buttonRole.requiredProps); // Set { 'aria-pressed' } (если применимо)

Работа с атрибутами

Коллекция attributes описывает ARIA-атрибуты, их типы и допустимые значения. Каждый атрибут представлен объектом с полями:

  • type – тип данных (boolean, tristate, token, string).
  • values – допустимые значения для token-атрибутов.
  • global – флаг, указывающий, что атрибут может использоваться с любым элементом.

Пример проверки:

import { attributes } from 'aria-query';

const ariaHidden = attributes.get('aria-hidden');
console.log(ariaHidden.type); // boolean
console.log(ariaHidden.global); // true

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

  1. Валидация компонентов
import { elementRoles } from 'aria-query';

function validateRole(element) {
  const tagName = element.tagName.toLowerCase();
  const role = element.getAttribute('role');
  const validRoles = elementRoles.get(tagName);
  return validRoles && validRoles.has(role);
}
  1. Автоматическое назначение роли

Для кастомного <div> можно выбрать допустимую роль:

const divRoles = elementRoles.get('div'); // Set { 'button', 'checkbox', ... }
element.setAttribute('role', [...divRoles][0]); // назначаем первую доступную роль
  1. Генерация подсказок для атрибутов
import { roles } from 'aria-query';

const checkboxProps = roles.get('checkbox').props;
console.log([...checkboxProps]); // список возможных ARIA-атрибутов

Производительность и структура

Все коллекции immutable и построены на Map и Set, что обеспечивает:

  • Быстрый поиск (O(1) для большинства операций).
  • Лёгкую интеграцию с инструментами линтинга и тестирования.
  • Возможность объединять данные для кастомных проверок.

Советы по интеграции

  • Использовать aria-query совместно с eslint-plugin-jsx-a11y для React-проектов.
  • Строить динамические таблицы ролей и атрибутов на основе elementRoles и roles.
  • Проверять соответствие ARIA-атрибутов с коллекцией attributes при генерации интерфейсов.

DOM Map библиотеки aria-query предоставляет точный, структурированный и быстрый способ работы с ARIA-данными, позволяя создавать доступные, стандартизированные компоненты и инструменты для валидации интерфейсов.

Оглавление