Checkboxes with no label are not testable

[anpa]

Expectations

Checkboxes without a label should be testable/clickable via test tools like Selenium.

Reality

In a checkbox with no label, the label element has no dimensions even though its pseudo element :before renders the checkbox itself.

This makes it difficult to test given that elements without height/width are not considered visible by some testing libraries (and therefore they are not clickable).

Steps to Reproduce

1. Create a checkbox with no label;
2. Target the checkbox with Selenium;
3. Try to programatically click the checkbox, it fails with an element not visible exception.

Fine Print

• Component: checkbox, toggle, radio
• Browsers: all

[anpa]

/cc @mklitte

[austingreendev]

👋 Hi @anpa, thanks for opening this.

This makes it difficult to test given that elements without height/width are not considered visible by some testing libraries (and therefore they are not clickable).

Did you try applying a test attribute or ID to the associated <input /> that goes along with the label? The label interacts with the input so it should be equivalent.

[jzempel]

Closed for now. Please re-open (under react-components) if you still have issues. Thanks!