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>;