jsx-eslint/eslint-plugin-jsx-a11y

`label-has-associated-control` - misleading error message

BillyLevin opened this issue · 1 comments

This rule checks two things:

  1. A label has an associated control component
  2. The label contains accessible text

However, the error message never accounts for the second case. So, if we had this code:

function Thing() {
  return (
    <div>
      <label htmlFor="js_id" />
      <input id="js_id" />
    </div>
  );
}

We get the error message: A form label must be associated with a control., which is not actually what the issue is.

I think it would be helpful to have a separate error message for this case, something like: A form label must have accessible text. to clear up any confusion between the two cases

Somehow created a duplicate of #1005