label tags should have a text label and an associated control JS-0752
Anti-pattern
Minor
a month ago
—
2 months old
A form label must be associated with a control
49 <ChevronDownIcon size={24} />
50 </Link>
51 </div>
52 <label 53 htmlFor="menu-drawer" 54 className="btn btn-circle min-h-10 h-10 w-10 btn-primary bg-white hover:bg-white shadow-none border-none" 55 > 56 <XIcon />
57 </label>
58 </div>A form label must be associated with a control
15 className="tooltip tooltip-secondary tooltip-bottom"
16 data-tip="Menu"
17 >
18 <label 19 htmlFor="menu-drawer" 20 className="btn btn-circle min-h-10 h-10 w-10" 21 data-testid="menu/open" 22 data-hotkey="Meta+k" 23 > 24 <MenuIcon />
25 </label>
26 </div>
Description
It is recommended to add text attributes for label tags as it helps the browser in easing accessibility operations.
There are two supported ways to associate a label with a control:
- Wrapping a control in a label tag.
- Adding
htmlForto a label and assigning it a DOM ID string that indicates an input on the page.
Bad Practice
function Func(props) {
return <label {...props} />
}
<input type="text" />
<label>Surname</label>
Recommended
function Func(props) {
const {
htmlFor,
...otherProps
} = props;
return <label htmlFor={htmlFor} {...otherProps} />
}
<label>
<input type="text" />
Surname
</label>