role="tab" not working as expected for <input type="radio"/>
(ARIA role tab is not allowed for given element)
#4431
Labels
ungroomed
Ticket needs a maintainer to prioritize and label
Product
axe-core
Product Version
4.9.0
Latest Version
Issue Description
Expectation
The playwright tests shouldn't fail.
Actual
The playwright test fails with:
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 oftablist
:Based on my example I get this in Chrome:
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 oftablist
. The issue comes from wrapping therole=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 becauserole=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.The text was updated successfully, but these errors were encountered: