eslint jsx-a11y label must be associated with a control error

Question

The <label> in this code is being rejected by the eslint jsx-a11y plugin:

A form label must be associated with a control. eslint(jsx-a11y/label-has-associated-control)

<div className="flex items-center">
    <input
        id="filter-mobile-color-1"
        name="color[]"
        value="beige"
        type="checkbox"
        className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
    />
    <label
        htmlFor="filter-mobile-color-1"
        className="ml-3 min-w-0 flex-1 text-gray-500"
    >
        Beige
    </label>
</div>

Screenshot:

As far as I can see I am matching the 'sibling' case for that rule:

In this case, use htmlFor and an ID to associate the controls.
<label htmlFor={domId}>Surname</label>
<input type="text" id={domId} />

It might be a bug in eslint: https://stackoverflow.com/a/57619332/327074 — icc97, Mar 26 '23 at 12:56
This looks very relevant: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/566 — icc97, Mar 26 '23 at 12:58
Ah perhaps it is the airbnb config that requires a stricter rule that the label must wrap the input: **"The input needs to *also* be inside the label to satisfy the stricter form of the rule (which the airbnb config configures, for example)."** [eslint-plugin-jsx-a11y #718 (comment)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/718#issuecomment-650346255) — icc97, Mar 26 '23 at 13:12
**"A lot of TailwindUI examples use this pattern. It's not a11y-friendly. ☝️ I think TailwindUI should default to nesting elements within ``s."** [#718 (later comment)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/718#issuecomment-651370283). It is indeed a Tailwind UI component, I got the code from https://tailwindui.com/components/ecommerce/components/category-filters — icc97, Mar 26 '23 at 13:15

score 0 · Answer 1 · answered Mar 26 '23 at 18:37

I'm pretty sure it came down to this:

The input needs to also be inside the label to satisfy the stricter form of the rule (which the airbnb config configures, for example).

eslint-plugin-jsx-a11y #718 (comment)

But at that point I gave up - I did confirm that if I put it inside the label then it stopped giving the error:

<div className="flex items-center">
    <label
        htmlFor="filter-mobile-color-1"
        className="ml-3 min-w-0 flex-1 text-gray-500"
    >
        <input
            id="filter-mobile-color-1"
            name="color[]"
            value="beige"
            type="checkbox"
            className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
        />
        Beige
    </label>
</div>

I just stopped using the example.

eslint jsx-a11y label must be associated with a control error

1 Answers1