Skip to content
This repository has been archived by the owner on Aug 31, 2023. It is now read-only.

📎 A11y Rules: Support aria-roles #3640

Closed
Tracked by #3739
MichaReiser opened this issue Nov 10, 2022 · 6 comments
Closed
Tracked by #3739

📎 A11y Rules: Support aria-roles #3640

MichaReiser opened this issue Nov 10, 2022 · 6 comments
Assignees
Labels
A-Linter Area: linter L-JavaScript Langauge: JavaScript L-JSX Language: JSX task A task, an action that needs to be performed

Comments

@MichaReiser
Copy link
Contributor

MichaReiser commented Nov 10, 2022

Description

Aria roles allow specifying the type of an element. E.g. <div role="button"> changes the "role" of the div to a button.

Proper support for aria roles is necessary to correctly implement many of the accessibility rules. For example, the useKeyWithClickEvent rule must know if the element is an interactive element and, if so, not emit an error

https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/2b133ecc0ba1b882ca06f0813b1afcdf64195757/src/util/isInteractiveElement.js

Requires metadata similar to aria-query

@MichaReiser MichaReiser added task A task, an action that needs to be performed A-Linter Area: linter L-JavaScript Langauge: JavaScript labels Nov 10, 2022
MichaReiser added a commit that referenced this issue Nov 10, 2022
…eKeyWithClickEvents`

Interactive elements like `button`, `a`, `input` etc. don't need key events as they are supported by the browser.

This is a simplified implementation and the rule should also consider if the element is hidden for screen readers but that's out of the scope of this fix. See #3640

## Test Plan

I added a new test that verifies that `button` no longer gets flagged.
MichaReiser added a commit that referenced this issue Nov 10, 2022
…eKeyWithClickEvents`

Interactive elements like `button`, `a`, `input` etc. don't need key events as they are supported by the browser.

This is a simplified implementation and the rule should also consider if the element is hidden for screen readers but that's out of the scope of this fix. See #3640

## Test Plan

I added a new test that verifies that `button` no longer gets flagged.
@ematipico ematipico added the L-JSX Language: JSX label Nov 14, 2022
@ematipico ematipico added this to the 11.0.0 milestone Nov 14, 2022
@ematipico ematipico self-assigned this Nov 14, 2022
@ematipico ematipico mentioned this issue Nov 15, 2022
29 tasks
@github-actions
Copy link

👋 @rome/staff please triage this issue by adding one of the following labels: S-Bug: confirmed, S-Planned , S-Wishlist or umbrella

@ematipico
Copy link
Contributor

Closing, as completed by #3832

A complete list of rules and properties will be added as part of useAriaProps and useAriaPropsTypes rules

@MichaReiser
Copy link
Contributor Author

Closing, as completed by #3832

A complete list of rules and properties will be added as part of useAriaProps and useAriaPropsTypes rules

What about existing rules like useKeyWithClickEvents

See TODO here

// Don't handle interactive roles
// TODO Support aria roles https://github.com/rome/tools/issues/3640

@MichaReiser MichaReiser reopened this Nov 28, 2022
@ematipico
Copy link
Contributor

ematipico commented Nov 28, 2022

@MichaReiser I added I checkbox in the umbrella as a separate task

@MichaReiser
Copy link
Contributor Author

kbox in the u

I see. Would you mind linking to the umbrella (and then close this issue again :))

@ematipico
Copy link
Contributor

There's task in the umbrella #3739

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
A-Linter Area: linter L-JavaScript Langauge: JavaScript L-JSX Language: JSX task A task, an action that needs to be performed
Projects
Status: Done
Development

No branches or pull requests

2 participants