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

[Livven]

trafficstars

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]

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.