search

microsoft / accessibility-insights-web

Accessibility Insights for Web
https://accessibilityinsights.io
MIT License
842 stars 152 forks source link

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

Open Livven opened 1 week ago

Livven commented 1 week ago

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.

v-viyada commented 1 week ago

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