Кастомные правила линтинга

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

aria-query экспортирует несколько ключевых структур данных:

  • roles — объект, содержащий описание всех ARIA-ролей, их разрешённые дочерние роли, свойства и состояния.
  • attributes — объект с определением всех ARIA-атрибутов, их типов, допустимых значений и взаимодействий с ролями.
  • elementRoles — отображение HTML-элементов на роли, которые они могут нести по умолчанию.
  • rolesByElement — обратное отображение: роли на HTML-элементы, на которых они могут быть использованы.

Каждая роль в объекте roles содержит следующие свойства:

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

Каждый атрибут в attributes содержит:

  • type — тип данных (boolean, string, token, tristate и др.).
  • values — список допустимых значений, если применимо.
  • allowUndefined — разрешение использовать атрибут без значения.

Использование данных aria-query для кастомного линтинга

Создание кастомных правил линтинга на основе aria-query позволяет проверять соответствие интерфейса стандартам ARIA, находить ошибки и повышать доступность.

Проверка соответствия ролей и элементов

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

// Проверка допустимости роли на элементе
function isRoleValidForElement(elementName, roleName) {
  const validRoles = elementRoles.get(elementName);
  return validRoles ? validRoles.has(roleName) : false;
}

// Пример использования
console.log(isRoleValidForElement('button', 'button')); // true
console.log(isRoleValidForElement('div', 'checkbox'));  // true, если role разрешена на div

Метод elementRoles.get(elementName) возвращает Set допустимых ролей. Это позволяет линтерам автоматически отмечать некорректное использование ролей на HTML-элементах.

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

import { roles } from 'aria-query';

function missingRequiredProps(roleName, props) {
  const role = roles.get(roleName);
  if (!role || !role.requiredProps) return [];
  return role.requiredProps.filter(attr => !(attr in props));
}

// Пример
console.log(missingRequiredProps('checkbox', { 'aria-checked': 'true' })); // []
console.log(missingRequiredProps('checkbox', {})); // ['aria-checked']

Для каждой роли можно извлечь requiredProps и сверить их с реальными атрибутами элемента, что позволяет выявлять нарушения спецификации ARIA.

Проверка допустимых значений атрибутов

import { attributes } from 'aria-query';

function isAttributeValueValid(attrName, value) {
  const attr = attributes.get(attrName);
  if (!attr) return true; // Неизвестный атрибут игнорируем
  if (attr.values) {
    return attr.values.includes(value);
  }
  return true;
}

// Пример
console.log(isAttributeValueValid('aria-checked', 'true'));  // true
console.log(isAttributeValueValid('aria-checked', 'maybe')); // false

Это особенно важно для атрибутов с фиксированным набором токенов (token) или тристейт (tristate), где любое несоответствие указывает на ошибку линтинга.

Составление кастомного правила

Правило линтинга обычно включает следующие шаги:

  1. Определение HTML-элементов и их ARIA-ролей.
  2. Проверка соответствия роли допустимым элементам.
  3. Проверка наличия всех обязательных атрибутов.
  4. Проверка корректности значений атрибутов.
  5. Формирование отчёта с точным указанием нарушений.

Пример простой функции линтинга:

function lintElement(elementName, roleName, props) {
  const errors = [];

  if (!isRoleValidForElement(elementName, roleName)) {
    errors.push(`Роль "${roleName}" недопустима на элементе <${elementName}>`);
  }

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

  for (const [attrName, value] of Object.entries(props)) {
    if (!isAttributeValueValid(attrName, value)) {
      errors.push(`Некорректное значение атрибута "${attrName}": ${value}`);
    }
  }

  return errors;
}

Такой подход позволяет создавать детальные правила линтинга для любых компонентов интерфейса и интегрировать их в ESLint, Stylelint или собственные CLI-инструменты.

Интеграция с реальными фреймворками

Библиотека aria-query совместима с React, Vue и другими фреймворками через анализ JSX/TSX и виртуального DOM. Например, для React-компонента можно извлечь props, определить роль через role и проверить с помощью вышеописанных функций.

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

Оглавление