Игнорирование обязательных свойств

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

Структура данных в aria-query

aria-query предоставляет два ключевых объекта:

  1. Roles — содержит описание всех ARIA-ролей и их свойств.
  2. Properties — описание всех ARIA-свойств, типов и ограничений.

Каждая роль описывается объектом с полями:

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

Например:

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

const buttonRole = roles.get('button');
console.log(buttonRole.requiredProps); // []

Здесь видно, что роль button не имеет обязательных ARIA-свойств, а, например, роль textbox имеет обязательное свойство aria-multiline в определённых контекстах.

Механизм проверки обязательных свойств

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

Пример алгоритма проверки:

function validateRequiredProps(roleName, elementProps) {
  const role = roles.get(roleName);
  if (!role) return false;

  const missingProps = role.requiredProps.filter(prop => !(prop in elementProps));
  return missingProps.length === 0;
}

// Пример использования
const elementProps = { 'aria-multiline': true };
console.log(validateRequiredProps('textbox', elementProps)); // true или false

Игнорирование обязательных свойств

Существуют сценарии, когда обязательные свойства могут не применяться:

  1. Наследование ролей — если родительская роль уже содержит свойства, некоторые дочерние роли могут игнорировать свои requiredProps.
  2. Контекст использования — некоторые ARIA-свойства обязательны только в определённых контекстах дерева элементов, например, aria-owns у элемента списка.
  3. Абстрактные роли — они сами не требуют обязательных свойств, но их дочерние роли могут наследовать их ограничения. Игнорирование необходимо, чтобы не ошибочно проверять абстрактный элемент.
  4. Пользовательская оптимизация — при генерации динамических компонентов некоторые обязательные свойства могут быть опущены намеренно для упрощения логики.

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

function getRequiredProps(roleName, options = {}) {
  const role = roles.get(roleName);
  if (!role) return [];

  // Если включена опция игнорирования обязательных свойств
  if (options.ignoreRequiredProps) {
    return [];
  }

  return role.requiredProps;
}

// Пример
console.log(getRequiredProps('textbox', { ignoreRequiredProps: true })); // []

Практическая роль игнорирования

Игнорирование обязательных свойств полезно при:

  • Генерации тестовых данных для UI.
  • Создании компонентов, где определённые свойства управляются глобально или через контейнер.
  • Сценариях, где роль технически корректна без полного набора свойств.

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

Взаимодействие с типами свойств

Каждое ARIA-свойство в properties имеет тип:

  • string, integer, token, id, idlist, boolean.
  • Обязательные свойства, если игнорируются, не проверяются на соответствие типу.

Пример извлечения типа:

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

const ariaValue = properties.get('aria-multiline');
console.log(ariaValue.type); // boolean

При игнорировании свойства можно пропустить и проверку типа:

function validatePropsWithIgnore(roleName, elementProps, options = {}) {
  const requiredProps = getRequiredProps(roleName, options);
  return requiredProps.every(prop => prop in elementProps);
}

Сценарии с наследованием ролей

ARAI-ролей имеет иерархию. Например, combobox наследует свойства input и listbox. При игнорировании:

  • Можно пропускать проверку наследуемых обязательных свойств.
  • Можно проверять только конкретные свойства текущей роли.
function getAllRequiredProps(roleName, options = {}) {
  const role = roles.get(roleName);
  if (!role) return [];

  if (options.ignoreRequiredProps) return [];

  const inheritedProps = role.superClass.flatMap(parent => getAllRequiredProps(parent, options));
  return [...new Set([...role.requiredProps, ...inheritedProps])];
}

Это обеспечивает гибкость при построении валидаторов.

Рекомендации по использованию

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

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

Оглавление