DOM order is not always keyboard order — I built a Chromium scanner to visualize it

Описание и применение

FocusPath – это инструмент, который в реальном браузере Chromium отслеживает путь фокуса при нажатии Tab и генерирует HTML‑отчёт с визуализацией реального маршрута клавиатурного навигации, помогая выявлять скрытые проблемы, недоступные статическому анализу DOM.

Задача

Keyboard navigation order cannot be reliably inferred from DOM order due to tabindex, JavaScript focus redirects, dialogs, shadow roots, cross‑origin frames, and scrolling, making it hard to observe actual focus traversal.

Результат

FocusPath provides a deterministic, evidence‑based visualization of keyboard focus traversal, revealing hidden focus behaviors that static analysis misses and enabling more accurate accessibility reviews.

Рабочий процесс

• Run FocusPath CLI against a target URL (e.g., npx focuspath https://example.com).
• Optionally set viewport, direction, or traversal limits via CLI flags.
• FocusPath captures each focus stop, screenshots, and metadata.
• Generate an HTML report with generateHtmlReport or via the CLI output.
• Review the report to see the focus route, element details, and traversal reasons.
• Integrate FocusPath into automated workflows or manual review cycles.
• Combine with rule engines for comprehensive accessibility testing.

Доказательства

FocusPath follows Tab or Shift+Tab navigation in a real Chromium session, records the observable focus stops, and generates a portable HTML report with the route drawn over the page.

Источник

The report also explains why traversal ended: the document was exhausted, focus stopped moving, a cycle appeared, or a configured safety budget was reached.

Источник