Skip to content

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

Description

@curtbellew

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions