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?

How did you go about solving this? – kellymandem Feb 28 '20 at 09:02 — kellymandem, Feb 28 '20 at 09:02
@kellymandem Unfortunately, I didn't. It's still there. – Luke Schlangen Apr 24 '20 at 14:00 — Luke Schlangen, Apr 24 '20 at 14:00

piouson · Accepted Answer · 2021-01-25T10:14:23.783

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

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.

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>

for every

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

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

turn off deprecated rule

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

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

1 Answers1

Linked