Доступность и тестируемость

В архитектуре с первого дня

Содержимое canvas по своей природе невидимо для программ чтения с экрана. doper не относится к доступности как к слою, который накидывают после релиза: ядро ведёт дерево семантики (role / label / value / bounds / focusable), а @dopejs/pingo-a11y инкрементально отображает его в абсолютно позиционированное теневое DOM-дерево рядом с canvas.

Теневые элементы визуально прозрачны, но присутствуют в дереве доступности и в порядке обхода по Tab; фокус на них перенаправляется в сессию редактирования движка, поэтому пользователь клавиатуры реально работает с полями ввода внутри canvas.

Объявление семантики

<container semanticRole="region" semanticLabel="Панель оплаты">
  <text value="Оплата" semanticRole="heading" semanticLabel="Оплата" />
  {TextField({ semanticLabel: "Получатель", value, revision })}
</container>

У editableText по умолчанию семантика textbox. Значение поля пароля никогда не попадает в дерево семантики.

E2E на основе семантики

Поскольку дерево семантики зеркалится в настоящий DOM, E2E может выбирать элементы по роли и имени, а не сравнивать пиксели:

import { getByRole, queryAllByRole } from "@dopejs/pingo";

const email = getByRole(document.body, "textbox", { name: "Получатель" });
email.focus(); // перенаправляется в сессию редактирования движка
expect(queryAllByRole(document.body, "textbox")).toHaveLength(2);

Пиксельные снимки остаются, но как дополнительное свидетельство корректности отрисовки, а не единственное утверждение. Этот выбор избавляет от массовых падений UI-тестов при изменении растеризации шрифтов или сглаживания.

Наблюдение за деревом семантики

const root = await createHostedCanvasRoot(canvas, {
  onSemantics: (nodes) => inspect(nodes),
  accessibility: true, // включено по умолчанию; false отключает теневое дерево
});

Каждый узел даёт nodeId, role, label, value, мировые bounds, focusable, focused и флаг password. В покадровой диагностике dirtySemanticsNodes позволяет наблюдать частоту семантической инвалидации.

Квалификация платформы

Автоматизация покрывает экспорт дерева семантики, отображение в теневое дерево, селекторы по роли и подписи и клавиатурный контракт. Матрица поведения реальных программ чтения с экрана (VoiceOver, NVDA, TalkBack) относится к квалификации платформы, отслеживается отдельно и не входит в условия завершения инженерных работ. Эта граница не даёт выдавать непроверенные выводы об устройствах за обещание поддержки.

В демонстрации семантики в Playground можно прямо прочитать текущее дерево семантики.