Skip to content

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

@Livven

Description

@Livven

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.

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingstatus: ready for workThis issue is ready to be worked on.

Type

No type

Projects

Status

Needs release

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions