Правила переопределения ролей

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

Роли и их структура

В Aria-query роли представлены объектами с несколькими ключевыми свойствами:

  • name — уникальное имя роли (например, button, alert, menuitem).
  • superClass — массив, описывающий иерархию роли, что позволяет наследовать свойства и ограничения.
  • abstract — булево значение, указывающее, что роль не используется напрямую в DOM, а служит базовой.
  • allowedProps — список ARIA-свойств и состояний, допустимых для роли.
  • requiredContextRole — роли родительских элементов, необходимые для корректного использования.
  • requiredOwnedElements — дочерние элементы, обязательные для роли.

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

{
  name: 'button',
  superClass: [['widget', 'command']],
  abstract: false,
  allowedProps: ['aria-pressed', 'aria-expanded'],
  requiredContextRole: null,
  requiredOwnedElements: []
}

Получение информации о ролях

Aria-query предоставляет методы для доступа к данным:

  • roles.get(roleName) — возвращает объект роли по имени.
  • roles.keys() — массив всех доступных ролей.
  • roles.values() — массив объектов всех ролей.

Пример использования:

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(buttonRole.allowedProps); // ['aria-pressed', 'aria-expanded']

Переопределение ролей

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

Пошаговая схема переопределения

  1. Создание копии исходной роли
import { roles } from 'aria-query';

const customButton = { ...roles.get('button') };
  1. Изменение или добавление свойств
customButton.allowedProps.push('aria-custom-state');
customButton.requiredContextRole = ['toolbar'];
  1. Регистрация новой роли Библиотека напрямую не позволяет модифицировать глобальный объект roles, поэтому обычно создают локальный маппинг:
const customRoles = new Map(roles);
customRoles.set('custom-button', customButton);
  1. Использование при проверке компонентов Функции валидации можно адаптировать, чтобы использовать customRoles вместо стандартного набора:
function validateRole(element, roleName, roleMap = roles) {
  const role = roleMap.get(roleName);
  if (!role) return false;
  // Проверка доступных свойств и контекста
  return role.allowedProps.every(prop => element.hasAttribute(prop) || true);
}

Контекст и иерархия ролей

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

  • Проверять соответствие контекста при кастомизации ролей.
  • Автоматически определять допустимые дочерние элементы для сложных компонентов.
  • Упрощать построение деревьев доступности для компонентов с вложенными ARIA-ролями.

Использование в сочетании с React и другими фреймворками

При создании кастомных виджетов, таких как Accordion или Dropdown, часто требуется добавить ARIA-атрибуты, не предусмотренные стандартными ролями. С Aria-query можно:

  • Проверять корректность комбинаций role + aria-*.
  • Переопределять роли под требования проекта без нарушения базовой схемы доступности.
  • Создавать локальные маппинги для кастомных компонентов, сохраняя стандартные роли нетронутыми.

Пример для React:

const CustomButton = (props) => {
  const role = customRoles.get('custom-button');
  return (
    <button
      role={role.name}
      aria-pressed={props.pressed}
      aria-custom-state={props.customState}
    >
      {props.children}
    </button>
  );
};

Практические рекомендации

  • Сохранять базовые роли неизменными — всегда создавать новые объекты при расширении.
  • Проверять контекст использования — использовать requiredContextRole для предотвращения ошибок доступности.
  • Вести отдельный маппинг для кастомных ролей — это упрощает масштабирование и поддержку.
  • Интегрировать с тестами доступности — Aria-query позволяет строить автотесты для проверки корректности role и ARIA-атрибутов.

Взаимодействие с DOM и ARIA-валидаторами

Aria-query можно использовать совместно с библиотеками типа axe-core или eslint-plugin-jsx-a11y. Переопределённые роли можно передавать в валидаторы, что позволяет проверять кастомные компоненты на соответствие стандартам ARIA.

  • Проверка наличия обязательных атрибутов.
  • Контроль контекста родителя и дочерних элементов.
  • Поддержка сложных виджетов с динамически изменяемыми состояниями.

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

Оглавление