Наследование свойств

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

Основные понятия

В ARIA каждая роль может определять следующие элементы:

  • abstract – флаг, указывающий, что роль является абстрактной и не предназначена для прямого использования в элементах DOM.
  • superClass – массив родительских ролей, от которых текущая роль наследует свойства.
  • props – объект с конкретными свойствами роли, такими как aria-label, aria-checked и другими.

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

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

Aria-query предоставляет два основных объекта:

  1. roles – коллекция всех ролей ARIA с описанием их свойств и наследования.
  2. elementRoles – отображение HTML-элементов на роли, которые они могут выполнять.

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

{
  name: 'button',
  abstract: false,
  superClass: ['command'],
  props: {
    'aria-pressed': { type: 'boolean', default: false },
    'aria-expanded': { type: 'boolean' }
  }
}

Здесь роль button наследует свойства от роли command. Если у роли command есть свойство aria-disabled, то button также получит его через наследование.

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

В Aria-query наследование реализуется через рекурсивное объединение свойств родителей. Для каждой роли алгоритм можно представить так:

  1. Проверяется список superClass.
  2. Для каждой родительской роли рекурсивно собираются все свойства.
  3. Свойства родительской роли объединяются с собственными свойствами роли.
  4. В случае конфликта (одинаковые имена свойств) приоритет отдаётся свойствам самой роли.

Пример функции для получения всех свойств роли:

function getAllProps(roleName, rolesMap) {
  const role = rolesMap.get(roleName);
  if (!role) return {};

  let inheritedProps = {};
  role.superClass.forEach(parentRoleName => {
    inheritedProps = {
      ...inheritedProps,
      ...getAllProps(parentRoleName, rolesMap)
    };
  });

  return { ...inheritedProps, ...role.props };
}

Таким образом, getAllProps('button', roles) вернёт полный набор свойств, включая aria-disabled из command и aria-pressed, aria-expanded из button.

Особенности работы с абстрактными ролями

Абстрактные роли (abstract: true) не используются напрямую в DOM, но служат базой для наследования. Например, widget или command являются абстрактными:

  • widget – определяет базовые свойства всех интерактивных элементов.
  • command – наследует свойства от widget, добавляя специфические для команд свойства.

С помощью Aria-query можно получить только наследуемые свойства абстрактной роли, не создавая лишних DOM-элементов. Это удобно при валидации доступности интерфейсов.

Инструменты библиотеки для работы с наследованием

Aria-query предоставляет следующие методы и структуры для анализа:

  • roles.get(roleName) – получение объекта роли по имени.
  • roles.keys() – список всех ролей.
  • getSuperClass(roleName) – возвращает массив родительских ролей.
  • getProps(roleName) – возвращает объект свойств роли, включая наследуемые.

Пример:

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
const allProps = getAllProps('button', roles);
console.log(allProps);

Результат покажет, что button наследует свойства от command, а также содержит свои специфические свойства.

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

  1. Валидация интерфейсов: позволяет проверять, что все необходимые ARIA-атрибуты присутствуют для каждой роли, включая унаследованные.
  2. Генерация компонентов: при создании библиотеки компонентов можно автоматически применять все свойства родительских ролей.
  3. Документация: автоматически строить таблицы доступных свойств для каждой роли, учитывая наследование.

Важные нюансы

  • Наследование может быть многоуровневым. Например, menuitemcheckbox наследует от menuitem, которая, в свою очередь, наследует от command и widget.
  • Свойства с одинаковыми именами в дочерней роли переопределяют свойства родителя.
  • Абстрактные роли всегда игнорируются при сопоставлении с DOM-элементами, но учитываются при вычислении наследуемых свойств.

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

Оглавление