☂️ eslint-plugin-jsx-a11y

[Boshen]

[!WARNING] This comment is maintained by CI. Do not edit this comment directly. To update comment template, see https://github.com/oxc-project/oxc/tree/main/tasks/lint_rules

This is tracking issue for eslint-plugin-jsx-a11y.

There are 36(+ 3 deprecated) rules.

• 7/31 recommended rules are remaining as TODO
• 1/5 not recommended rules are remaining as TODO

To get started, run the following command:

just new-jsx-a11y-rule <RULE_NAME>

Then register the rule in crates/oxc_linter/src/rules.rs and also declare_all_lint_rules at the bottom.

Recommended rules

✨: 24, 🚫: 0 / total: 31

| Status | Name | Docs | | :----: | :--- | :--- | | ✨ | jsx-a11y/alt-text | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/alt-text.md | | ✨ | jsx-a11y/anchor-has-content | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/anchor-has-content.md | | ✨ | jsx-a11y/anchor-is-valid | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/anchor-is-valid.md | | ✨ | jsx-a11y/aria-activedescendant-has-tabindex | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-activedescendant-has-tabindex.md | | ✨ | jsx-a11y/aria-props | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-props.md | | | jsx-a11y/aria-proptypes | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-proptypes.md | | ✨ | jsx-a11y/aria-role | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-role.md | | ✨ | jsx-a11y/aria-unsupported-elements | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-unsupported-elements.md | | ✨ | jsx-a11y/autocomplete-valid | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/autocomplete-valid.md | | ✨ | jsx-a11y/click-events-have-key-events | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/click-events-have-key-events.md | | ✨ | jsx-a11y/heading-has-content | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/heading-has-content.md | | ✨ | jsx-a11y/html-has-lang | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/html-has-lang.md | | ✨ | jsx-a11y/iframe-has-title | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/iframe-has-title.md | | ✨ | jsx-a11y/img-redundant-alt | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/img-redundant-alt.md | | | jsx-a11y/interactive-supports-focus | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/interactive-supports-focus.md | | ✨ | jsx-a11y/label-has-associated-control | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md | | ✨ | jsx-a11y/media-has-caption | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/media-has-caption.md | | ✨ | jsx-a11y/mouse-events-have-key-events | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/mouse-events-have-key-events.md | | ✨ | jsx-a11y/no-access-key | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-access-key.md | | ✨ | jsx-a11y/no-autofocus | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-autofocus.md | | ✨ | jsx-a11y/no-distracting-elements | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-distracting-elements.md | | | jsx-a11y/no-interactive-element-to-noninteractive-role | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-interactive-element-to-noninteractive-role.md | | | jsx-a11y/no-noninteractive-element-interactions | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-noninteractive-element-interactions.md | | | jsx-a11y/no-noninteractive-element-to-interactive-role | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-noninteractive-element-to-interactive-role.md | | | jsx-a11y/no-noninteractive-tabindex | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-noninteractive-tabindex.md | | ✨ | jsx-a11y/no-redundant-roles | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-redundant-roles.md | | | jsx-a11y/no-static-element-interactions | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-static-element-interactions.md | | ✨ | jsx-a11y/role-has-required-aria-props | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/role-has-required-aria-props.md | | ✨ | jsx-a11y/role-supports-aria-props | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/role-supports-aria-props.md | | ✨ | jsx-a11y/scope | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/scope.md | | ✨ | jsx-a11y/tabindex-no-positive | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/tabindex-no-positive.md | ✨ = Implemented, 🚫 = No need to implement

Not recommended rules

✨: 4, 🚫: 0 / total: 5

| Status | Name | Docs | | :----: | :--- | :--- | | ✨ | jsx-a11y/anchor-ambiguous-text | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/anchor-ambiguous-text.md | | | jsx-a11y/control-has-associated-label | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/control-has-associated-label.md | | ✨ | jsx-a11y/lang | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/lang.md | | ✨ | jsx-a11y/no-aria-hidden-on-focusable | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-aria-hidden-on-focusable.md | | ✨ | jsx-a11y/prefer-tag-over-role | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/prefer-tag-over-role.md | ✨ = Implemented, 🚫 = No need to implement

Deprecated rules

✨: 0, 🚫: 0 / total: 3

| Status | Name | Docs | | :----: | :--- | :--- | | | jsx-a11y/accessible-emoji | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/accessible-emoji.md | | | jsx-a11y/label-has-for | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/label-has-for.md | | | jsx-a11y/no-onchange | https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-onchange.md | ✨ = Implemented, 🚫 = No need to implement

