Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
BillyLevin opened this issue Aug 23, 2024 · 1 comment · Fixed by #1007
Closed

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

BillyLevin opened this issue Aug 23, 2024 · 1 comment · Fixed by #1007

Comments

@BillyLevin
Copy link
Contributor

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 added a commit to BillyLevin/eslint-plugin-jsx-a11y that referenced this issue Aug 23, 2024
Fixes jsx-eslint#1005 by introducing a second error message, used when the label
doesn't have accessible text.
@BillyLevin
Copy link
Contributor Author

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

@ljharb ljharb closed this as completed in 83fd9c4 Sep 4, 2024
renovate bot added a commit to mmkal/eslint-plugin-mmkal that referenced this issue Sep 4, 2024
##### [v6.10.0](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/CHANGELOG.md#v6100---2024-09-03)

##### Fixed

-   \[New] `label-has-associated-control`: add additional error message [`#1005`](jsx-eslint/eslint-plugin-jsx-a11y#1005)
-   \[Fix] `label-has-associated-control`: ignore undetermined label text [`#966`](jsx-eslint/eslint-plugin-jsx-a11y#966)

##### Commits

-   \[Tests] switch from jest to tape [`a284cbf`](jsx-eslint/eslint-plugin-jsx-a11y@a284cbf)
-   \[New] add eslint 9 support [`deac4fd`](jsx-eslint/eslint-plugin-jsx-a11y@deac4fd)
-   \[New] add `attributes` setting [`a1ee7f8`](jsx-eslint/eslint-plugin-jsx-a11y@a1ee7f8)
-   \[New] allow polymorphic linting to be restricted [`6cd1a70`](jsx-eslint/eslint-plugin-jsx-a11y@6cd1a70)
-   \[Tests] remove duplicate tests [`74d5dec`](jsx-eslint/eslint-plugin-jsx-a11y@74d5dec)
-   \[Dev Deps] update `@babel/cli`, `@babel/core`, `@babel/eslint-parser`, `@babel/plugin-transform-flow-strip-types` [`6eca235`](jsx-eslint/eslint-plugin-jsx-a11y@6eca235)
-   \[readme] remove deprecated travis ci badge; add github actions badge [`0be7ea9`](jsx-eslint/eslint-plugin-jsx-a11y@0be7ea9)
-   \[Tests] use `npm audit` instead of `aud` [`05a5e49`](jsx-eslint/eslint-plugin-jsx-a11y@05a5e49)
-   \[Deps] update `axobject-query` [`912e98c`](jsx-eslint/eslint-plugin-jsx-a11y@912e98c)
-   \[Deps] unpin `axobject-query` [`75147aa`](jsx-eslint/eslint-plugin-jsx-a11y@75147aa)
-   \[Deps] update `axe-core` [`27ff7cb`](jsx-eslint/eslint-plugin-jsx-a11y@27ff7cb)
-   \[readme] fix jsxA11y import name [`ce846e0`](jsx-eslint/eslint-plugin-jsx-a11y@ce846e0)
-   \[readme] fix typo in shareable config section in readme [`cca288b`](jsx-eslint/eslint-plugin-jsx-a11y@cca288b)
renovate bot added a commit to andrei-picus-tink/auto-renovate that referenced this issue Sep 5, 2024
| datasource | package                | from  | to     |
| ---------- | ---------------------- | ----- | ------ |
| npm        | eslint-plugin-jsx-a11y | 6.9.0 | 6.10.0 |


## [v6.10.0](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/CHANGELOG.md#v6100---2024-09-03)

##### Fixed

-   \[New] `label-has-associated-control`: add additional error message [`#1005`](jsx-eslint/eslint-plugin-jsx-a11y#1005)
-   \[Fix] `label-has-associated-control`: ignore undetermined label text [`#966`](jsx-eslint/eslint-plugin-jsx-a11y#966)

##### Commits

-   \[Tests] switch from jest to tape [`a284cbf`](jsx-eslint/eslint-plugin-jsx-a11y@a284cbf)
-   \[New] add eslint 9 support [`deac4fd`](jsx-eslint/eslint-plugin-jsx-a11y@deac4fd)
-   \[New] add `attributes` setting [`a1ee7f8`](jsx-eslint/eslint-plugin-jsx-a11y@a1ee7f8)
-   \[New] allow polymorphic linting to be restricted [`6cd1a70`](jsx-eslint/eslint-plugin-jsx-a11y@6cd1a70)
-   \[Tests] remove duplicate tests [`74d5dec`](jsx-eslint/eslint-plugin-jsx-a11y@74d5dec)
-   \[Dev Deps] update `@babel/cli`, `@babel/core`, `@babel/eslint-parser`, `@babel/plugin-transform-flow-strip-types` [`6eca235`](jsx-eslint/eslint-plugin-jsx-a11y@6eca235)
-   \[readme] remove deprecated travis ci badge; add github actions badge [`0be7ea9`](jsx-eslint/eslint-plugin-jsx-a11y@0be7ea9)
-   \[Tests] use `npm audit` instead of `aud` [`05a5e49`](jsx-eslint/eslint-plugin-jsx-a11y@05a5e49)
-   \[Deps] update `axobject-query` [`912e98c`](jsx-eslint/eslint-plugin-jsx-a11y@912e98c)
-   \[Deps] unpin `axobject-query` [`75147aa`](jsx-eslint/eslint-plugin-jsx-a11y@75147aa)
-   \[Deps] update `axe-core` [`27ff7cb`](jsx-eslint/eslint-plugin-jsx-a11y@27ff7cb)
-   \[readme] fix jsxA11y import name [`ce846e0`](jsx-eslint/eslint-plugin-jsx-a11y@ce846e0)
-   \[readme] fix typo in shareable config section in readme [`cca288b`](jsx-eslint/eslint-plugin-jsx-a11y@cca288b)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant