How to find cross-component accessibility issues
A component may be locally valid but create a semantic problem when its markup is combined with a parent. Cross-component analysis evaluates that composed structure.
Reproduce a skipped heading
The page supplies an h1 while the imported panel begins at h3. Neither file contains a complete document outline on its own, but together they skip h2.
// Page.tsx
<main><h1>Dashboard</h1><StatsPanel /></main>
// StatsPanel.tsx
<section><h3>Statistics</h3></section>Correct the composed structure
Use the heading level required by the page outline, or design the component API so its caller supplies the heading element or level deliberately.
<main><h1>Dashboard</h1><section><h2>Statistics</h2></section></main>Use one rule set in editor, CLI, and CI
Run inline diagnostics during editing, a workspace or CLI scan before commit, and the GitHub Action on pull requests. Each surface is intended to expose the same semantic class of issue at a different point in the workflow.