jsx_a11y/label-has-associated-control Correctness
What it does
Enforce that a label tag has a text label and an associated control.
Why is this bad?
A form label that either isn't properly associated with a form control (such as an <input>), or doesn't contain accessible text, hinders accessibility for users using assistive technologies such as screen readers. The user may not have enough information to understand the purpose of the form control.
Examples
Examples of incorrect code for this rule:
jsx
function Foo(props) {
return <label {...props} />
}
<input type="text" />
<label>Surname</label>Examples of correct code for this rule:
jsx
function Foo(props) {
const { htmlFor, ...otherProps } = props;
return <label htmlFor={htmlFor} {...otherProps} />;
}
<label>
<input type="text" />
Surname
</label>;