search

dequelabs / axe-core

Accessibility engine for automated Web UI testing
https://www.deque.com/axe/
Mozilla Public License 2.0
5.86k stars 761 forks source link

`input role="switch"` fails on `aria-allowed-role` #3651

Open DavidSouther opened 1 year ago

DavidSouther commented 1 year ago

Product

axe Linter

Product Version

v4.4.2

Latest Version

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

image

straker commented 1 year ago

Confirmed this is a bug. Thanks for letting us know.

scottaohara commented 1 year ago

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.

DavidSouther commented 1 year ago

That... is an excellent observation haha! But the message doesn't say that. Maybe there's two bugs here?

charlietriplett commented 1 year ago

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: `

` 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.

`

` Neither error should be showing up here with the original code.

scottaohara commented 1 year ago

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.

straker commented 1 year ago

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.