Цепочка superClass

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

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

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

Каждая ARIA-роль в Aria-query описывается объектом, включающим:

  • name: уникальное имя роли.
  • description: текстовое описание роли.
  • superClass: массив массивов родительских ролей.
  • props: объект с доступными свойствами.
  • childrenPresentational: булево значение, определяющее, разрешены ли дочерние элементы для визуального представления.

Пример фрагмента структуры роли:

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

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

console.log(buttonRole.superClass);
// [['command'], ['widget', 'interactive']]

Здесь button наследует свойства как от роли command, так и через цепочку widget → interactive.

Механизм наследования через superClass

Наследование свойств и состояний происходит по следующему принципу:

  1. Каждая роль получает все свойства и состояния своих непосредственных родителей.
  2. Если родитель имеет свой superClass, наследование продолжается вверх по иерархии.
  3. В случае нескольких вариантов в superClass используются объединения всех свойств и состояний из альтернативных путей.

Пример: роль checkbox имеет:

roles.get('checkbox').superClass
// [['input'], ['widget', 'checkable']]
  • input задаёт базовые свойства форм.
  • widget → checkable добавляет свойства интерактивного виджета, способного быть выбранным или снятым.

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

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

Функции Aria-query используют superClass для:

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

Пример функции проверки:

function inheritsRole(childRole, parentRole) {
  const roleObj = roles.get(childRole);
  if (!roleObj) return false;

  for (const path of roleObj.superClass) {
    if (path.includes(parentRole)) return true;
  }
  return false;
}

console.log(inheritsRole('button', 'widget')); // true
console.log(inheritsRole('checkbox', 'command')); // false

В этом примере функция проверяет, есть ли в цепочке superClass указанная роль, и возвращает логическое значение.

Практические сценарии

1. Динамическое определение свойств роли: Для создания интерфейса, где элементы могут менять роли, superClass помогает автоматически получать все унаследованные свойства.

2. Генерация документации или таблиц ARIA: С помощью superClass можно строить иерархические графы ролей, показывая, какие базовые функции доступны каждой роли.

3. Тестирование доступности: Сценарии проверки ARIA-состояний используют цепочки superClass для выявления нарушений: например, проверка, что элемент с ролью menuitem действительно наследует widget и command.

Рекурсивное разрешение цепочки

Для полного понимания всех свойств роли часто необходимо рекурсивно проходить superClass:

function getAllInheritedRoles(roleName, visited = new Set()) {
  if (visited.has(roleName)) return [];
  visited.add(roleName);

  const role = roles.get(roleName);
  if (!role) return [];

  let inherited = [];
  for (const path of role.superClass) {
    for (const parent of path) {
      inherited.push(parent);
      inherited.push(...getAllInheritedRoles(parent, visited));
    }
  }
  return Array.from(new Set(inherited));
}

console.log(getAllInheritedRoles('checkbox'));
// ['input', 'widget', 'checkable', 'command']

Эта функция строит полный список всех ролей, от которых наследует текущая, предотвращая зацикливание при рекурсивных цепочках.

Особенности и нюансы

  • superClass не всегда линейный — наличие нескольких вариантов наследования отражает гибкость ARIA.
  • Внутренние массивы указывают на альтернативные пути, а не на последовательность. Порядок элементов внутри вложенного массива не всегда критичен.
  • Роли без superClass считаются базовыми, например document или none.

Цепочка superClass в Aria-query является фундаментальным инструментом для анализа иерархии ARIA-ролей, автоматического определения допустимых свойств и построения динамических, доступных пользовательских интерфейсов. Она позволяет программно моделировать ARIA-структуры и гарантировать соответствие стандартам доступности.

Оглавление