dequelabs/axe-core

label-content-name-mismatch in ARIA switch compares value text with name

curtbellew opened this issue · 1 comments

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 Name

Thanks for the issue.