Eslint-plugin-jsx-a11y: Form label must have associated control on compliant markup

[sppatel]

This example markup is compliant.

<label htmlFor="firstName">First Name</label>
<input id="firstName" type="text" />

Why is linting failing with..

error  Form label must have associated control  jsx-a11y/label-has-for

[sppatel]

Nevermind I needed to change the config from every to some

"required": {
                "some": [ "nesting", "id" ]
            }

[captDaylight]

Could you elaborate on why it needs to be some?

[ljharb]

@captDaylight the default is "every" - you should both for-id-link and label-wrap your inputs. "some" means it will pass if you do either one of those.

[captDaylight]

@ljharb hey thanks for the quick response, though I don't follow. I have a label and and input as at the top of the issue, htmlFor in label and id in input and it's throwing this error. What do you mean by for-id-link and label-wrap?

[ljharb]

@captDaylight i mean that a) the label's "for" matches the input's "id", and also b) the input must be inside the label.

[captDaylight]

GOTCHA, ok, that makes sense. Thanks for the time!

[skirankumar7]

Nevermind I needed to change the config from every to some

"required": {
                "some": [ "nesting", "id" ]
            }

Could you please tell me what is config, where it is to change every to some?

[Christopotamus]

@skirankumar7
I ran into this issue as well, here's what my eslintrc.json looks like after I got it working:

{
    "extends": "airbnb",
    "env": {
      "browser": true,
      "jest": true
    },
    "rules": {
      "jsx-a11y/label-has-associated-control": [ "error", {
        "required": {
          "some": [ "nesting", "id"  ]
        }
      }],
      "jsx-a11y/label-has-for": [ "error", {
        "required": {
          "some": [ "nesting", "id"  ]
        }
      }]
    }
}

As you can see, I had to add the new stuff under "Rules" for the two rules that I was getting errors from.

[NishargShah]

@skirankumar7
I ran into this issue as well, here's what my eslintrc.json looks like after I got it working:

{
    "extends": "airbnb",
    "env": {
      "browser": true,
      "jest": true
    },
    "rules": {
      "jsx-a11y/label-has-associated-control": [ "error", {
        "required": {
          "some": [ "nesting", "id"  ]
        }
      }],
      "jsx-a11y/label-has-for": [ "error", {
        "required": {
          "some": [ "nesting", "id"  ]
        }
      }]
    }
}

As you can see, I had to add the new stuff under "Rules" for the two rules that I was getting errors from.

Restart your local server and its works fine