{{ message }}
Add WCAG accessibility conformance test suite#42502
Open
mdo wants to merge 4 commits into
Open
Conversation
Introduce a unified, generated accessibility checker so per-component WCAG coverage is derived and verified rather than hand-maintained: - site/src/data/wcag.ts: shared catalog of WCAG criteria (title, level, version, "Understanding" URL) plus a criterion -> axe-core rule mapping and coverage-status metadata. - build/a11y.config.mjs: single source of truth selecting which criteria each component is tested against, with a built-in/partial/author coverage status. - build/test-a11y.mjs: renders each component's documented <Example> snippets in headless Chromium (compiled CSS + JS) and runs axe-core scoped to the rules mapped to each declared criterion, reporting PASS/FAIL/MANUAL/AUTHOR. - Add the "js-test-a11y" npm script and the axe-core dev dependency. - Add a universal-access icon to the docs icon sprite.
Member
Author
Member
|
a priori, this looks interesting, but probably need to see the fully implemented feature across all components - and then likely need a good QA pass to make sure all relevant aspects are covered for each component |
Member
|
related: as i've not kept track of BS for a while ... what stage is v6 at? is it at a point where a full-on manual accessibility review/test is warranted? |
Member
there will likely still need to be some notes/considerations that should be flagged as part of the prose, to explain more in-depth aspects that don't necessarily map cleanly to just a "do this or you fail this SC" |
Member
Author
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
2 participants
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.
Summary
Adds a unified, generated accessibility checker so per-component WCAG coverage is derived and verified in CI rather than hand-maintained per page. This grew out of the OTP accessibility work (twbs/discussions#42486): WCAG criteria are stable, but the mapping of which criteria apply to a component—and our coverage of each—should be a single source of truth that can be linted, not prose scattered across docs.
What's included
site/src/data/wcag.ts— shared catalog of WCAG success criteria (title, level, version, "Understanding" URL), a criterion → axe-core rule mapping (wcagAxeRules), and coverage-status metadata. Exposes typed criterion ids so configs are validated at build time.build/a11y.config.mjs— the single source of truth selecting which criteria each component is tested against, each with abuilt-in/partial/authorcoverage status and optional note. Currently coversforms/otp-inputandcomponents/menu.build/test-a11y.mjs— renders each configured component's documented<Example>snippets in headless Chromium (with the compiled CSS + JS bundle) and runs axe-core, scoped to the axe rules mapped to each declared criterion. Reports the criterion id, title, level, our coverage status, and a verdict:PASS/FAIL(machine-checkable, component-owned),MANUAL(component-owned, not axe-checkable), orAUTHOR(consuming app's responsibility).package.json— newjs-test-a11yscript (node --experimental-strip-types build/test-a11y.mjs) and theaxe-coredev dependency.Symbols.astro— adds auniversal-accessicon to the docs sprite for surfacing a11y status.Notes
forms/otp-inputandcomponents/menuentries pair with the separate OTP and menu PRs.