BUGFIX: template-require-mandatory-role-attributes — accept <input type=checkbox> + role=switch#7
Closed
BUGFIX: template-require-mandatory-role-attributes — accept <input type=checkbox> + role=switch#7
Conversation
…a-checked from <input type=checkbox|radio> The rule required an explicit `aria-checked` on every element with a role that needs it — even when the host element is a semantic form control that contributes the state natively. WAI-ARIA APG documents <input type="checkbox" role="switch"> as an accessible switch pattern (see https://www.w3.org/WAI/ARIA/apg/patterns/switch/); the <input>'s native checked state maps to aria-checked. Fix: when the host is <input type="checkbox"> or <input type="radio"> and the role is one of {checkbox, menuitemcheckbox, menuitemradio, radio, switch}, treat aria-checked as satisfied. Matches eslint-plugin-jsx-a11y's role-has-required-aria-props, which uses axobject-query's isSemanticRoleElement to skip the check for element+role combinations where the native element already exposes the required state. Our implementation covers the common cases without pulling in the axobject-query dependency. Five new test cases added covering the documented pattern. Rule doc updated with an explicit example and an APG link.
🏎️ Benchmark Comparison
Full mitata output |
The previous exemption used a cartesian product of
`{checkbox, menuitemcheckbox, menuitemradio, radio, switch}` against
input types `{checkbox, radio}`, which silently accepted undocumented
pairings such as `input[type=checkbox] role=radio` or
`input[type=radio] role=switch`.
Replace that with an explicit whitelist of `{type}:{role}` pairs:
- `input[type=checkbox]` + `role=checkbox` (redundant but valid)
- `input[type=checkbox]` + `role=switch` (WAI-ARIA APG Switch pattern)
- `input[type=checkbox]` + `role=menuitemcheckbox`
- `input[type=radio]` + `role=radio` (redundant but valid)
- `input[type=radio]` + `role=menuitemradio`
The whitelist matches axobject-query's `elementAXObjects` for these
input-role combinations plus the WAI-ARIA APG Switch pattern
(https://www.w3.org/WAI/ARIA/apg/patterns/switch/). Other combinations
remain flagged for missing `aria-checked`.
Also lowercase the `type` attribute value before matching; HTML `type`
keywords are ASCII case-insensitive per the HTML spec, so values like
`Checkbox` must be treated the same as `checkbox`.
…er cases Translates 41 cases from peer-plugin rules: - jsx-a11y role-has-required-aria-props - vuejs-accessibility role-has-required-aria-props - @angular-eslint/template role-has-required-aria - lit-a11y role-has-required-aria-attrs The fixture documents where our rule matches peer behavior (e.g. the input+role semantic whitelist now recognized after this fix) and where it still diverges (space-separated role tokens, case-insensitivity, unknown roles, undocumented input+role pairings). Not wired into the default vitest run; provided for behavioral parity auditing.
Owner
Author
|
Moved upstream to ember-cli#2725. See that PR. |
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.
<input type="checkbox" role="switch">as an accessible switch — the native<input>'s checked state exposesaria-checkedto assistive technology.aria-checkedattribute on every element with a role that needs it.<input type="checkbox" role="switch">as missingaria-checked, a documented false positive.Fix
Treat
aria-checkedas satisfied when the host element is an<input>whose{type, role}pair appears in the following explicit whitelist:<input type>rolecheckboxcheckboxelementAXObjectscheckboxswitchcheckboxmenuitemcheckboxelementAXObjectsradioradioelementAXObjectsradiomenuitemradioelementAXObjectsExempted pairings match axobject-query's
elementAXObjectsfor the input-role combinations and the WAI-ARIA APG Switch pattern. Undocumented pairings (e.g.input[type=checkbox] role=radio,input[type=radio] role=switch) are NOT exempted and remain flagged for missingaria-checked.HTML
typekeyword values are ASCII case-insensitive per the HTML spec, so the comparison lowercases the attribute value before matching.Our fix covers the common cases inline without adding
axobject-queryas a dependency. Switching toaxobject-query(used by jsx-a11y / angular-eslint) would be a worthwhile follow-up, generalising the exemption to every documented semantic-role pairing.Prior art
role-has-required-aria-propsisSemanticRoleElement(type, attributes), which usesaxobject-queryto recognise element+role pairings where the native element already exposes the required state.role-has-required-ariaaxobject-query.role-has-required-aria-propsfilterRequiredPropsExceptionsthat matches only{role: switch, type: checkbox}— no axobject-query involvement.role-has-required-aria-attrsUpstream
[email protected]has the same false positive.