From ab13cfb689f1d0608487fbd13d20de5fd7f0b90e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sun, 2 Aug 2026 05:37:03 +0200 Subject: [PATCH] Scan the painted page, not the skeleton standing in front of it The `/insights/workouts` case gated its axe scan on `#main-content [role="status"]`. That role is not a content marker: the busy skeletons carry it too, and the one the streamed route shell paints first is a `chart-skeleton` with `aria-busy="true"`. The sentinel therefore went green on a document the page client had not touched yet. A frame trace under a 20x CPU throttle puts that skeleton on screen at 408 ms and the page's own `

` at 4119 ms, so for most of four seconds the scan could land on a tree with no level-one heading and report `page-has-heading-one` against `html`. That is the failure a loaded runner has been showing, and the page it accused has the heading. Gate on the two states the page itself renders instead, the list or the empty state. The overview case above already excludes `aria-busy` skeletons the same way. `/coach` had a smaller version of the same gap: `coach-page` is the sizing wrapper around a ``, on screen 241 ms before the conversation under it exists. Gate on the conversation. Neither sentinel waits for a heading. Removing the `

` from `SubPageShell`, `CoachHero` and the conversation's screen-reader title still turns the matrix red with four `page-has-heading-one` violations per theme. --- e2e/a11y.spec.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/e2e/a11y.spec.ts b/e2e/a11y.spec.ts index 03b200203..3cd202203 100644 --- a/e2e/a11y.spec.ts +++ b/e2e/a11y.spec.ts @@ -664,12 +664,21 @@ const INSIGHTS_ROUTES: readonly RouteCase[] = [ painted: (page) => page.locator(".recharts-wrapper").first(), }, { + // The two states this page's OWN render produces: the list, or the + // no-workouts empty state. Never `[role="status"]`, because the busy + // skeletons carry it too (`chart-skeleton` in the streamed route shell is + // one), so that selector matched the loading tree the server sends before + // the page client has mounted anything. On a loaded runner the scan then + // landed on a document whose only heading had not rendered yet and blamed + // the app for a missing `

` it does have. Same rule as the overview + // case above: a sentinel must prove the content, not the placeholder + // standing in for it. name: "/insights/workouts list", path: "/insights/workouts", painted: (page) => page .locator( - '#main-content [data-slot="workout-list"], #main-content [role="status"]', + '#main-content [data-slot="workout-list"], #main-content [data-slot="empty-state"]', ) .first(), }, @@ -679,9 +688,13 @@ const INSIGHTS_ROUTES: readonly RouteCase[] = [ painted: (page) => page.locator('[data-slot="workout-detail-header"]'), }, { + // `coach-page` is the sizing wrapper around a ``, + // so it is on screen while the conversation below it is still nothing at + // all. Gate on the conversation surface itself. name: "/coach", path: "/coach", - painted: (page) => page.locator('[data-slot="coach-page"]').first(), + painted: (page) => + page.locator('[data-slot="coach-conversation"][data-variant="page"]'), }, ];