mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
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 `<h1>` 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 `<Suspense fallback={null}>`, on screen 241 ms
before the conversation under it exists. Gate on the conversation.
Neither sentinel waits for a heading. Removing the `<h1>` from
`SubPageShell`, `CoachHero` and the conversation's screen-reader title
still turns the matrix red with four `page-has-heading-one` violations
per theme.
This commit is contained in:
1 parent
4a8a4e1e30
commit
ab13cfb689
1 file changed
+15
-2
+15
-2
@@ -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 `<h1>` 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 `<Suspense fallback={null}>`,
|
||||
// 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"]'),
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
Reference in new issue
Block a user