prohibitedProps

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

Структура `prohibitedProps`

prohibitedProps представляет собой Map, где ключом является имя ARIA-атрибута, а значением — массив HTML-тегов, на которых использование этого атрибута запрещено. Это позволяет инструментам проверки доступности быстро определять ошибки, связанные с ARIA.

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

import { prohibitedProps } from 'aria-query';

console.log(prohibitedProps.get('aria-checked'));
// ['meta', 'script', 'style']

Здесь aria-checked нельзя применять на тегах meta, script, style, так как они не поддерживают интерактивное состояние.

Назначение и логика использования

Основная задача prohibitedProps — предотвращение некорректного применения ARIA-атрибутов, которое может нарушить семантику страницы и привести к проблемам с доступностью для пользователей с особыми потребностями.

Логика следующая:

Проверяется элемент DOM.
Получается список ARIA-атрибутов на этом элементе.
Для каждого атрибута проверяется prohibitedProps.
Если элемент находится в списке запрещённых для данного атрибута — выбрасывается предупреждение или ошибка валидации.

Примеры использования

Валидация отдельных атрибутов

import { prohibitedProps } from 'aria-query';

function isAriaAllowed(tagName, ariaProp) {
  const prohibitedTags = prohibitedProps.get(ariaProp);
  return !prohibitedTags?.includes(tagName.toLowerCase());
}

console.log(isAriaAllowed('div', 'aria-checked')); // true
console.log(isAriaAllowed('script', 'aria-checked')); // false

Проверка всех ARIA-атрибутов элемента

function validateElementAria(element) {
  const tagName = element.tagName.toLowerCase();
  const ariaAttrs = Array.from(element.attributes)
    .filter(attr => attr.name.startsWith('aria-'))
    .map(attr => attr.name);

  return ariaAttrs.map(attr => ({
    name: attr,
    allowed: isAriaAllowed(tagName, attr)
  }));
}

// пример
const elem = document.createElement('button');
elem.setAttribute('aria-checked', 'true');

console.log(validateElementAria(elem));
// [{ name: 'aria-checked', allowed: true }]

Взаимосвязь с `elementRoles` и `roles`

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

Пример:

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

const role = 'checkbox';
const elemTag = 'div';

const allowedPropsForRole = roles.get(role)?.props || {};
const prohibitedForTag = prohibitedProps.get('aria-checked') || [];

if (prohibitedForTag.includes(elemTag)) {
  console.log('Использование aria-checked на div запрещено');
} else if (!allowedPropsForRole['aria-checked']) {
  console.log('aria-checked не разрешен для роли checkbox на этом элементе');
}

Особенности и ограничения

Чувствительность к регистру: все теги и имена атрибутов в prohibitedProps приведены к нижнему регистру.
Обновления библиотеки: при изменении спецификации ARIA список запрещённых свойств может расширяться. Это обеспечивает актуальность проверок.
Комплексная проверка: prohibitedProps не заменяет необходимость проверять допустимые свойства через роли (roles) — это дополнительный уровень валидации.

Практическое значение

Использование prohibitedProps позволяет:

Предотвратить ошибки, которые могут быть незаметны визуально, но критичны для скринридеров.
Автоматизировать проверку ARIA-атрибутов на этапе разработки.
Снизить риск конфликтов между семантикой HTML и ARIA.