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

Allow <label> for <button> with e.g. role="checkbox" #7492

Open
Livven opened this issue Nov 14, 2024 · 1 comment
Open

Allow <label> for <button> with e.g. role="checkbox" #7492

Livven opened this issue Nov 14, 2024 · 1 comment
Assignees
Labels
bug Something isn't working status: ready for work This issue is ready to be worked on.

Comments

@Livven
Copy link

Livven commented Nov 14, 2024

Describe the bug

Associating a <label for="..."> with a <button id="..."> that has a different role such as checkbox will give an "Ensures buttons have discernible text" error.

This is expected for a button with the standard button role, but if a <button> element is used with a different role it should be allowed? The w3.org page is not entirely clear about the proper behavior here, but it seems to be a common pattern in third-party component libraries to use a <button> element for e.g. checkboxes (see Radix-UI as an example), and Firefox and Chrome accessibility inspectors show the associated label in these cases.

CodePen repro example

Use this code: <label for="switch">test<label><button id="switch" role="switch"></button>, or check the Radix-UI checkbox page.

Expected behavior

This should be allowed if the role is set to e.g. checkbox or switch.

@Livven Livven added the bug Something isn't working label Nov 14, 2024
@JGibson2019 JGibson2019 moved this from Needs triage to Accepted - vendor in Accessibility Insights Nov 18, 2024
@JGibson2019 JGibson2019 added the status: ready for work This issue is ready to be worked on. label Nov 18, 2024
@v-viyada
Copy link
Contributor

Hi @Livven , This is fixed in latest axe-core version 4.10.1 (dequelabs/axe-core#4607). We are working on upgrading axe-core to latest version in accessibility insights. It should resolve in next release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working status: ready for work This issue is ready to be worked on.
Projects
Status: Accepted - vendor
Development

No branches or pull requests

3 participants