Конфликты явных и неявных ролей

Библиотека aria-query предназначена для работы с ARIA-ролями и свойствами в контексте веб-разработки. Одним из ключевых аспектов её применения является определение и разрешение конфликтов между явными и неявными ролями, которые могут возникать при разработке доступных интерфейсов.

Явные и неявные роли

Явная роль — это роль, заданная через атрибут role на HTML-элементе:

Пункт меню

Неявная роль — это роль, автоматически ассоциированная с элементом браузером, исходя из его типа или семантики:

Ссылка 
 

Основная задача aria-query — обеспечить проверку соответствия этих ролей, а также выявление потенциальных конфликтов при их смешении.

Структура данных aria-query

Библиотека предоставляет следующие ключевые структуры:

• roles — карта всех ARIA-ролей, их свойств и поддерживаемых состояний.
• elementRoles — карта HTML-элементов и соответствующих им неявных ролей.
• isAbstractRole(role) — проверяет, является ли роль абстрактной и не предназначенной для прямого использования.
• getImplicitRole(element) — возвращает неявную роль элемента, если она определена стандартом.

Пример:

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

const role = getImplicitRole({ name: 'button', attributes: {} });
console.log(role); // 'button'

Эта функция позволяет безопасно определять неявную роль и сравнивать её с явно заданной через role.

Механизм обнаружения конфликтов

Конфликт возникает, если:

1. Явная роль не совместима с неявной.
2. Явная роль является абстрактной.
3. Свойства ARIA, заданные для явной роли, не поддерживаются её элементом.

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

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

const element = { name: 'a', attributes: { role: 'button', href: '#' } };
const implicitRole = getImplicitRole(element);
const explicitRole = element.attributes.role;

if (implicitRole && explicitRole !== implicitRole) {
  console.warn(`Конфликт ролей: явная роль "${explicitRole}" не совпадает с неявной "${implicitRole}"`);
}

В этом случае вызывает конфликт, так как имеет неявную роль link, а явная роль button противоречит ей.

const roleData = roles.get('button');

if (!roleData.props.has('aria-checked')) {
  console.warn('Роль "button" не поддерживает aria-checked');
}

function checkRolesTree(element) {
  const implicitRole = getImplicitRole(element);
  const explicitRole = element.attributes.role;

  if (explicitRole && implicitRole && explicitRole !== implicitRole) {
    console.warn(`Конфликт в элементе <${element.name}>: "${explicitRole}" vs "${implicitRole}"`);
  }

  if (element.children) {
    element.children.forEach(checkRolesTree);
  }
}