Eslint-plugin-jsx-a11y: label-has-associated-control documentation incorrect

[setek]

Hi,

https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/v6.1.0/docs/rules/label-has-associated-control.md

Example still shows label-has-for. I can do a really quick easy PR to fix it, but need access.

Cheers

[ljharb]

You don't need any access to make a PR; PRs are typically made from personal forks.

It'd be great to also add docs for the assert option.

[jessebeach]

@setek go ahead and propose the PR. I'm happy to review!

[younes-io]

I have this piece of code that I cannot validate:

    <div className="form-group row">
    <label htmlFor="inputUsername1" className="col-sm-2 col-form-label">
      Username
    </label>
    <div className="col-sm-10">
      <input
        type="text"
        className="form-control"
        disabled={disable}
        id="inputUsername1"
        placeholder="Username"
      />
    </div>

I get this error:

A form label must be associated with a control. (jsx-a11y/label-has-associated-control)

Any suggestions? (I can't nest as the input is inside a div and I need to respect the UI).

[jessebeach]

@younesherlock that should pass. What configuration are you using for the rule?

[younes-io]

@jessebeach I used this and it worked:

    "jsx-a11y/label-has-associated-control": [ 2, {
    "labelComponents": ["label"],
    "labelAttributes": ["htmlFor"],
    "controlComponents": ["input"]
  }]

[Om4ar]

when i supplied any rule config like

  "jsx-a11y/label-has-associated-control": [ 2, {
    ...
  }]

it passed, but if i didn't specify that config it should work too , that is the problem

[jessebeach]

@younesherlock @MuhamadOmr yes, I agree you shouldn't need to add that configuration; it just represents what the default behavior should be. I'll look into it. Thank you both for the additional information.

[JDansercoer]

Any updates on the issue?

This is what's needed for me to make the rules pass

    'jsx-a11y/label-has-associated-control': [
      2,
      {
        labelComponents: ['label'],
      },
    ],

[ndushay]

I'm having the same problem with 6.1.2. If it helps, here's info from my eslintrc.js:

...
extends: [
    "eslint:recommended",
    "plugin:node/recommended",
    "plugin:react/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:jsx-a11y/recommended",
    "plugin:security/recommended"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
  },
  settings: {
    "import/resolver": {
      "node": {
        "extensions": ['.js','.jsx']
      }
    },
    "react": {
      "version": "16.6"
    }
  }
...
  rules: {
...
    // see https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/457
    //   the below is intended to be the default configuration
    "jsx-a11y/label-has-for": [
      "warn",
      {
        "labelComponents": ["label"]
      }
    ],
...

[jessebeach]

Thank you for the extra data!

[jessebeach]

I'll resolve this this weekend.

[jessebeach]

The documentation is updated on master and all the cases in this thread pass on master. I'm closing this thread.

[matheusalxds]

@jessebeach I used this and it worked:

    "jsx-a11y/label-has-associated-control": [ 2, {
    "labelComponents": ["label"],
    "labelAttributes": ["htmlFor"],
    "controlComponents": ["input"]
  }]

Works for me!!