Запрещенные комбинации

Библиотека aria-query предназначена для работы с ARIA-атрибутами и ролями в контексте веб-разработки. Она предоставляет структурированные данные о ролях, свойствах и состояниях, что позволяет создавать доступные интерфейсы и проверять соответствие элементов стандартам WAI-ARIA. Центральными сущностями являются roles, attributes и elementRoleMappings, хранящиеся в виде объектов и карт.

roles содержит детальную информацию о каждой роли: type (widget, structure, landmark), requiredContextRole (роли, которые должны присутствовать вокруг), requiredOwnedElements и prohibitedProps.

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

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

Понимание запрещенных комбинаций

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

Пример структуры запрещённых атрибутов для роли:

const { roles } = require('aria-query');

const buttonRole = roles.get('button');
console.log(buttonRole.prohibitedProps);

Здесь prohibitedProps возвращает набор атрибутов, которые не могут быть использованы с кнопкой, например, атрибут aria-checked, который имеет смысл только для ролей checkbox и menuitemcheckbox.

Типы запрещённых комбинаций

Неподходящие состояния Роли типа button, link и menuitem имеют свои допустимые состояния. Попытка использовать aria-checked или aria-selected вне контекста соответствующих ролей создаёт запрещённую комбинацию.
Конфликтные свойства Некоторые свойства ARIA противоречат друг другу. Например, роль combobox может содержать aria-expanded, но не должна одновременно использовать aria-checked. Библиотека aria-query помогает выявить такие конфликты программно.
Неправильное контекстное использование Существуют роли, которые требуют определённого родителя. Если родительская роль отсутствует, использование дочерней роли с запрещёнными атрибутами считается недопустимым.

Проверка элементов на запрещённые комбинации

Для проверки можно использовать методы библиотеки совместно с объектами DOM. Пример алгоритма:

const { roles } = require('aria-query');

function checkProhibitedProps(element) {
  const roleName = element.getAttribute('role');
  if (!roleName) return [];

  const roleDef = roles.get(roleName);
  if (!roleDef || !roleDef.prohibitedProps) return [];

  return Array.from(roleDef.prohibitedProps).filter(attr => element.hasAttribute(attr));
}

// Использование
const prohibited = checkProhibitedProps(document.querySelector('#myButton'));
console.log(prohibited); // Список запрещённых атрибутов на элементе

Этот подход позволяет автоматически выявлять элементы с неправильными комбинациями ARIA-атрибутов и предотвращать ошибки доступности на раннем этапе разработки.

Практические примеры запрещённых комбинаций

Роль checkbox с aria-haspopup – противоречие, так как чекбокс не может открывать меню.
Роль menuitemradio с aria-pressed – конфликт с состоянием, которое предназначено для кнопок.
Роль progressbar с aria-checked – не имеет логического смысла и нарушает спецификацию.

Интеграция с системами тестирования

aria-query может использоваться в связке с тестовыми фреймворками:

ESLint-plugin-jsx-a11y – проверяет запрещённые комбинации на уровне JSX.
Jest – позволяет писать unit-тесты, проверяющие, что компоненты не используют запрещённые ARIA-свойства.
Storybook / Chromatic – визуальный контроль доступности через автоматические проверки ролей и атрибутов.