8000 Add note and rule about image alt text · evozonjs/javascript@acbddc1 · GitHub
[go: up one dir, main page]
Skip to content

Commit acbddc1

Browse files
lencionilencioni
committed
Add note and rule about image alt text
We want our React apps to be accessible. One thing that developers can do is properly use alt text on images. Thankfully, there is an ESLint rule that will enforce these things for us.
1 parent 6e77006 commit acbddc1

File tree

4 files changed

+25
-2
lines changed

4 files changed

+25
-2
lines changed

‎packages/eslint-config-airbnb/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,15 @@
4444
"devDependencies": {
4545
"babel-tape-runner": "^1.3.1",
4646
&q 10000 uot;eslint": "^2.6.0",
47+
"eslint-plugin-jsx-a11y": "^0.6.0",
4748
"eslint-plugin-react": "^4.2.3",
4849
"react": "^0.14.8",
4950
"tape": "^4.5.1",
5051
"parallelshell": "^2.0.0"
5152
},
5253
"peerDependencies": {
5354
"eslint": "^2.6.0",
55+
"eslint-plugin-jsx-a11y": "^0.6.0",
5456
"eslint-plugin-react": "^4.2.3"
5557
}
5658
}

‎packages/eslint-config-airbnb/rules/react.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module.exports = {
22
'plugins': [
3+
'jsx-a11y',
34
'react'
45
],
56
'ecmaFeatures': {
@@ -8,6 +9,10 @@ module.exports = {
89
// View link below for react rules documentation
910
// https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
1011
'rules': {
12+
// Require <img> to have a non-empty `alt` prop, or role="presentation"
13+
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md
14+
'jsx-a11y/img-uses-alt': 2,
15+
1116
// Prevent missing displayName in a React component definition
1217
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
1318
'react/display-name': [0, { 'ignoreTranspilerName': false }],

‎packages/eslint-config-airbnb/test/test-react-order.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ ${body}
2828
}
2929

3030
test('validate react prop order', t => {
31-
t.test('make sure our eslintrc has React linting dependencies', t => {
31+
t.test('make sure our eslintrc has React and JSX linting dependencies', t => {
3232
t.plan(1);
33-
t.equal(reactRules.plugins[0], 'react', 'uses eslint-plugin-react');
33+
t.deepEqual(reactRules.plugins, ['jsx-a11y', 'react']);
3434
});
3535

3636
t.test('passes a good component', t => {

‎react/README.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,22 @@
217217
/>
218218
```
219219

220+
- Always include a non-empty `alt` prop on `<img>` tags. If `alt` is an empty string, the `<img>` must have `role="presentation"`. eslint: [`jsx-a11y/img-uses-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md)
221+
222+
```javascript
223+
// bad
224+
<img src="hello.jpg" />
225+
226+
// bad
227+
<img src="hello.jpg" alt="" />
228+
229+
// good
230+
<img src="hello.jpg" alt="Me waving hello" />
231+
232+
// good
233+
<img src="hello.jpg" alt="" role="presentation" />
234+
```
235+
220236
## Parentheses
221237

222238
- Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md)

0 commit comments

Comments
 (0)
0