roles Map

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

Структура roles

roles — это объект, где ключами являются строки с именами ARIA-ролей, а значениями — объекты с описанием этих ролей. Каждая роль включает несколько важных свойств:

  • name — стандартное имя роли (строка).
  • abstract — булевое значение, указывающее, является ли роль абстрактной. Абстрактные роли не предназначены для прямого использования в HTML, а служат основой для других ролей.
  • superClass — массив ролей, от которых текущая роль наследует свойства и поведение.
  • props — объект, содержащий ARIA-свойства, поддерживаемые данной ролью, с информацией о типах значений и обязательности.

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

import { roles } from 'aria-query';

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

console.log(buttonRole);
/*
{
  name: 'button',
  abstract: false,
  superClass: ['command'],
  props: {
    'aria-pressed': { type: 'tristate', required: false }
  }
}
*/

Основные методы взаимодействия с roles

  1. roles.get(roleName) Возвращает объект роли по имени. Если роль не существует, возвращает undefined.

  2. roles.has(roleName) Проверяет наличие роли в карте. Возвращает true или false.

  3. Итерация по ролям Карта roles реализована как Map, что позволяет использовать методы итерации:

for (const [name, role] of roles) {
  console.log(name, role.abstract);
}

Свойство abstract

Абстрактные роли представляют собой «шаблоны», от которых наследуются другие роли. Они не должны применяться к HTML-элементам напрямую. Пример абстрактной роли:

const commandRole = roles.get('command');
console.log(commandRole.abstract); // true

Прямое использование абстрактной роли в HTML не имеет смысла и нарушает спецификацию ARIA.

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

Каждая роль может наследовать свойства и поведение от одной или нескольких родительских ролей. Это позволяет организовать иерархию ролей и уменьшать дублирование информации.

Пример наследования:

const checkboxRole = roles.get('checkbox');

console.log(checkboxRole.superClass);
// ['input', 'command']

Это означает, что checkbox наследует свойства ролей input и command.

Свойства роли (props)

Свойства ARIA определяют интерактивное поведение и состояние элемента. Для каждой роли в roles.props хранится информация о том, какие свойства допустимы:

  • Тип значения — строки (string), булевы (boolean), тристейт (tristate) и т.д.
  • Обязательность — определяет, обязательно ли указывать свойство для корректной работы роли.

Пример проверки поддерживаемых свойств:

const switchRole = roles.get('switch');

console.log(Object.keys(switchRole.props));
// ['aria-checked', 'aria-disabled', 'aria-label', 'aria-labelledby']

Применение в разработке

Использование карты roles позволяет:

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

Пример проверки, что роль поддерживает определённый атрибут:

const roleName = 'menuitem';
const role = roles.get(roleName);

if (role && role.props['aria-disabled']) {
  console.log(`${roleName} поддерживает aria-disabled`);
}

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

  • Не все роли могут быть напрямую назначены элементам; абстрактные роли следует использовать только как базу для наследования.
  • Роли могут поддерживать разные типы значений свойств; необходимо проверять их перед присвоением.
  • Иерархия через superClass позволяет извлекать свойства не только из конкретной роли, но и из её родителей.

Итоговая структура данных роли

Каждая роль в roles содержит три уровня информации:

  1. Метаданные (name, abstract)
  2. Иерархия (superClass)
  3. Свойства и состояния (props)

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

Оглавление