feat(wcag): add accessible-authentication rule for wcag 2.2#5046
feat(wcag): add accessible-authentication rule for wcag 2.2#5046devansh0703 wants to merge 2 commits intodequelabs:developfrom
Conversation
Add a new accessible-authentication rule and check, with unit and integration tests, locale template messages, and rule docs updates.\n\nInclude shadow DOM coverage in check tests and update changelog for submission readiness.
|
|
There was a problem hiding this comment.
Pull request overview
Adds a new WCAG 2.2 rule/check (accessible-authentication) intended to validate autocomplete tokens on password inputs, with supporting unit + integration fixtures and documentation/localization updates.
Changes:
- Introduces
accessible-authenticationrule definition + check evaluate logic forcurrent-password/new-password. - Adds unit tests and integration HTML/JSON fixtures (including multi-token and Shadow DOM scenarios).
- Updates locale template strings, rule descriptions documentation, changelog, and lockfile.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
lib/rules/accessible-authentication.json |
New WCAG 2.2 rule definition for password inputs |
lib/checks/forms/accessible-authentication.json |
New check metadata/messages for the rule |
lib/checks/forms/accessible-authentication-evaluate.js |
Evaluate logic for parsing autocomplete tokens |
test/checks/forms/accessible-authentication.js |
Unit tests for the new check |
test/integration/rules/accessible-authentication/accessible-authentication.html |
Integration fixture HTML (includes Shadow DOM input) |
test/integration/rules/accessible-authentication/accessible-authentication.json |
Expected integration results for the fixture |
locales/_template.json |
Adds rule description/help + check pass/fail/incomplete strings |
doc/rule-descriptions.md |
Adds rule to the WCAG 2.2 rules table |
CHANGELOG.md |
Adds Unreleased feature entry for the new rule |
package-lock.json |
Updates lockfile entries (incl. chromedriver spec sync) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| { | ||
| "id": "accessible-authentication", | ||
| "impact": "serious", | ||
| "selector": "input[type=\"password\"]", | ||
| "tags": ["cat.forms", "wcag22aa", "wcag337"], | ||
| "metadata": { |
There was a problem hiding this comment.
accessible-authentication is intended to be disabled by default per the WCAG 2.2 section and this PR’s description, but this rule JSON does not set "enabled": false. As a result, the rule will run by default, unlike target-size (see lib/rules/target-size.json). Add "enabled": false to keep WCAG 2.2 rules opt-in.
| const autocomplete = virtualNode.attr('autocomplete'); | ||
| if (!autocomplete) { | ||
| return undefined; | ||
| } | ||
|
|
||
| const tokens = String(autocomplete).toLowerCase().split(/\s+/); | ||
| const isValid = | ||
| tokens.includes('current-password') || tokens.includes('new-password'); | ||
|
|
||
| if (isValid) { | ||
| return true; | ||
| } | ||
| return undefined; | ||
| } |
There was a problem hiding this comment.
This check never returns false (it only returns true or undefined), which makes the fail message unreachable and prevents the rule from ever producing a violation—even when autocomplete is present but not one of the supported password tokens. If failures are intended, return false for invalid/missing tokens; if not, remove the fail message (and consider updating the rule description/Issue Type accordingly) to avoid dead/unused metadata.
| "description": "accessible-authentication tests", | ||
| "rule": "accessible-authentication", | ||
| "violations": [], | ||
| "passes": [["#pass1"], ["#pass2"], ["#pass3"]], |
There was a problem hiding this comment.
The HTML fixture includes a shadow-DOM password input with id="pass-shadow", but the expected results don’t include it. Since axe’s flattened-tree querying supports shadow DOM, this test will likely miss an expected pass (typically represented as a selector stack like ["#shadow-host", "#pass-shadow"]). Add the shadow input to passes (or remove it from the fixture if it’s not meant to be asserted).
| "passes": [["#pass1"], ["#pass2"], ["#pass3"]], | |
| "passes": [["#pass1"], ["#pass2"], ["#pass3"], ["#shadow-host", "#pass-shadow"]], |
Set accessible-authentication as opt-in by default to match WCAG 2.2 rule handling.\n\nReturn false for invalid autocomplete tokens so fail messaging and violations are reachable, while keeping missing autocomplete as incomplete.\n\nUpdate unit and integration tests to reflect the revised pass/violation/incomplete outcomes.
WilcoFiers
left a comment
WilcoFiers
left a comment
There was a problem hiding this comment.
Testing whether password fields have autocomplete has very little to do with 3.3.8 Accessible Authentication. Instead of opening a pull request can you open an issue to propose what you had in mind so that it can be discussed first?
Summary
Add a new WCAG 2.2 rule,
accessible-authentication, for password inputs with validautocompletetokens.Changes
accessible-authenticationcurrent-password/new-passwordlocales/_template.json,doc/rule-descriptions.md, andCHANGELOG.mdTesting
npm run fmtnpm run eslintnpm run buildnpm run test:unit -- testFiles=lib/checks/forms/accessible-authentication-evaluate.js,test/integration/rules/accessible-authentication/accessible-authentication.jsonNotes
npm test(color-contrast).