React Informed eslint associated control error after adding "Text" as control component

Question

I am trying to add the informed package to my project, but I am getting the eslint an error when I add the components like this:

    <Form id="intro-form">
      <label htmlFor="intro-name">
        First name:
        <Text field="name" id="intro-name" />
      </label>
      <button type="submit">Submit</button>
    </Form>

I have added Text to my .eslintrc as a controlComponent and I am still getting the error:

eslint] Form label must have ALL of the following types of associated control: nesting, id (jsx-a11y/label-has-for)

I'm guessing this is not the correct way to add this to my .eslintrc file?

{
    "rules": {
      "jsx-a11y/label-has-associated-control": [ 2, {
        "labelComponents": ["label"],
        "labelAttributes": ["htmlFor"],
        "controlComponents": ["Text"]
      }]
  },
    "parser": "babel-eslint",
    "extends": [
      "airbnb"
    ]
  }

When I change Text to input the error goes away, so it feels like I'm misunderstanding how this works. Any suggestions for how to allow Text as an acceptable input?

Answer 1

label-has-for was deprecated in v6.1.0. Use label-has-associated-control instead.

drop deprecated rule

// .eslintrc
"rules": {
  "jsx-a11y/label-has-for": "off",
  "jsx-a11y/label-has-associated-control": [ 2, {
    "labelComponents": [ "Label" ],
    "labelAttributes": ["label"],
    "required": "either"
  }]
}

However, to provide an answer, the components option determine which JSX elements should be checked for having htmlFor prop, which in your case is unclear from info provided.

deprecated rule: for some

// .eslintrc
"rules": {
  "jsx-a11y/label-has-for": [ 2, {
    "components": [ "Label" ],
    "required": {
      "some": [ "nesting", "id" ]
    }
  }]
}

// Label component
const Label = ({htmlFor, label}) => <label htmlFor={htmlFor}>{label}</label>

// usage
<Label htmlFor="test" label="label" />
<input id="test"></input>

deprecated rule: for every

// .eslintrc
"jsx-a11y/label-has-for": [ 2, {
  ...
  "required": {
    "every": [ "nesting", "id" ]
  }
}]

// usage
<Label htmlFor="test" label="label">
  <input id="test"></input>
</Label>