Comments (8)
Selecting a tabIndex definitely isn't a safe autofix, but it could be a suggestion.
As for the onKeyDown
, that's not something a computer can ever just magically come up with, so that'd just have to be manually written.
from eslint-plugin-jsx-a11y.
You can definitely make your own plugin and rule, that composes this one and adds your own autofixes.
No need for an issue if you want to just make a PR :-) otherwise an issue is fine.
from eslint-plugin-jsx-a11y.
Not everything needs to be, nor should be autofixable.
That said, anything that's safe to autofix should be autofixed.
If there's a finite number of correct options, and the user has to choose, suggestions are appropriate.
Is there something specific you have in mind?
from eslint-plugin-jsx-a11y.
@ljharb makes sense. I was thinking about the interactivity rules, for example jsx-a11y/click-events-have-key-events
.
<div onClick={this.props.onClick}>My Button</div>
would yield both click-events-have-key-events
and interactive-supports-focus
issues. Autofixing both might be changed to something like:
<div
tabIndex={0}
onClick={this.props.onClick}
onKeyDown={(e) => {
if (e.code === "Space" || e.code === "Enter") {
this.props.onClick();
}
}}
>My Button</div>
from eslint-plugin-jsx-a11y.
that's not something a computer can ever just magically come up with
Do you think its implausible to get a solution that is or approaches correct? Anything with an onClick
handler should have, at a minimum, a space
key handler that corresponds to the onClick
event. If it has a button
role, it should be space
and enter
. So, if there's an onclick, and there is no keydown, add a keydown handler. in the case that the role is link, trigger onclick on space. else if the role is button, trigger onclick on space and enter.
I'm not super navigating and asserting on the AST, but seems like this should be possible to write code to do this?
from eslint-plugin-jsx-a11y.
I think that it is strictly inappropriate for an eslint rule to be that loose; autofixes must always be safe - no false corrections - and suggestions only make sense when there's a few correct options the user should pick from. Beyond that, users can just write the code, it's not that big a deal :-)
from eslint-plugin-jsx-a11y.
Thanks @ljharb, the use case I was thinking about was a global autofix via eslint --fix .
, I still think it'd be useful to autofix usage even in seemingly trivial cases like keyboard handlers, in very large codebases. That said, I agree this is not generically safe. We've played with some application-specific eslint fix overrides, and can continue down that path for those rules.
@ljharb if you want I can create a followup issue for suggesting tabindex=[0|-1]
from eslint-plugin-jsx-a11y.
Thanks, makes sense. We're currently using eslint-rule-composer
for exactly that. Would be happy and grateful for a better suggestion if you know of examples.
For the suggestion, I will create an issue for my own sake, to track the work since it might be a bit before I implement something.
from eslint-plugin-jsx-a11y.
Related Issues (20)
- jsx-a11y/label-has-associated-control gives error when for is put HOT 3
- label-has-associated-control regression
- How to configure `eslint-plugin-jsx-a11y` in `eslint.config.js` HOT 5
- [label-has-associated-control] regression - rule errors when a label does not directly have text, even if it has htmlFor HOT 11
- jsx-a11y/control-has-associated-label triggers on TD element HOT 1
- Coordinate NodeJS version support with axe-core HOT 9
- [img-redundant-alt] `words` option does not work with double-byte character words.
- `alt-text`: missing warning for empty `alt` for `<input type="image" alt="" />`
- [label-has-associated-control] Glob format not supporting labelComponents HOT 1
- Snyk: MPL 2.0 license vulnerability in axe-core HOT 2
- anchor-has-content and aria-labelledby
- Lint error on valid way for associating a `label` to an `input` control HOT 1
- `jsx-a11y/label-has-associated-control` behavior is apparently misdocumented HOT 10
- Add support for ESLint 9 HOT 3
- heading-has-content false positive for object spread HOT 1
- [control-has-associated-label]: Does not allow for custom components that would result in accessible labels HOT 1
- `jsx-a11y/media-has-caption` Eslint Warning for Missing Captions in Media Elements HOT 1
- bug: type declaration for eslint flat config HOT 3
- Rule Idea: Enforce boolean literals for "booleanish" HTML attributes such as aria-hidden HOT 4
- [feat] `control-has-associated-label` can't be configured to support parent elements with label props HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eslint-plugin-jsx-a11y.