Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

role="tab" not working as expected for <input type="radio"/> (ARIA role tab is not allowed for given element) #4431

Closed
1 task done
nmerget opened this issue Apr 26, 2024 · 1 comment
Labels
ungroomed Ticket needs a maintainer to prioritize and label

Comments

@nmerget
Copy link

nmerget commented Apr 26, 2024

Product

axe-core

Product Version

4.9.0

Latest Version

  • I have tested the issue with the latest version of the product

Issue Description

Expectation

The playwright tests shouldn't fail.

Actual

The playwright test fails with:

   "failureSummary": "Fix any of the following:
   ARIA role tab is not allowed for given element",
         "html": "<input role=\"tab\" type=\"radio\" aria-selected=\"true\" id=\"983a0cfc-19a3-4187-ae7a-e0a4b10b3cd0-tab-0\" aria-controls=\"983a0cfc-19a3-4187-ae7a-e0a4b10b3cd0-tab-panel-0\" name=\"983a0cfc-19a3-4187-ae7a-e0a4b10b3cd0\">",

How to Reproduce

Minimal example:

https://jsbin.com/cahifuvezi/edit?html,css,output

Additional context

Based on https://w3c.github.io/aria/#tab the role=tab should be accessibility children of tablist:

Authors MUST ensure elements with role tab are accessibility children of an element with the role tablist.

Based on my example I get this in Chrome:
image

Which should be fine 🐶☕🔥

Maybe axe only looks at the "real" DOM-Nodes to check for the roles? Also, I'm unsure if tab has to be a direct child of tablist. The issue comes from wrapping the role=tab in <li><label><input role=tab>.
To avoid the error I could add the role=tab to <li> but I would get another error because role=presentation can't have a focusable child (which is the <input type="radio"/>).

I tried nearly every combination to get a "correct" accessibility tree, so I think there should be an issue with axe resolving the nodes?

-> Why didn't we use a tab with button, because the <input type="radio"/> provides keyboard functions out of the box. I like this approach and I don't want to add additional JS to solve this.

@nmerget nmerget added the ungroomed Ticket needs a maintainer to prioritize and label label Apr 26, 2024
@straker
Copy link
Contributor

straker commented Apr 29, 2024

Thanks for the issue. What ARIA roles and attributes are allowed on which HTML elements is dictated by the ARIA in HTML spec. Specifically for input[type="radio'] only the menuitemradio role is allowed, which is why axe is saying the tab role is not allowed on the element.

@straker straker closed this as completed Apr 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ungroomed Ticket needs a maintainer to prioritize and label
Projects
None yet
Development

No branches or pull requests

2 participants