deprecated

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

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

npm install aria-query

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

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

Или в модульной системе ES6:

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

Основные структуры

aria-query предоставляет две ключевые структуры: roles и aria.

  • roles — Map, где ключом является имя ARIA-роли, а значением объект с информацией о свойствах и допустимых ролях-контейнерах.
  • aria — Map, где ключом является имя ARIA-атрибута, а значением объект с типом данных и допустимыми значениями.

Пример структуры roles:

console.log(roles.get('button'));
/*
{
  abstract: false,
  accessibleNameRequired: false,
  requiredProps: [],
  superClass: ['command', 'widget']
}
*/

Пример структуры aria:

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

Проверка ролей и атрибутов

Для проверки, допустима ли конкретная ARIA-роль для элемента или содержимого, используется метод roles.get(). Он возвращает объект с ключами, описывающими ограничения и характеристики роли:

  • abstract — указывает, является ли роль абстрактной.
  • requiredProps — массив обязательных ARIA-атрибутов для корректного использования роли.
  • superClass — массив родительских категорий роли, полезный для понимания иерархии ролей.
  • accessibleNameRequired — булево значение, требующее наличия доступного имени (accessible name).

Пример проверки обязательных атрибутов:

const buttonRole = roles.get('button');
if (buttonRole.requiredProps.length) {
  console.log('Необходимые атрибуты:', buttonRole.requiredProps);
} else {
  console.log('Спецификация не требует обязательных атрибутов');
}

Для атрибутов ARIA:

const ariaChecked = aria.get('aria-checked');
if (ariaChecked.values.includes('mixed')) {
  console.log('Атрибут aria-checked поддерживает значение mixed');
}

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

Библиотека aria-query не выполняет автоматическую валидацию DOM, но предоставляет данные, которые можно использовать в сочетании с линтерами или инструментами тестирования.

Пример функции проверки корректности использования роли и атрибутов:

function validateElementRole(element) {
  const role = element.getAttribute('role');
  const roleInfo = roles.get(role);

  if (!roleInfo) {
    return `Роль ${role} не существует`;
  }

  const missingProps = roleInfo.requiredProps.filter(
    prop => !element.hasAttribute(prop)
  );

  if (missingProps.length) {
    return `Отсутствуют обязательные атрибуты: ${missingProps.join(', ')}`;
  }

  return 'Роль и атрибуты корректны';
}

Доступные роли и их категории

В roles роли организованы по иерархическим категориям. Основные категории:

  • widget — элементы управления, с которыми может взаимодействовать пользователь.
  • structure — структурные элементы, например region, section.
  • document — элементы контента документа.
  • abstract — абстрактные роли, не предназначенные для прямого использования.

Пример иерархии:

roles.get('menuitem').superClass; // ['command', 'widget']

Работа с deprecated ролями и атрибутами

Библиотека aria-query содержит информацию о ролях и атрибутах, помеченных как deprecated в спецификации WAI-ARIA. Это позволяет проверять устаревшие конструкции и предупреждать о необходимости их замены.

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

const deprecatedRoles = Array.from(roles.entries())
  .filter(([roleName, roleObj]) => roleObj.deprecated)
  .map(([roleName]) => roleName);

console.log('Устаревшие роли:', deprecatedRoles);

Для атрибутов:

const deprecatedAttributes = Array.from(aria.entries())
  .filter(([attrName, attrObj]) => attrObj.deprecated)
  .map(([attrName]) => attrName);

console.log('Устаревшие атрибуты:', deprecatedAttributes);

Применение в линтерах

Данные из aria-query широко используются в таких инструментах, как eslint-plugin-jsx-a11y, для автоматической проверки корректного применения ARIA. Библиотека предоставляет стандартизированную базу, чтобы гарантировать соответствие спецификации.

Пример интеграции:

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

function checkAriaRolesInJSX(node) {
  const role = node.attributes.role;
  if (!roles.has(role)) {
    return `Неизвестная роль ${role}`;
  }
  return null;
}

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

С помощью aria-query можно создавать свои собственные наборы правил для проверки специфичных ARIA-сценариев. Поскольку roles и aria являются стандартными Map-структурами, возможно добавлять новые роли, модифицировать существующие или фильтровать устаревшие.

const customRoles = new Map(roles);
customRoles.set('custom-button', { superClass: ['widget'], abstract: false, requiredProps: [] });

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

Итоги работы с deprecated

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

Оглавление