Description

Any interactive control (inputs, textarea, select, checkboxes, radio buttons, buttons, etc.) should always be labeled. This is a basic accessibility requirement as interactive controls need to inform users what they're about.

Turns out that many (all?) the base components for interactive controls do not enforce any check for some proper labeling nor hey make their lbel prop a required prop. This opens the door to developers misuse, as it is possible to:

• either pass an empty label prop
• or omit the label prop entirely

In both cases, the control will be unlabeled. Worth reminding that this is not only about the visual text associated with a control (which usually is a <label> element). It's is about the actual accessible name of a control: in case of missing or empty associated <label> element, missing aria-label / aria-labelledby or any other labeling mechanism, the control accessible name is empty.

Being open to misuse, my concern is that these components may potentially contribute to lower the accessibility level of the entire internet, given WordPress is used on millions and millions of web sites.

For no reason, ever, an interactive control should be unlabeled. All these components should enforce proper labeling.

As en example of developers misuse, here's a screenshot from a widely used WordPress plugin for e-commerce:

• A CheckboxControl control is passed an empty label prop, or the prop is omitted entirely.
• The CheckboxControl still renders a <label> element, but it's empty.
• The checkbox is unlabeled.
• Developers added some visible text close to the checkbox, but this text is only a paragraph. Visually, it looks like a label but it's not.

This is very far from ideal. Gutenberg should not allow for unlabeled controls. We can't rely on developers awareness and knowledge. Proper labeling must be enforced by the components themselves. Right now, passing an empty label prop or omitting it entirely doesn't even trigger a warning or error.

Cc @ciampo @mirka

Step-by-step reproduction instructions

• Add some interactive controls somewhere, omitting the label prop:

<CheckboxControl />
<TextControl autoComplete="off" value=""} />

• Observe a checkbox and an input field are rendered with no errors or warning.
• Observe the two controls are unlabeled.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes