JS-0752 · `label` tags should have a text label and an associated control

label tags should have a text label and an associated control JS-0752

Anti-pattern

Minor

20 days ago — 20 days old

A form label must be associated with a control

67                            <input type="text" name="title" required className="w-full rounded-lg col-span-2 lg:col-span-3 h-10 p-2 text-left bg-neutral-300 dark:bg-zinc-600 outline-none focus:border-2 focus:border-zinc-500 focus:dark:border-neutral-500"/>
68                        </fieldset>
69                        <fieldset className="grid grid-cols-3 lg:grid-cols-4 p-2 mx-auto">
70                            <label className="text-xl lg:text-2xl my-auto p-1">Category</label>71                            <div id="dropdown" class={`relative ${dropdownStyles.dropdown} bg-zinc-300 dark:bg-zinc-600 rounded-lg px-3 dark:text-gray-200 dark:text-zinc-300 text-neutral-700 col-span-2 lg:col-span-3 p-0`} active={"" + dropdownActive}>
72                                <p className="text-lg transition ease-in-out duration-100 p-1 leading-loose hover:cursor-pointer select-none rounded-none" onClick={dropdownClick}>{category}</p>
73                                <ul className="grid grid-col-1 py-1 text-sm bg-zinc-300 dark:bg-zinc-600 rounded-b-lg pr-5 pl-3 dark:text-gray-200 dark:text-neutral-300 text-neutral-700 w-full max-h-32 overflow-y-auto mx-auto" aria-labelledby="dropdownMenu">

A form label must be associated with a control

pages/feedback.js

63                <main className="flex-grow w-full mx-auto min-h-full">
64                    <form method="GET" action="https://project.the-caverns.repl.co/api/feedback.php" className=" border-neutral-300 dark:border-neutral-600 w-5/6 lg:w-1/3 mx-auto rounded">
65                    <fieldset className="grid grid-cols-3 lg:grid-cols-4 p-2 mx-auto">
66                            <label className="text-xl lg:text-2xl my-auto p-1">Subject</label>67                            <input type="text" name="title" required className="w-full rounded-lg col-span-2 lg:col-span-3 h-10 p-2 text-left bg-neutral-300 dark:bg-zinc-600 outline-none focus:border-2 focus:border-zinc-500 focus:dark:border-neutral-500"/>
68                        </fieldset>
69                        <fieldset className="grid grid-cols-3 lg:grid-cols-4 p-2 mx-auto">

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 htmlFor to 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>

Spelunking-Studios / The-Caverns-Website

Bad Practice

Recommended