false positive "A form label must be associated with a control"

[stardvst]

I'm using airbnb eslint configuration, and eslint complains when input's label is wrapped in another element:

function App() {
  return (
    <form>
      <h2>
        <label htmlFor="new-todo-input">
          What needs to be done?
        </label>
      </h2>
      <input
        type="text"
        id="new-todo-input"
        name="text"
      />
    </form>
  );
}

I'm getting this error during compilation:

Failed to compile.
src\App.jsx
  Line 5:9:  A form label must be associated with a control  jsx-a11y/label-has-associated-control

[manavm1990]

Me 2.

[ljharb]

This isn't a false positive. The airbnb config requires that every input be BOTH for-id linked, and also the input nested inside the label.

[manavm1990]

Thanks @ljharb I C this has come up in the past.

[kalm42]

The error message needs to be updated. The form label is associated with a control. Please be more specific that "A label must be the parent of the associated control".

[ljharb]

It’s not associated in every engine, though, unless it’s both nested and linked. A PR to improve the message would be welcome.

[liby]

This isn't a false positive. The airbnb config requires that every input be BOTH for-id linked, and also the input nested inside the label.

@ljharb A false positive occurred when working with Field of Formik:

[ljharb]

@liby did you configure the plugin so it knows that a Field is an input?

[liby]

@liby did you configure the plugin so it knows that a Field is an input?

Thank you for reminding me. I haven't configured it yet because it works elsewhere. As shown below, I did not make any additional configure, nor did eslint-disable.

[ljharb]

Then the warning is expected, because it’s not an input, it’s a Field. I’m not sure why it works elsewhere without that config.

[liby]

Then the warning is expected, because it’s not an input, it’s a Field. I’m not sure why it works elsewhere without that config.

Thanks for the tip. I configured it as follows, and it works.

"rules": {
  "jsx-a11y/label-has-associated-control": [
      "error",
      {
        "controlComponents": ["Field"],
        "assert": "both"
      }
  ],
}

But following the description in the readme doesn't work.

I guess it has something to do with the definition of Field.

[ljharb]

@liby at this point i think a new issue would be warranted; but first make sure you're using the latest version of the plugin, and you're also looking at the docs not on main, but on the version tag you're using.