Repository navigation
ci(docs): add axe accessibility checks and fix existing violations - #1048
Conversation
Adds a docs-a11y job that builds apps/docs, serves it, and runs axe-core against every page in the sitemap in light and dark mode. Existing violations are listed in KNOWN_VIOLATIONS so the job only fails on new ones.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Fixes the logo link name, light-mode muted text and home page code contrast, the home copy button name, example tab target size, scrollable code regions, adapter filter tab aria-controls, and GFM task list checkbox labels. Removes those entries from KNOWN_VIOLATIONS; wide MDX tables remain because the wrapper comes from @vercel/geistdocs.
Wraps the Geistdocs table in a focusable, labeled region that owns horizontal scrolling, so keyboard users can scroll wide tables. Clears the last KNOWN_VIOLATIONS entry.
|
docs-a11y failed on 117e8d6 because main moved to 588da04 wraps |
Rebuild the lockfile from main's pnpm-lock.yaml plus this PR's docs devDependencies (@axe-core/playwright, playwright) so main merges into this branch without a lockfile conflict.
|
docs-a11y failed on cf56ce7 after the main merge brought in 2c702ff adds it to |
Signed-off-by: Ben Sabic <bensabic@users.noreply.github.com>
Summary
Adds a
docs-a11yCI job that builds the docs site, serves it locally, and runs axe-core against every page. It also fixes all of the violations the job found on the current site.apps/docs/scripts/a11y.mtsreads page URLs from/sitemap.mdand adds/,/adapters, and/resources, which the sitemap does not list. It checks each page in light and dark mode with@axe-core/playwrightagainst the WCAG 2.0, 2.1, and 2.2 A and AA rules.pnpm --filter docs a11y [base-url]. The base URL defaults tohttp://localhost:3000.Fixes
The first run against chat-sdk.dev failed all 192 page checks across 7 rules. This PR fixes all of them:
link-namearia-hidden.Logoingeistdocs.tsxnow includes visually hidden "Chat SDK" text.color-contrast--color-fd-muted-foregroundmoves from Geist gray-800 to gray-900. Home page code usesgithub-light-defaultinstead ofgithub-light, whose orange token was 3.5:1. Adapter notice boxes usetext-gray-900.button-name/aria-label.target-size/scrollable-region-focusable/, adapter pages,/docs/api/*,/docs/testingTypeTables render inside a focusable, labeled region that handles horizontal scrolling, wrapping the Geistdocs table.aria-valid-attr-value/adaptersaria-controlsat Radix panels that are never rendered. They now point at the adapter results list.label/docs/contributing/documentinglabel.Known violations
KNOWN_VIOLATIONSin the script accepts violations that come from a dependency and cannot be fixed here right away. Entries print as warnings instead of failing the job, and the script reports entries that stop matching.It has one entry. Since
@vercel/geistdocs2.13, the sidebar section header button shows the section name (for example "Official Adapters") but has thearia-label"Back to all documentation sections". axe flags this aslabel-content-name-mismatchon every adapter page. The entry uses"*"because the affected pages grow with the adapter catalog, and should be removed once Geistdocs fixes the label.Test plan
github-light-defaulttoken color is at least 4.5:1 on white.pnpm check,tscforapps/docs,pnpm knip, andpnpm install --frozen-lockfilepass.docs-a11yjob runs on this PR against a local production build of the docs site.Checklist
git commit -s)pnpm validatepasses