label-content-name-mismatch in ARIA switch compares value text with name
curtbellew opened this issue · 1 comments
curtbellew commented
Product
axe-core
Product Version
4.10.0
Latest Version
- I have tested the issue with the latest version of the product
Issue Description
Expectation
label-content-name-mismatch should not compare the content of the switch component with the aria-labelledby text.
Actual
label-content-name-mismatch is comparing the contents of the switch component with the aria-labelledby text.
How to Reproduce
The following code will produce the violation - "Ensure that elements labelled through their content must have their visible text as part of their accessible name"
<label id="theswitch">Notifications</label>
<div aria-labelledby="theswitch" role="switch" aria-checked="true" tabindex="0" >
<span>[On]</span>
<span >Off</span>
</div>
Notifications
[On]
Off
`
#### Additional context
The text contained in the switch is value text of sorts even if the real value is controlled by the aria-checked. it's not a label so it shouldn't be compared for purposes of 2.5.3 Label in Namestraker commented
Thanks for the issue.