Типы данных библиотеки

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

1. Роли (Roles)

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

Структура роли:

  • name — уникальное имя роли, соответствующее спецификации ARIA ("button", "checkbox", "dialog").
  • abstract — булевое значение, показывающее, является ли роль абстрактной. Абстрактные роли не используются напрямую в DOM.
  • superClass — массив строк, представляющий родительские роли или категории.
  • props — объект, содержащий свойства ARIA, применимые к этой роли.
  • requiredProps — массив свойств, обязательных для корректной реализации роли.
  • domProps — свойства DOM, связанные с ролью, например, tabindex для интерактивных элементов.

Пример получения роли:

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(buttonRole.props); // выводит список ARIA-свойств роли "button"

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

  • roles.keys() возвращает массив всех доступных имен ролей.
  • roles.has(name) проверяет существование роли.
  • roles.get(name) возвращает объект роли с полным описанием.

2. Свойства и состояния (Properties & States)

ARIA properties and states описывают состояние или поведение элемента. В библиотеке они представлены отдельной структурой, которая разделяет свойства (properties) и состояния (states).

Основные характеристики:

  • type — тип значения ("string", "boolean", "integer", "token").
  • values — допустимые значения (для перечислимых свойств).
  • defaultValue — значение по умолчанию.
  • mutable — указывает, можно ли изменять значение свойства динамически.
  • forRoles — массив ролей, для которых свойство применимо.

Пример работы со свойствами:

import { aria } from 'aria-query';

const disabledProp = aria.get('aria-disabled');
console.log(disabledProp.type); // "boolean"
console.log(disabledProp.forRoles); // список ролей, для которых допустимо использование

Особенности:

  • Свойства могут быть наследуемыми для нескольких ролей.
  • Состояния (aria-checked, aria-expanded) помогают интерактивным элементам корректно взаимодействовать с ассистивными технологиями.
  • Проверка значений свойств через Aria-query помогает обнаруживать ошибки соответствия спецификации ARIA.

3. Карты соответствий (Maps)

Aria-query использует карты соответствий, чтобы сопоставлять роли с допустимыми свойствами и состояниями. Основные структуры:

  • roles (Map) — ключом является имя роли, значением объект роли.
  • aria (Map) — ключом имя свойства ARIA, значением объект с типом, возможными значениями и применимыми ролями.
  • elementRoles (Map) — сопоставляет HTML-элементы с рекомендуемыми ARIA-ролями.

Пример использования карты ролей для проверки:

import { roles } from 'aria-query';

if (roles.has('checkbox')) {
  const checkboxRole = roles.get('checkbox');
  console.log(checkboxRole.requiredProps); // ["aria-checked"]
}

4. Типы значений (Value Types)

Для ARIA-свойств библиотека определяет строгие типы данных, которые гарантируют корректное использование:

  • Boolean — true или false.
  • Tristate — true, false, "mixed".
  • String — любые текстовые значения.
  • Token — ограниченный набор строковых значений (например, "horizontal" | "vertical").
  • ID Reference — ссылка на другой элемент в DOM через атрибут id.

Особенности:

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

5. Взаимосвязь ролей и свойств

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

  • Роль → свойства: какие свойства допустимы или обязательны для роли.
  • Свойство → роли: для каких ролей свойство может использоваться.

Пример проверки соответствия:

import { roles, aria } from 'aria-query';

const role = roles.get('switch');
const prop = aria.get('aria-checked');

if (role.props.has('aria-checked')) {
  console.log('Свойство aria-checked допустимо для роли switch');
}

6. Итоговая структура данных

Основные структуры Aria-query можно визуализировать так:

  • roles: Map
  • Role: { name, abstract, superClass, props, requiredProps, domProps }
  • aria: Map
  • Property: { type, values, defaultValue, mutable, forRoles }
  • elementRoles: Map> — для HTML-элементов и рекомендуемых ролей.

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

Оглавление