[Boshen]

cc @manzt

[manzt]

Tasks:

• [ ] accessible-emoji
• [x] alt-text https://github.com/oxc-project/oxc/pull/1126
• [ ] anchor-ambiguous-text
• [ ] anchor-has-content
• [ ] anchor-is-valid
• [ ] aria-activedescendant-has-tabindex
• [ ] aria-props
• [ ] aria-proptypes
• [ ] aria-role
• [ ] aria-unsupported-elements
• [ ] autocomplete-valid
• [ ] click-events-have-key-events
• [ ] control-has-associated-label
• [ ] heading-has-content
• [ ] html-has-lang
• [ ] iframe-has-title
• [ ] img-redundant-alt
• [ ] interactive-supports-focus
• [ ] label-has-associated-control
• [ ] label-has-for
• [ ] lang
• [ ] media-has-caption
• [ ] mouse-events-have-key-events
• [ ] no-access-key
• [ ] no-aria-hidden-on-focusable
• [ ] no-autofocus
• [ ] no-distracting-elements
• [ ] no-interactive-element-to-noninteractive-role
• [ ] no-noninteractive-element-interactions
• [ ] no-noninteractive-element-to-interactive-role
• [ ] no-noninteractive-tabindex
• [ ] no-onchange
• [ ] no-redundant-roles
• [ ] no-static-element-interactions
• [ ] prefer-tag-over-role
• [ ] role-has-required-aria-props
• [ ] role-supports-aria-props
• [ ] scope
• [ ] tabindex-no-positive

[msdlisper]

@Boshen @manzt Can you assign me the task of anchor-has-content?

[manzt]

Feel free to make a PR and reference this issue!

[JustFly1984]

This plugin is a great, though nobody maintains eslint plugin for a long time.

[XantreDev]

Obsolete tasks Done: lang, media-has-caption

[XantreDev]

@Boshen Can I try to implement some aria rules using biome_aria crate? For example: role-has-required-aria-props

[Boshen]

@Boshen Can I try to implement some aria rules using biome_aria crate? For example: role-has-required-aria-props

We are porting https://www.npmjs.com/package/aria-query over to https://github.com/oxc-project/aria-query with @Shinyaigeek, is biome_aria the samething, but the APIs look different.

[XantreDev]

@Boshen Can I try to implement some aria rules using biome_aria crate? For example: role-has-required-aria-props

We are porting https://www.npmjs.com/package/aria-query over to https://github.com/oxc-project/aria-query with @Shinyaigeek, is biome_aria the samething, but the APIs look different.

What do you want to benefit from it? Are biome_aria slow?

[Boshen]

@Boshen Can I try to implement some aria rules using biome_aria crate? For example: role-has-required-aria-props

We are porting https://www.npmjs.com/package/aria-query over to https://github.com/oxc-project/aria-query with @Shinyaigeek, is biome_aria the samething, but the APIs look different.

What do you want to benefit from it? Are biome_aria slow?

I didn't know it's existence until you mentioned it, I'll take a deeper look when I get some time next week.

[Shinyaigeek]

What do you want to benefit from it? Are biome_aria slow?

biome_aria looks totally different from aria-query. aria-query has the data not only about aria but also about DOM elements, but biome_aria does not. I interpret that biome_aria is made to aggregate just the aria related data for biome (maybe specieally for biome’s linter), and is not alternative of aria-query, so it’s API is different.

Considering that oxc will provide an interface for linter plugins defined in userland in the future, I believe that it is advantageous from the viewpoint of easy transition and ecosystem development to provide not only aria data but also dom elements and other data for such users, and to provide an API equivalent to aria-query (but just in my opinion).

[XantreDev]

Maybe, I've just seen that biome uses biome_aria for aria jsx rules. https://github.com/biomejs/biome/blob/b99e7856e99d656675d688d75a875570382f9c71/crates/biome_js_analyze/src/aria_analyzers/a11y/use_aria_props_for_role.rs#L49

[keita-hino]

I will start working on the task of aria-activedescendant-has-tabindex.

[regexyl]

I've started implementation for label-has-associated-control, but it looks like they're still a couple of kinks to work out for the original implementation:

• https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/972
• https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/966
• https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/962
• https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/961

I'll try jumping over there and see if there's anything I can help out with before looping back here :)