Структура объекта роли

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

Основные поля объекта роли

Каждая роль в Aria-query описывается объектом с набором ключевых полей. Среди них:

  • abstract — булевое значение, указывающее, является ли роль абстрактной. Абстрактные роли не применяются напрямую к элементам DOM, они служат основой для создания других ролей. Например, роль "widget" является абстрактной.

  • baseConcepts — массив объектов, описывающих базовые концепции роли. Каждая базовая концепция содержит:

    • concept — ссылка на элемент HTML или другую роль, с которой связана данная роль.
    • attributes — объект с атрибутами, которые по умолчанию применяются к базовой концепции.

    Пример:

    baseConcepts: [
  { concept: 'button', attributes: {} }
]

  • props — объект, в котором перечислены все свойства (ARIA-атрибуты), применимые к роли. Ключи объекта соответствуют именам свойств, а значения описывают тип значения и возможность наследования. Например:

    props: {
  'aria-checked': { type: 'tristate', required: false },
  'aria-disabled': { type: 'boolean', required: false }
}

  • childrenPresentational — булевое значение, указывающее, можно ли роль считать презентационной, игнорируя дочерние элементы при рендеринге для вспомогательных технологий. Часто используется для контейнеров без интерактивного содержания.

  • superClass — массив объектов, описывающих иерархию ролей, от которых текущая роль наследует свойства и ограничения. Каждый объект содержит:

    • role — имя родительской роли
    • abstract — информация о том, является ли родительская роль абстрактной.

    Пример:

    superClass: [
  { role: 'widget', abstract: true }
]

  • requiredContextRole — массив ролей, которые должны присутствовать в контексте DOM, чтобы текущая роль была корректной. Это помогает поддерживать правильную семантическую структуру. Например, "listitem" требует "list" или "group" в качестве контейнера.

  • supportedStates и supportedProps — детализируют ARIA-состояния и свойства, которые роль может поддерживать. supportedStates включает такие состояния как aria-expanded, aria-selected, а supportedProps — свойства вроде aria-label, aria-labelledby.

Взаимодействие с HTML

Ария-ролями можно управлять напрямую через атрибуты HTML, однако Aria-query позволяет программно получать полную информацию о роли:

import { roles } from 'aria-query';

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

console.log(buttonRole.abstract); // false
console.log(buttonRole.props); 
// { 'aria-pressed': { type: 'tristate', required: false }, ... }

Такой подход упрощает проверку соответствия элементов ARIA-ролям и позволяет строить валидаторы доступности.

Расширенные свойства и наследование

Объект роли поддерживает наследование свойств через superClass, что важно для создания иерархии ролей. Если дочерняя роль наследует родительскую, она автоматически получает все допустимые состояния и свойства родителя, что уменьшает повторение кода и предотвращает ошибки при назначении ARIA-атрибутов.

Контекстные ограничения

Каждая роль может иметь контекстные ограничения, указанные в requiredContextRole или requiredOwnedElements. Это гарантирует корректное вложение элементов:

  • requiredContextRole — роли, которые должны быть в иерархии выше текущего элемента.
  • requiredOwnedElements — роли, которые должны быть у элементов-дочерних элементов. Например, "menu" должен содержать "menuitem".

Использование в валидаторах и тестах

Ария-объекты позволяют строить автоматизированные проверки доступности. Основные шаги:

  1. Получить роль элемента (roles.get('roleName')).
  2. Проверить props на наличие обязательных атрибутов.
  3. Проверить requiredContextRole и requiredOwnedElements на соответствие DOM-структуре.
  4. При наследовании учитывать свойства всех родительских ролей из superClass.

Примеры практического применения

  1. Проверка валидности роли:
function validateRole(element, roleName) {
  const role = roles.get(roleName);
  if (role.abstract) return false;

  // Проверка обязательных контекстов
  const contextRoles = role.requiredContextRole || [];
  // Логика проверки DOM-родителя
}
  1. Автогенерация ARIA-атрибутов для виджетов:
function defaultProps(roleName) {
  const role = roles.get(roleName);
  const props = {};
  Object.keys(role.props).forEach(key => {
    props[key] = null; // или дефолтное значение, если определено
  });
  return props;
}

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

Оглавление