axe-core
axe-core copied to clipboard
dequelabs
`input role="switch"` fails on `aria-allowed-role`
Product
axe Linter
Product Version
v4.4.2
Latest Version
- [X] I have tested the issue with the latest version of the product
Issue Description
Expectation
<label>
<input
type="checkbox"
role="switch"
name="switch"
checked="checked"
aria-checked="false"
/>
Switch 1
</label>
should (I believe) be a valid aria configuration for a switch checkbox.
Actual
This code is flagged with
axe-linter (aria-allowed-role): Ensures role attribute has an appropriate value for the elementaxe-linter[dequeuniversity/aria-allowed-role](https://dequeuniversity.com/rules/axe/4.4/aria-allowed-role?application%3Daxe-linter)
How to Reproduce
demo.html:
<!DOCTYPE html>
<html lang="en-US">
<body>
<label>
<input
type="checkbox"
role="switch"
name="switch"
checked="checked"
aria-checked="false"
/>
Switch 1
</label>
</body>
</html>
Additional context
per the provided demo code snippet though:
<label>
<input
type="checkbox"
role="switch"
name="switch"
checked="checked"
aria-checked="false"
/>
Switch 1
</label>
there should at least be a failure called out for the use of checked and aria-checked=false, since those contradict each other and the native HTML attribute is supposed to take precedent over the aria equivalent.
That... is an excellent observation haha! But the message doesn't say that. Maybe there's two bugs here?
Note: I think this relates to https://github.com/dequelabs/axe-core/issues/2225 aria-checked shouldn't be a mandatory attribute for element with role=switch if the element is created with checkbox. #2225
Axe Linter in VS Code finds 2 problems with this:
<input type="checkbox" role="switch" id="marketingCookies" checked> <label for="marketingCookies">Optional marketing cookies</label>
axe-linter (aria-required-attr): Ensures elements with ARIA roles have all required ARIA attributes
axe-linter (aria-allowed-role): Ensures role attribute has an appropriate value for the element
Adding aria-checked="false" removes the aria-required-attr but aria-allowed-role remains.
<input type="checkbox" role="switch" aria-checked="false" id="marketingCookies" checked>
Neither error should be showing up here with the original code.
Adding aria-checked="false" removes the aria-required-attr but aria-allowed-role remains.
<input type="checkbox" role="switch" aria-checked="false" id="marketingCookies" checked>Neither error should be showing up here with the original code.
which is exactly why the linter needs to be updated to not call out the error, so that invalid code like this isn't written to suppress the issue.
Just a heads up on this ticket. This should be fixed in the next release of axe-linter, which should be happening in the next few weeks.