Проверка владеющих элементов

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

В центре внимания библиотеки находятся следующие ключевые сущности:

  • Roles — набор предопределённых ARIA-ролей (button, checkbox, region и т.д.).
  • Attributes — ARIA-атрибуты, которые могут использоваться в этих ролях (aria-label, aria-hidden, aria-checked).
  • Dom Elements — HTML-элементы, к которым могут быть применены роли и атрибуты.

Импорт и базовое использование

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

import { roles, elements, elementRoles } from 'aria-query';
  • roles — карта всех ARIA-ролей с их свойствами и ограничениями.
  • elements — набор HTML-элементов, поддерживающих ARIA-атрибуты.
  • elementRoles — сопоставление между HTML-элементами и ARIA-ролями, которые они могут выполнять.

Пример проверки, может ли <button> иметь роль button:

import { elementRoles } from 'aria-query';

const buttonRoles = elementRoles.get('button');
console.log(buttonRoles.has('button')); // true

Проверка владеющих элементов (Owned Elements)

В ARIA спецификации существует понятие владеющих элементов (owned elements) — дочерних компонентов, которые управляются или логически принадлежат родительской роли. Например, list владеет listitem, а grid владеет row.

Aria-query предоставляет возможность программно проверять такие отношения через свойства ролей. Каждая роль имеет поле ownedElements, содержащее список ролей дочерних элементов, которые она может содержать.

import { roles } from 'aria-query';

const listRole = roles.get('list');
console.log(listRole.ownedElements); // Set { 'listitem' }

Для валидации структуры DOM можно пройтись по элементам и сопоставить их роли с ожидаемыми:

function validateOwnedElements(parentRoleName, childRoleName) {
  const parentRole = roles.get(parentRoleName);
  return parentRole.ownedElements.has(childRoleName);
}

console.log(validateOwnedElements('list', 'listitem')); // true
console.log(validateOwnedElements('list', 'button'));   // false

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

Связь с элементами HTML

Сопоставление ролей и конкретных HTML-элементов осуществляется через elementRoles. Эта структура хранит все роли, которые можно назначить конкретному элементу, включая дефолтные и разрешённые через role атрибут.

import { elementRoles } from 'aria-query';

const ulRoles = elementRoles.get('ul');
console.log(ulRoles); // Set { 'list' }

Чтобы проверить, можно ли вложить конкретный элемент в родительский:

function canNest(parentTag, childTag) {
  const parentRoles = elementRoles.get(parentTag);
  const childRoles = elementRoles.get(childTag);

  for (let parentRole of parentRoles) {
    const owned = roles.get(parentRole).ownedElements;
    for (let childRole of childRoles) {
      if (owned.has(childRole)) return true;
    }
  }
  return false;
}

console.log(canNest('ul', 'li')); // true
console.log(canNest('ul', 'button')); // false

Практические сценарии

  1. Валидация виджетов: Проверка структуры сложных компонентов, таких как таблицы (grid → row → cell) или меню (menu → menuitem).
  2. Генерация предупреждений в сборщиках: При разработке библиотек UI можно автоматически предупреждать, если элемент не соответствует ARIA-спецификации.
  3. Тестирование доступности: Автоматические тесты могут использовать Aria-query для проверки, что все вложенные элементы соответствуют владеющей роли родителя.

Советы по использованию

  • Всегда использовать Set из roles.ownedElements для быстрого поиска и проверки.
  • При сопоставлении HTML-элементов учитывать все роли, которые они могут принимать через elementRoles.
  • Проверка владеющих элементов особенно важна для интерактивных и семантически сложных компонентов, где логическая структура важнее визуальной.
  • Aria-query полностью основана на спецификации ARIA, поэтому обновления спецификации могут требовать обновления библиотеки для поддержки новых ролей и правил.

Взаимодействие с другими библиотеками

Aria-query часто используется совместно с testing-library или инструментами для статического анализа DOM, чтобы создавать правила проверки доступности, валидировать пользовательские интерфейсы и автоматически строить отчёты о нарушениях ARIA.

import { getByRole } from '@testing-library/dom';
import { roles } from 'aria-query';

const roleSet = roles.get('menu').ownedElements;
// Можно сверять элементы, найденные через getByRole, с ожидаемыми ownedElements

Это позволяет объединять статическую информацию о ролях и динамическую проверку реального DOM, создавая мощные инструменты для тестирования доступности интерфейсов.

Оглавление