childrenPresentational

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

Определение childrenPresentational

childrenPresentational — это логическое свойство роли, которое указывает, что дочерние элементы роли не должны быть интерпретированы как отдельные элементы ARIA. Иными словами, при значении true потомки рассматриваются только как визуальные или структурные компоненты, а не как самостоятельные ARIA-элементы.

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

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(buttonRole.childrenPresentational); // false
  • Если значение false — дочерние элементы могут иметь собственные ARIA-атрибуты и роли.
  • Если значение true — дочерние элементы игнорируются скринридерами, основной элемент воспринимается целиком.

Практическое применение

Основное применение childrenPresentational связано с компонентами с декоративной разметкой:

  1. Кнопки с иконкой Когда кнопка содержит иконку внутри, часто нет смысла объявлять иконку отдельной ARIA-ролей.

    const iconButtonRole = roles.get('button');
console.log(iconButtonRole.childrenPresentational); // false

    В этом случае, если иконка не несет семантики, можно обернуть её как <span aria-hidden="true">.

  2. Меню и панельные компоненты Для контейнеров, которые агрегируют дочерние элементы, не требующие собственной роли, свойство childrenPresentational: true позволяет упростить доступность.

Как библиотека Aria-query хранит информацию

Каждая роль в roles содержит набор свойств:

  • name — имя роли.
  • superClass — родительские роли, наследующие поведение.
  • props — набор ARIA-атрибутов, применимых к роли.
  • childrenPresentational — булево значение, определяющее, нужно ли игнорировать дочерние элементы.

Пример просмотра всех ролей с активным childrenPresentational:

import { roles } from 'aria-query';

const rolesWithChildrenHidden = Array.from(roles.entries())
  .filter(([name, role]) => role.childrenPresentational)
  .map(([name]) => name);

console.log(rolesWithChildrenHidden);

Это позволяет строить динамические проверки доступности и выявлять элементы, где дочерние роли не должны влиять на восприятие.

Влияние на работу скринридеров

childrenPresentational напрямую влияет на модель доступности (Accessibility Tree):

  • Элементы с childrenPresentational: true не создают дочерние узлы в Accessibility Tree.
  • Все дочерние элементы воспринимаются как часть родителя.
  • Используется для упрощения интерфейсов, где внутренняя разметка декоративна.

Пример:

<button>
  <span class="icon" aria-hidden="true"></span>
  Submit
</button>

Даже без явного childrenPresentational, добавление aria-hidden="true" на дочерние элементы имитирует поведение childrenPresentational.

Использование вместе с props

Иногда childrenPresentational комбинируется с ARIA-свойствами:

  • aria-label — задает имя основного элемента.
  • aria-labelledby — связывает с внешними элементами для именования.
  • aria-hidden — может переопределять поведение дочерних элементов.
const dialogRole = roles.get('dialog');
console.log(dialogRole.childrenPresentational); // true
console.log(dialogRole.props.has('aria-label')); // true

Это показывает, что даже если дочерние элементы игнорируются, сам элемент может иметь собственное имя, обеспечивая корректную доступность.

Советы по использованию

  • Применять childrenPresentational для элементов декоративного содержания или агрегирующих контейнеров.
  • Не использовать для элементов, где дочерние элементы имеют интерактивную семантику.
  • При генерации компонентов проверять roles.get(roleName).childrenPresentational для корректной разметки ARIA.
  • Для сложных виджетов (меню, вкладки) важно понимать, какие элементы должны быть включены в Accessibility Tree, а какие нет.

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

Оглавление