Особенности теневого DOM

Теневой DOM (Shadow DOM) является ключевой технологией веб-компонентов, позволяющей изолировать внутреннюю структуру элемента от остальной части документа. Это создаёт закрытую область, где стили и скрипты не влияют на внешние элементы и наоборот. Для инструментов доступности, таких как библиотека Axe-core, работа с теневым DOM требует особого внимания, поскольку стандартный обход DOM не всегда позволяет корректно анализировать скрытые или инкапсулированные элементы.

Структура теневого DOM

Теневой DOM создаётся при помощи метода attachShadow({ mode: 'open' | 'closed' }).

Open Shadow DOM — доступен извне через свойство element.shadowRoot. Axe-core может напрямую анализировать его содержимое.
Closed Shadow DOM — полностью скрыт от внешнего кода. Стандартные методы доступа к нему отсутствуют, что делает анализ элементов сложным.

Внутри теневого DOM содержатся:

Контейнерные элементы — <div>, <section> и другие HTML-элементы, полностью инкапсулированные.
Стили и скрипты — применяются только к элементам внутри shadow root.
Слот-элементы — <slot> используется для распределения внешнего контента в теневом DOM.

Поддержка Axe-core

Библиотека Axe-core начиная с версии 4.0 имеет встроенную поддержку теневого DOM. Основные механизмы:

Рекурсивный обход shadow root — Axe-core автоматически обнаруживает все открытые shadow root и выполняет анализ их содержимого, включая вложенные компоненты.
Распределение слотов — содержимое <slot> корректно отображается как часть визуальной структуры, что позволяет проверять доступность с точки зрения пользователей.
Фильтрация скрытых элементов — элементы с display: none или aria-hidden="true" исключаются из анализа, даже если они находятся внутри shadow DOM.

Ограничения анализа

Closed shadow DOM недоступен стандартными методами. Axe-core не может анализировать его содержимое без использования внутреннего API компонента.
Динамически добавленные элементы внутри shadow root требуют повторного вызова анализа. Axe-core предоставляет возможность отслеживания изменений через MutationObserver, что позволяет актуализировать результаты проверок.
Стили и визуальное скрытие могут влиять на детектирование проблем доступности, особенно если используется clip-path, opacity: 0 или нестандартные CSS-трюки.

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

Для интеграции Axe-core с теневым DOM используются стандартные методы библиотеки:

import axe from 'axe-core';

// Запуск анализа конкретного элемента с теневым DOM
const element = document.querySelector('my-component');
axe.run(element, {
  // Настройки правил
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  }
}).then(results => {
  console.log(results.violations);
});

Особенности применения:

Перед анализом необходимо убедиться, что все shadow root уже смонтированы.
При работе с компонентами, содержащими глубокие вложенные shadow root, можно использовать параметр includeShadowDOM: true для рекурсивного обхода:

axe.run(document, { includeShadowDOM: true })
    .then(results => console.log(results.violations));

Настройка правил для компонентов

Для теневого DOM особенно важна настройка правил Axe-core. Основные моменты:

Label и Name — проверка наличия текстовых описаний для элементов форм, кнопок и интерактивных элементов внутри shadow DOM.
Contrast — анализ контраста текста с фоном в инкапсулированных стилях.
ARIA-атрибуты — корректность использования aria-label, aria-labelledby и role, применяемых к элементам внутри shadow root.

Рекомендуется явно указывать путь к элементам shadow DOM при необходимости тестирования конкретных интерактивных блоков, чтобы избежать ложноположительных или ложноотрицательных результатов.