Eslint-plugin-jsx-a11y: false positive "A form label must be associated with a control"

[pixieduhst]

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.