Comments (13)
I agree on the first one, since we can't determine the value of foo until runtime. However, not sure about the second - You can place a space in between the quotation marks (<img alt=" " />
) and it should pass and still semantically represent the same thing to a screen reader. Also, I can implement case where alt=""
(or any other form of undefined value) passes lint rule if role=presentation is present.
from eslint-plugin-jsx-a11y.
I think the role=presentation
bit makes sense. According to the spec, it should probably enforce alt=""
if it has a presentation role.
Authors SHOULD NOT provide meaningful alternative text (for example, use alt="" in HTML4) when the presentation role is applied to an image.
https://www.w3.org/TR/wai-aria/roles#presentation
from eslint-plugin-jsx-a11y.
Fixing first example in 0.5.3 - will upgrade minor on role=presentation
enhancement. 0.5.3 should be done within the hour.
from eslint-plugin-jsx-a11y.
Awesome! Thanks again!
from eslint-plugin-jsx-a11y.
0.5.3 published - should fix first use case + other bugs that are closed!
from eslint-plugin-jsx-a11y.
I think this is still broken for cases like
function Foo() {
return <img alt={foo.bar || ''} />;
}
and
function Foo() {
return <img alt={bar() || ''} />;
}
and
function Foo() {
return <img alt={foo.bar() || ''} />;
}
from eslint-plugin-jsx-a11y.
Added test cases for those and fixed in v0.5.4 - still may be other edge cases, working on resolving cases to handle each type specified in spec
from eslint-plugin-jsx-a11y.
Wonderful!
from eslint-plugin-jsx-a11y.
@evcohen do you have an ETA on the role="presentation"
change? No rush--I'm just wondering if I should roll with alt=" "
or wait it out.
from eslint-plugin-jsx-a11y.
@lencioni waiting for ci build to pass and then publishing v0.6.0. Error message updated and this strictly allows only the following scenario <img alt="" role="presentation" />
bad:
<img alt={``} role="presentation" />
etc. as we only want to deal with literals for this case.
from eslint-plugin-jsx-a11y.
I noticed that the Chrome audit rules allows alt=""
without role="presentation"
and role="presentation"
without alt=""
, FYI: https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_text_02
from eslint-plugin-jsx-a11y.
Use the attributes alt="", role="presentation" or include the image as a CSS background-image to identify it as being used purely for stylistic or decorative purposes and that it should be ignored by people using assistive technologies.
Source: http://fae20.cita.illinois.edu/rule/ARIA_STRICT/IMAGE_2/
Not sure what the real rule is in this case, but as a linter, I think it's better to be opinionated in a case like this or give users configuration options to manage the rigidity of the rule. My thinking is, the only time alt
can be undefined (not just ="", but literally non-existent) is when role="presentation"
. In this sense, we can drop the check for alt altogether if role="presentation"
is present. Thoughts?
from eslint-plugin-jsx-a11y.
My reading of the text you posted agrees with the Chrome text I lined to, and it also fits my intuitive understanding. I think it makes sense to enforce the existence of alt
unless role="presentation"
, and if role="presentation"
enforce either non-existent or empty alt
.
from eslint-plugin-jsx-a11y.
Related Issues (20)
- semver pkg - ReDoS Vulnerability HOT 1
- jsx-a11y/control-has-associated-label throws an error on table elements HOT 5
- Changelog links broken due to different repo HOT 1
- 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 8
- 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
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.