fix(a11y): give the marquee drift a control and name the landmarks - #25
Merged
Conversation
An AODA Level A pass found the marquee failing 2.2.2 Pause, Stop, Hide: the rows autostart, run 80s, and offered no way to stop them. The hover:paused they carried is mouse-only, so it reached neither keyboard nor touch, and hover is not a mechanism under the criterion. The reduced-motion path added earlier only serves readers who set the preference; 2.2.2 asks for a control for everyone. Marquee becomes a client component holding the paused state and driving data-[paused=true] on the track. Its children still arrive from the server organisms, so the cards stay server-rendered and only the atom ships JS. The control is hidden under reduced motion, where the row is already a scroller with no drift to stop. Landmark names come from the call sites rather than the component: every route carried two unlabelled navs, which a reader listing them cannot tell apart. Content baked into a component would break the reusability rule. The missing h1s the same pass found are not addressed here.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
From an AODA Level A pass over the site (axe-core across 7 routes at desktop and mobile, plus manual keyboard testing).
2.2.2 Pause, Stop, Hide (Level A) was failing. The marquee rows autostart, run for 80s, and had no mechanism to stop them. The
hover:pausedthey carried looks like a control but isn't one: it's mouse-only, so it reaches neither keyboard nor touch users, and hover is not a "mechanism" under the criterion. The reduced-motion work in #24 helps readers who set the OS preference; 2.2.2 asks for an in-page control available to everyone.Landmarks were unlabelled. Every route rendered two
navelements with no accessible names, which a screen-reader user listing landmarks cannot tell apart. (This is axe'slandmark-unique, tagged best-practice rather thanwcag2a, which is why a Level-A-only run doesn't surface it.)What
atoms/marquee.tsxpausedstate, drivingdata-[paused=true]:pausedon the track, with a keyboard-operable toggle.childrenstill arrive from the server organisms, so the cards stay server-rendered and only the atom ships JS. Control ismotion-reduce:hidden: that path is already a scroller with no drift to stoptemplates/header.tsx,templates/footer.tsx,organisms/global-menu.tsx,app/design/page.tsxPrimary,Footer,Menu, and the two specimens) passed at the call site, never baked intoNav/Menudocs/01-standards/accessibility.mdThe control lives in the atom rather than being plumbed through both consuming organisms, so every marquee is correct by construction.
Verification
Driven in Chromium via Playwright against the home testimonials:
EntergivesanimationPlayState: pausedand the transform stops changing. Measured with the pointer parked at (5,5) sohover:pausedcannot account for the result.Enteragain returns it torunning, transform moving.wcag2a+best-practice:landmark-uniqueclear.pnpm lint:checkandpnpm type:checkclean.Not covered
h1s. The same pass found/,/works,/experience,/aboutand the 404 have noh1(page-has-heading-one, andaccessibility.mdrule 1). Being handled separately./worksand the contour canvas are the same criterion and still have no control. A single global motion toggle would cover all three; this PR only fixes the marquee.Boardheader (one control per section, needs the organisms to go client), or give it a solid backdrop.