roleElements Map

Библиотека Aria-query предоставляет мощные инструменты для анализа и работы с ARIA-ролями и их соответствующими HTML-элементами. Одним из центральных объектов является roleElements Map, представляющий сопоставление между ARIA-ролями и элементами, на которые эти роли могут быть назначены. Этот объект является ключевым при построении систем проверки доступности и инструментов автоматизированного тестирования.

Структура roleElements Map

roleElements представляет собой Map, где:

  • Ключ — это строка, содержащая имя ARIA-роли (например, "button", "checkbox", "dialog").
  • Значение — объект, содержащий свойства и допустимые HTML-элементы для этой роли.

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

import { roleElements } from "aria-query";

console.log(roleElements.get("button"));
/*
{
  name: "button",
  requiredProps: [],
  superClassRoles: ["command", "widget"],
  baseElements: ["button", "input[type=button]", "input[type=submit]"]
}
*/

Ключевые поля значения Map:

  • name — строка с именем роли.
  • requiredProps — массив ARIA-свойств, обязательных для корректного функционирования роли.
  • superClassRoles — массив ролей, от которых текущая роль наследует поведение.
  • baseElements — массив селекторов HTML-элементов, которые нативно соответствуют роли.

Использование для проверки доступности

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

Пример проверки соответствия:

import { roleElements } from "aria-query";

function isValidRoleForElement(role, tagName, type = null) {
  const roleInfo = roleElements.get(role);
  if (!roleInfo) return false;

  return roleInfo.baseElements.some(elementSelector => {
    if (type) {
      return elementSelector === `${tagName}[type=${type}]` || elementSelector === tagName;
    }
    return elementSelector === tagName;
  });
}

console.log(isValidRoleForElement("button", "button")); // true
console.log(isValidRoleForElement("button", "input", "submit")); // true
console.log(isValidRoleForElement("button", "div")); // false

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

Наследование ролей через superClassRoles

Каждая ARIA-роль может наследовать свойства от одной или нескольких суперролей. Это отражается в поле superClassRoles. Использование этой информации позволяет:

  • Определять поведение роли в интерфейсе.
  • Упрощать построение схем валидаторов и инструментов автоматизации.
  • Обеспечивать согласованность проверок ARIA-свойств.

Пример анализа суперролей:

const buttonRole = roleElements.get("button");
console.log(buttonRole.superClassRoles); // ["command", "widget"]

// Проверка, является ли роль командой
const isCommandRole = buttonRole.superClassRoles.includes("command");
console.log(isCommandRole); // true

Обязательные ARIA-свойства

Некоторые роли требуют наличия определённых ARIA-атрибутов. Это хранится в requiredProps. Например, роль checkbox требует aria-checked:

const checkboxRole = roleElements.get("checkbox");
console.log(checkboxRole.requiredProps); // ["aria-checked"]

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

Применение в реальных проектах

roleElements активно используется в:

  1. Линтерах доступности: проверка соответствия ролей и HTML-элементов.
  2. Тестировании компонентов: гарантируется, что нативные элементы правильно отражают ARIA-ролей.
  3. Генерации документации: автоматическое отображение допустимых элементов и обязательных свойств для каждой роли.
  4. Фреймворках UI: динамическое применение ролей к компонентам на основе типа элемента.

Пример динамического создания компонента с корректной ролью:

function createAccessibleButton(tag = "button") {
  const roleInfo = roleElements.get("button");
  const element = document.createElement(tag);

  if (roleInfo.baseElements.includes(tag)) {
    element.setAttribute("role", "button");
    roleInfo.requiredProps.forEach(prop => element.setAttribute(prop, ""));
  }

  return element;
}

document.body.appendChild(createAccessibleButton("button"));

Итоговая структура и особенности

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

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

Оглавление