Skip to content

Commit 9acfd3f

Browse files
author
Erin Doyle
committed
Added back in all of the previous rules that had been renamed with deprecation warnings to allow for a smoother transition for consuming applications.
1 parent be9b7b6 commit 9acfd3f

20 files changed

Lines changed: 809 additions & 2 deletions
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# tabindex-no-positive (deprecated - use tabindex-no-positive)
2+
3+
It is recommended that authors avoid positive values for the `tabindex` attribute because it is
4+
brittle (any focusable elements added to the page without an explicit `tabindex` value greater than
5+
zero will come last in the tab order) and can easily result in a page which is extremely difficult
6+
to navigate, causing accessibility problems. Only use a `tabindex` of 0 for focusable elements.
7+
8+
9+
## options
10+
11+
*This rule takes no options*
12+
13+
## Passes
14+
15+
```jsx harmony
16+
<div tabIndex={0} />
17+
<div tabIndex="0" />
18+
<div tabIndex="-1" />
19+
```
20+
21+
## Fails
22+
23+
```jsx harmony
24+
<div tabIndex={1} />
25+
<div tabIndex="1" />
26+
<div tabIndex="2" />
27+
```
28+
29+
## See also
30+
31+
- [This document](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03)
32+
from Chrome Accessibility Developer Tools.
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# button-role-space (deprecated - use click-events-have-key-events)
2+
3+
Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown,
4+
onKeyPress. Coding for the keyboard is important for users with physical disabilities
5+
who cannot use a mouse, AT compatibility, and screenreader users.
6+
7+
8+
## options
9+
10+
*This rule takes no options*
11+
12+
## Passes
13+
14+
```jsx harmony
15+
// passes when there is an `onClick` handler and there is an `onKey*` handler.
16+
<div onClick={fn} onKeyDown={this.handleKeyDown} />
17+
<div onClick={fn} onKeyUp={this.handleKeyUp} />
18+
<div onClick={fn} onKeyPress={this.handleKeyPress} />
19+
20+
// passes when the element is aria-hidden
21+
<div onClick={fn} aria-hidden="true"></div>
22+
```
23+
24+
## Fails
25+
26+
```jsx harmony
27+
// fails when there is an `onClick` handler and no `onKey*` is present
28+
<div onClick={fn}></div>
29+
```
30+
31+
## See also
32+
33+
- [This document](https://www.w3.org/WAI/GL/wiki/Making_actions_keyboard_accessible_by_using_keyboard_event_handlers_with_WAI-ARIA_controls) from w3.org
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# label-uses-for (deprecated - use label-has-for)
2+
3+
Enforce label tags have `htmlFor` attribute. Form controls using a `label` to
4+
identify them must have only one label that is programmatically associated with
5+
the control using: `<label htmlFor={/* ID or name of control*/}>...</label>`.
6+
7+
8+
## options
9+
10+
*This rule takes no options*
11+
12+
## Passes
13+
14+
```jsx harmony
15+
// passes when the label is hidden
16+
<label aria-hidden="true"></label>
17+
18+
// passes when the label has a valid `htmlFor` prop
19+
<label for="foo"></label>
20+
21+
// passes when it is not a label
22+
<div></div>
23+
```
24+
25+
## Fails
26+
27+
```jsx harmony
28+
// fails when a label is not hidden and has no `htmlFor`
29+
<label></label>
30+
```
31+
32+
## See also
33+
34+
- [This document](https://www.w3.org/WAI/tutorials/forms/labels) from w3.org
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# mouse-events-map-to-key-events (deprecated - use mouse-events-have-key-events)
2+
3+
Enforce `onMouseOver`/`onMouseOut` are accompanied by
4+
`onFocus`/`onBlur`. Coding for the keyboard is important for users with
5+
physical disabilities who cannot use a mouse, AT compatibility, and screenreader
6+
users.
7+
8+
9+
## options
10+
11+
*This rule takes no options*
12+
13+
## Passes
14+
15+
```jsx harmony
16+
// passes when there is no `onMouseOver` or `onMouseOut`
17+
<div></div>
18+
19+
// passes when there is `onMouseOver` and `onFocus`
20+
<div onMouseOver={someFunction} onFocus={someFunction}></div>
21+
22+
// passes when there is `onMouseOut` and `onBlur`
23+
<div onMouseOut={someFunction} onBlur={someFunction}></div>
24+
```
25+
26+
## Fails
27+
28+
```jsx harmony
29+
// fails when there is `onMouseOver` but no `onFocus`
30+
<div onMouseOver={someFunction}></div>
31+
32+
// fails when there is `onMouseOut` but no `onBlur`
33+
<div onMouseOut={someFunction}></div>
34+
```
35+
36+
## See also
37+
38+
- [This document](http://webaim.org/techniques/javascript/eventhandlers#onmouseover) from webaim.org
39+
- [This document](http://webaim.org/techniques/javascript/eventhandlers#onmouseover) from webaim.org
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# no-unsupported-elements-use-aria (deprecated - use aria-unsupported-elements)
2+
3+
4+
Certain reserved DOM elements do not support ARIA roles, states and properties.
5+
This is often because they are not visible, for example `meta`, `html`, `script`,
6+
`style`. This rule enforces that these DOM elements do not contain the `role` and/or
7+
`aria-*` props.
8+
9+
10+
## Options
11+
12+
*This rule takes no options*
13+
14+
## Passes
15+
16+
These elements are passed by this rule
17+
```jsx harmony
18+
// no problem when the reserved element is not given an illegal prop
19+
<meta/>
20+
21+
// no problem when an illegal props is given to a non-reserved elemeent
22+
<div aria-hidden="true"></div>
23+
```
24+
25+
## Fails
26+
27+
These elements are *not* passed by this rule
28+
```jsx harmony
29+
// warns when the element should not be given any ARIA attributes
30+
<meta aria-hidden="false"/>
31+
```
32+
33+
## See also
34+
35+
- Google Audit defs [AX_ARIA_12](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-defs#ax_aria_12)
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# onclick-uses-tabindex (deprecated - use interactive-supports-focus)
2+
3+
Enforce that elements that have an `onClick` handler also have
4+
a `tabIndex` property. If not, they will not be navigable by
5+
keyboard users.
6+
7+
8+
## options
9+
10+
*This rule takes no options*
11+
12+
## Passes
13+
14+
```jsx harmony
15+
// passes when when there is an `onClick` with a `tabIndex`
16+
<span onClick={someFunction} tabindex="0"></span>
17+
18+
// passes when the element is hidden from aria
19+
<span onClick={someFunction} aria-hidden="true"></span>
20+
21+
// passes when the element is interactive
22+
<button onClick={someFunction}></button>
23+
```
24+
25+
## Fails
26+
27+
```jsx harmony
28+
// fails when there is an `onClick` with no `tabIndex`
29+
<span onClick={someFunction}></span>
30+
```
31+
32+
## See also
33+
34+
- [This document](http://www.w3.org/TR/wai-aria-practices/#focus_tabindex) from w3.org
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# redundant-alt (deprecated - use img-redundant-alt)
2+
3+
Enforce img alt attribute does not contain the word image, picture, or photo.
4+
Screenreaders already announce `img` elements as an image. There is no need to use
5+
words such as *image*, *photo*, and/or *picture*.
6+
7+
8+
## options
9+
10+
This rule takes the following options:
11+
1. Words to look for when looking for redundant words. (**Array(String)**)
12+
default: `["image","picture","photo"]`
13+
14+
## Passes
15+
16+
```jsx harmony
17+
// passes when the `alt` does not contain redundant words
18+
<img src="foo" alt="nice"/>
19+
20+
// passes when the `alt` does not contain redundant words (different opts)
21+
// (using options: ["warn",["foto"]])
22+
<img src="foo" alt="image"/>
23+
24+
// passes when the element is aria-hidden
25+
<img src="foo" alt="nice" aria-hidden="true"/>
26+
```
27+
28+
## Fails
29+
30+
```jsx harmony
31+
// fails when is a redundant alt message
32+
<img src="foo" alt="bar image foo"/>
33+
34+
// fails when is a redundant alt message (different opts)
35+
// (using options: ["warn",["foto"]])
36+
<img src="foo" alt="bar foto"/>
37+
```
38+
39+
## See also
40+
41+
- [This document](http://webaim.org/techniques/alttext) from webaim.org
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# use-onblur-not-onchange (deprecated - use no-onchange)
2+
3+
Enforce usage of onBlur over onChange for accessibility. onBlur must be used
4+
instead of onChange, unless absolutely necessary and it causes no negative
5+
consequences for keyboard only or screen reader users.
6+
7+
8+
## options
9+
10+
*This rule takes no options*
11+
12+
## Passes
13+
14+
```jsx harmony
15+
// passes when there is no `onChange` prop
16+
<input/>
17+
18+
// passes when the element is aria-hidden
19+
<input onChange={fn} aria-hidden="true"/>
20+
21+
// passes when the element is aria-disabled
22+
<input onChange={fn} aria-disabled="true"/>
23+
24+
// passes when the element is aria-readonly
25+
<input onChange={fn} aria-readonly="true"/>
26+
27+
// passes when there is an `onChange` prop and an `onBlur` prop
28+
<input onChange={fn} onBlur={fn}/>
29+
```
30+
31+
## Fails
32+
33+
```jsx harmony
34+
// fails when the `onChange` prop is present without an `onBlur` prop
35+
<input onChange={fn}/>
36+
```
37+
38+
## See also
39+
40+
- [This document](http://webaim.org/techniques/javascript/eventhandlers#onchange) from webaim.org
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# valid-aria-role (deprecated - use aria-role)
2+
3+
The ARIA roles model requires that elements with a role attribute use a valid,
4+
non-abstract ARIA role. Each non-abstract ARIA role is mapped on to a known set
5+
of behavior by the user agent or assistive technology, so using an unknown role
6+
will result in the desired behavior not being available to the user.
7+
8+
You can find a list of valid ARIA roles, along with descriptions and information
9+
on additional required attributes, on the
10+
[WAI-ARIA](http://www.w3.org/TR/wai-aria/roles#roles_categorization) site.
11+
12+
13+
## options
14+
15+
*This rule takes no options*
16+
17+
## Passes
18+
19+
```jsx harmony
20+
// passes when there is a role and it is valid
21+
<div role="button"></div>
22+
23+
// passes when there is no `role`
24+
<div></div>
25+
```
26+
27+
## Fails
28+
29+
```jsx harmony
30+
// fails when there is an invalid `role`
31+
<div role="foo"></div>
32+
```
33+
34+
## See also
35+
36+
- [This document](https://www.w3.org/TR/wai-aria/roles) from w3.org - Google Audit defs [AX_ARIA_01](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-defs#ax_aria_01)

src/rules/avoid-positive-index.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import {
2+
hasProp,
3+
warnRuleDeprecated
4+
} from '../util';
5+
6+
7+
export const description = `
8+
Keyboard users move focus from one form control to the next by using the tab
9+
key. By default focus order is determined by source order.
10+
11+
The \`tabIndex\` prop allows the author to specify an alternative tab order.
12+
Elements with a \`tabIndex\` value greater than zero will receive focus in numerical
13+
order, ahead of focusable elements with a \`tabIndex\` of zero.
14+
15+
It is recommended that authors avoid positive values for the \`tabIndex\` attribute
16+
because it is brittle (any focusable elements added to the page without an
17+
explicit \`tabIndex\` value greater than zero will come last in the tab order) and
18+
can easily result in a page which is extremely difficult to navigate, causing
19+
accessibility problems.
20+
`;
21+
22+
export default [{
23+
msg: 'Avoid positive integer values for `tabIndex`.',
24+
AX: 'AX_FOCUS_03',
25+
test(_, props) {
26+
warnRuleDeprecated('avoid-positive-index', 'tabindex-no-positive');
27+
const tabIndex = hasProp(props, 'tabIndex');
28+
return !tabIndex || props.tabIndex <= 0;
29+
}
30+
}];
31+
32+
export const pass = [{
33+
when: 'the element has no tabIndex',
34+
render: React => <div />
35+
}, {
36+
when: 'the element has a negative tabIndex',
37+
render: React => <div tabIndex={-1} />
38+
}, {
39+
when: 'the element has a tabIndex of zero',
40+
render: React => <div tabIndex="0" />
41+
}];
42+
43+
export const fail = [{
44+
when: 'the element has a positive tabIndex',
45+
// eslint-disable-next-line jsx-a11y/tabindex-no-positive
46+
render: React => <div tabIndex={2} />
47+
}];

0 commit comments

Comments
 (0)