You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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.
Describe the bug
Associating a
<label for="...">
with a<button id="...">
that has a differentrole
such ascheckbox
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
orswitch
.The text was updated successfully, but these errors were encountered: