jsx-eslint / eslint-plugin-jsx-a11y

Static AST checker for a11y rules on JSX elements.
MIT License
3.42k stars 637 forks source link

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

Closed BillyLevin closed 2 months ago

BillyLevin commented 3 months ago

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

BillyLevin commented 3 months ago

Since this is quick to implement, I've already opened a PR (#1007) in case this is desired