eslint-plugin-jsx-a11y: label-has-for: broken in v6.1.0

/Users/justfly/projects/aggrow-static/src/components/common/input-combobox.js
  265:9   error  The value for aria-controls must be a idlist      jsx-a11y/aria-proptypes
  267:9   error  The value for aria-owns must be a idlist          jsx-a11y/aria-proptypes
  297:11  error  The value for aria-activedescendant must be a id  jsx-a11y/aria-proptypes
  298:11  error  The value for aria-controls must be a idlist      jsx-a11y/aria-proptypes

/Users/justfly/projects/aggrow-static/src/components/common/input-quantity-go-to-cart.js
  29:3  error  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for

/Users/justfly/projects/aggrow-static/src/components/common/input-quantity-max.js
  28:3  error  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for

/Users/justfly/projects/aggrow-static/src/components/common/input-quantity-remove.js
  28:3  error  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for

/Users/justfly/projects/aggrow-static/src/components/common/input-select.js
  249:9   error  The value for aria-controls must be a idlist      jsx-a11y/aria-proptypes
  251:9   error  The value for aria-owns must be a idlist          jsx-a11y/aria-proptypes
  277:11  error  The value for aria-activedescendant must be a id  jsx-a11y/aria-proptypes
  278:11  error  The value for aria-controls must be a idlist      jsx-a11y/aria-proptypes

/Users/justfly/projects/aggrow-static/src/components/common/labeled-checkbox.js
  38:3  error  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for

/Users/justfly/projects/aggrow-static/src/components/common/labeled-combobox.js
  43:5  error  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for

/Users/justfly/projects/aggrow-static/src/components/common/labeled-select.js
  39:5  error  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for

/Users/justfly/projects/aggrow-static/src/components/common/labeled-textarea.js
  38:3  error  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for

✖ 15 problems (15 errors, 0 warnings)

Can somebody explain what does means idlist, nesting ?

label-has-for is really bothers me - I have template literals there, and it works fine in 6.0.3 looks like all of this errors are false negatives.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 29 (8 by maintainers)

Commits related to this issue

remove broken jsx-a11y/label-has-for in favor of label-has-associated-control https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/455 — committed to EddyVinck/Infinite-Notes by EddyVinck 6 years ago
Disable jsx-a11y/label-has-for in recommended Since there's [issues with this](https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/455) and it's [deprecated](https://github.com/evcohen/eslint-p... — committed to greypants/eslint-plugin-jsx-a11y by greypants 6 years ago

Most upvoted comments

@JustFly1984 use label-has-associated-control instead of label-has-for. We deprecated label-has-for in v6.1.0.

I’ll look into the breakage, though. Deprecated doesn’t mean broken 😃

jessebeach on Jul 6, 2018

@JustFly1984 @ljharb Ok, got the test case.

This fails:

<label htmlFor={id}>{ labelText }<div><input id={id} type="checkbox" name={id} value={value} />{ checkboxText }</div></label>

This passes:

<label htmlFor={id}>{ labelText }<input id={id} type="checkbox" name={id} value={value} />{ checkboxText }</label>

It’s not recursing enough.

jessebeach on Jul 12, 2018

@JustFly1984 use label-has-associated-control instead 😃 label-has-for is a little too brittle.

jessebeach on Jul 13, 2018

Well, actually the rule combination that get rid of my errors is "allowChildren": true:

"jsx-a11y/label-has-for": [ 2, {
        "components": [],
        "required": {
            "every": [ "nesting", "id" ]
        },
        "allowChildren": true
    }],

Adding input components doesn’t help, and even make it worse.

Also without a rule, I had an issue with textarea wrapped in label.

const LabeledTextarea = ({
  id,
  placeholder,
  labelText,

  autoComplete,
  autoCapitalize,
  autoCorrect,

  icon,
  iconClassName,

  labelClassName,
  inputClassName,
  validClassName,
  invalidClassName,

  value,
  valid,
  invalid,

  disabled,

  onBlur,
  onFocus,
  onChange
}) => (
  <label
    htmlFor={id}
    className={
      classnames(labelClassName, bold)
    }
  >
    { labelText }

    <textarea
      id={id}
      name={id}
      className={
        classnames(inputClassName, normal, {
          [validClassName]: valid,
          [invalidClassName]: invalid
        })
      }
      value={value}
      placeholder={placeholder}
      disabled={disabled}

      onChange={onChange}
      onBlur={onBlur || onChange}
      onFocus={onFocus || onChange}

      autoComplete={autoComplete}
      autoCapitalize={autoCapitalize}
      autoCorrect={autoCorrect}
    />

    {
      icon && (
        <div className={classnames(iconClassName, pen)}>
          { icon }
        </div>
      )
    }

  </label>
)

JustFly1984 on Jul 13, 2018

@jessebeach I’m not going to turn it off until after both rules have been on together for awhile; i’d love to see the bug fixed so we can do that,

ljharb on Jul 9, 2018

We should fix this ASAP, to try to get it in a 6.1.1.

ljharb on Jul 6, 2018