superClass

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

Импорт и базовые структуры

Для использования библиотеки необходимо импортировать ключевые объекты:

import { roles, elementRoles, aria } from 'aria-query';
  • roles — коллекция всех ARIA-ролей с их свойствами и отношениями.
  • elementRoles — карта HTML-элементов на роли, которые они могут выполнять.
  • aria — набор ARIA-атрибутов с типами и допустимыми значениями.

Каждая роль в roles представлена объектом с набором свойств:

{
  name: 'button',
  superclass: ['command', 'widget'],
  requiredProps: [],
  supportedProps: ['aria-pressed', 'aria-expanded']
}

Ключевые моменты:

  • name — имя роли.
  • superclass — список родительских ролей, определяющих иерархию наследования.
  • requiredProps — свойства, обязательные для корректного использования роли.
  • supportedProps — свойства, которые роль может поддерживать.

Иерархия ролей и superClass

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

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(buttonRole.superclass); // ['command', 'widget']
  • command — общее поведение интерактивного элемента.
  • widget — элемент управления пользовательским интерфейсом.

Иерархия позволяет автоматически проверять, какие атрибуты поддерживает роль через наследование:

function getAllSupportedProps(roleName) {
  const role = roles.get(roleName);
  let props = new Set(role.supportedProps);
  role.superclass.forEach(parent => {
    const parentRole = roles.get(parent);
    parentRole.supportedProps.forEach(p => props.add(p));
  });
  return Array.from(props);
}

console.log(getAllSupportedProps('button'));
// ['aria-pressed', 'aria-expanded', ... свойства родительских ролей]

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

Работа с elementRoles

Коллекция elementRoles связывает HTML-элементы с ролями, которые они могут выполнять. Структура:

{
  'button': new Set(['button']),
  'a': new Set(['link', 'button'])
}

Использование:

import { elementRoles } from 'aria-query';

const rolesForAnchor = elementRoles.get('a');
console.log(rolesForAnchor); // Set { 'link', 'button' }

Это позволяет проверять соответствие элемента его семантической роли в реальном DOM.

Проверка ARIA-атрибутов

Библиотека предоставляет карту aria для валидации атрибутов:

import { aria } from 'aria-query';

console.log(aria.get('aria-pressed'));
/*
{
  type: 'tristate',
  values: [true, false, 'mixed']
}
*/

Можно создавать функции для проверки корректности:

function isValidAriaProp(roleName, propName) {
  const role = roles.get(roleName);
  return role.supportedProps.includes(propName) ||
         role.superclass.some(parent => roles.get(parent).supportedProps.includes(propName));
}

console.log(isValidAriaProp('button', 'aria-pressed')); // true
console.log(isValidAriaProp('link', 'aria-pressed')); // false

Динамическое создание и проверка элементов

Сочетание elementRoles, roles и aria позволяет динамически создавать элементы и валидировать их ARIA:

function createAccessibleButton() {
  const button = document.createElement('button');
  const roleName = Array.from(elementRoles.get('button'))[0];
  
  if (isValidAriaProp(roleName, 'aria-pressed')) {
    button.setAttribute('aria-pressed', 'false');
  }

  return button;
}

document.body.appendChild(createAccessibleButton());

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

Расширение и кастомизация ролей

Библиотека позволяет расширять роли или проверять кастомные компоненты:

roles.set('custom-button', {
  name: 'custom-button',
  superclass: ['button'],
  requiredProps: ['aria-label'],
  supportedProps: ['aria-pressed', 'aria-expanded']
});

const customRole = roles.get('custom-button');
console.log(getAllSupportedProps(customRole.name));
// ['aria-pressed', 'aria-expanded']

Наследование через superclass автоматически учитывает свойства родительской роли, что упрощает интеграцию кастомных компонентов.

Интеграция с тестированием доступности

Aria-query активно используется в библиотеке eslint-plugin-jsx-a11y и других инструментах для проверки доступности React и HTML. Проверка ролей и атрибутов позволяет выявлять нарушения семантики и ошибки использования ARIA до деплоя.

Выводы по использованию superClass

  • superclass задает иерархическую связь ролей и позволяет унаследовать свойства.
  • Полезно для динамического построения интерфейсов и валидации ARIA.
  • Позволяет расширять стандартные роли кастомными компонентами с корректной поддержкой доступности.
  • Интеграция с elementRoles и aria обеспечивает автоматическую проверку соответствия HTML-элементов их семантической роли.
Оглавление