-
Notifications
You must be signed in to change notification settings - Fork 126
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added back in all of the previous rules that had been renamed with de…
…precation warnings to allow for a smoother transition for consuming applications.
- Loading branch information
Erin Doyle
committed
Nov 3, 2018
1 parent
be9b7b6
commit 9acfd3f
Showing
20 changed files
with
809 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
# tabindex-no-positive (deprecated - use tabindex-no-positive) | ||
|
||
It is recommended that authors avoid positive values for the `tabindex` attribute because it is | ||
brittle (any focusable elements added to the page without an explicit `tabindex` value greater than | ||
zero will come last in the tab order) and can easily result in a page which is extremely difficult | ||
to navigate, causing accessibility problems. Only use a `tabindex` of 0 for focusable elements. | ||
|
||
|
||
## options | ||
|
||
*This rule takes no options* | ||
|
||
## Passes | ||
|
||
```jsx harmony | ||
<div tabIndex={0} /> | ||
<div tabIndex="0" /> | ||
<div tabIndex="-1" /> | ||
``` | ||
|
||
## Fails | ||
|
||
```jsx harmony | ||
<div tabIndex={1} /> | ||
<div tabIndex="1" /> | ||
<div tabIndex="2" /> | ||
``` | ||
|
||
## See also | ||
|
||
- [This document](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03) | ||
from Chrome Accessibility Developer Tools. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
# button-role-space (deprecated - use click-events-have-key-events) | ||
|
||
Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, | ||
onKeyPress. Coding for the keyboard is important for users with physical disabilities | ||
who cannot use a mouse, AT compatibility, and screenreader users. | ||
|
||
|
||
## options | ||
|
||
*This rule takes no options* | ||
|
||
## Passes | ||
|
||
```jsx harmony | ||
// passes when there is an `onClick` handler and there is an `onKey*` handler. | ||
<div onClick={fn} onKeyDown={this.handleKeyDown} /> | ||
<div onClick={fn} onKeyUp={this.handleKeyUp} /> | ||
<div onClick={fn} onKeyPress={this.handleKeyPress} /> | ||
|
||
// passes when the element is aria-hidden | ||
<div onClick={fn} aria-hidden="true"></div> | ||
``` | ||
|
||
## Fails | ||
|
||
```jsx harmony | ||
// fails when there is an `onClick` handler and no `onKey*` is present | ||
<div onClick={fn}></div> | ||
``` | ||
|
||
## See also | ||
|
||
- [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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
# label-uses-for (deprecated - use label-has-for) | ||
|
||
Enforce label tags have `htmlFor` attribute. Form controls using a `label` to | ||
identify them must have only one label that is programmatically associated with | ||
the control using: `<label htmlFor={/* ID or name of control*/}>...</label>`. | ||
|
||
|
||
## options | ||
|
||
*This rule takes no options* | ||
|
||
## Passes | ||
|
||
```jsx harmony | ||
// passes when the label is hidden | ||
<label aria-hidden="true"></label> | ||
|
||
// passes when the label has a valid `htmlFor` prop | ||
<label for="foo"></label> | ||
|
||
// passes when it is not a label | ||
<div></div> | ||
``` | ||
|
||
## Fails | ||
|
||
```jsx harmony | ||
// fails when a label is not hidden and has no `htmlFor` | ||
<label></label> | ||
``` | ||
|
||
## See also | ||
|
||
- [This document](https://www.w3.org/WAI/tutorials/forms/labels) from w3.org |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
# mouse-events-map-to-key-events (deprecated - use mouse-events-have-key-events) | ||
|
||
Enforce `onMouseOver`/`onMouseOut` are accompanied by | ||
`onFocus`/`onBlur`. Coding for the keyboard is important for users with | ||
physical disabilities who cannot use a mouse, AT compatibility, and screenreader | ||
users. | ||
|
||
|
||
## options | ||
|
||
*This rule takes no options* | ||
|
||
## Passes | ||
|
||
```jsx harmony | ||
// passes when there is no `onMouseOver` or `onMouseOut` | ||
<div></div> | ||
|
||
// passes when there is `onMouseOver` and `onFocus` | ||
<div onMouseOver={someFunction} onFocus={someFunction}></div> | ||
|
||
// passes when there is `onMouseOut` and `onBlur` | ||
<div onMouseOut={someFunction} onBlur={someFunction}></div> | ||
``` | ||
|
||
## Fails | ||
|
||
```jsx harmony | ||
// fails when there is `onMouseOver` but no `onFocus` | ||
<div onMouseOver={someFunction}></div> | ||
|
||
// fails when there is `onMouseOut` but no `onBlur` | ||
<div onMouseOut={someFunction}></div> | ||
``` | ||
|
||
## See also | ||
|
||
- [This document](http://webaim.org/techniques/javascript/eventhandlers#onmouseover) from webaim.org | ||
- [This document](http://webaim.org/techniques/javascript/eventhandlers#onmouseover) from webaim.org |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
# no-unsupported-elements-use-aria (deprecated - use aria-unsupported-elements) | ||
|
||
|
||
Certain reserved DOM elements do not support ARIA roles, states and properties. | ||
This is often because they are not visible, for example `meta`, `html`, `script`, | ||
`style`. This rule enforces that these DOM elements do not contain the `role` and/or | ||
`aria-*` props. | ||
|
||
|
||
## Options | ||
|
||
*This rule takes no options* | ||
|
||
## Passes | ||
|
||
These elements are passed by this rule | ||
```jsx harmony | ||
// no problem when the reserved element is not given an illegal prop | ||
<meta/> | ||
|
||
// no problem when an illegal props is given to a non-reserved elemeent | ||
<div aria-hidden="true"></div> | ||
``` | ||
|
||
## Fails | ||
|
||
These elements are *not* passed by this rule | ||
```jsx harmony | ||
// warns when the element should not be given any ARIA attributes | ||
<meta aria-hidden="false"/> | ||
``` | ||
|
||
## See also | ||
|
||
- Google Audit defs [AX_ARIA_12](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-defs#ax_aria_12) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
# onclick-uses-tabindex (deprecated - use interactive-supports-focus) | ||
|
||
Enforce that elements that have an `onClick` handler also have | ||
a `tabIndex` property. If not, they will not be navigable by | ||
keyboard users. | ||
|
||
|
||
## options | ||
|
||
*This rule takes no options* | ||
|
||
## Passes | ||
|
||
```jsx harmony | ||
// passes when when there is an `onClick` with a `tabIndex` | ||
<span onClick={someFunction} tabindex="0"></span> | ||
|
||
// passes when the element is hidden from aria | ||
<span onClick={someFunction} aria-hidden="true"></span> | ||
|
||
// passes when the element is interactive | ||
<button onClick={someFunction}></button> | ||
``` | ||
|
||
## Fails | ||
|
||
```jsx harmony | ||
// fails when there is an `onClick` with no `tabIndex` | ||
<span onClick={someFunction}></span> | ||
``` | ||
|
||
## See also | ||
|
||
- [This document](http://www.w3.org/TR/wai-aria-practices/#focus_tabindex) from w3.org |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
# redundant-alt (deprecated - use img-redundant-alt) | ||
|
||
Enforce img alt attribute does not contain the word image, picture, or photo. | ||
Screenreaders already announce `img` elements as an image. There is no need to use | ||
words such as *image*, *photo*, and/or *picture*. | ||
|
||
|
||
## options | ||
|
||
This rule takes the following options: | ||
1. Words to look for when looking for redundant words. (**Array(String)**) | ||
default: `["image","picture","photo"]` | ||
|
||
## Passes | ||
|
||
```jsx harmony | ||
// passes when the `alt` does not contain redundant words | ||
<img src="foo" alt="nice"/> | ||
|
||
// passes when the `alt` does not contain redundant words (different opts) | ||
// (using options: ["warn",["foto"]]) | ||
<img src="foo" alt="image"/> | ||
|
||
// passes when the element is aria-hidden | ||
<img src="foo" alt="nice" aria-hidden="true"/> | ||
``` | ||
|
||
## Fails | ||
|
||
```jsx harmony | ||
// fails when is a redundant alt message | ||
<img src="foo" alt="bar image foo"/> | ||
|
||
// fails when is a redundant alt message (different opts) | ||
// (using options: ["warn",["foto"]]) | ||
<img src="foo" alt="bar foto"/> | ||
``` | ||
|
||
## See also | ||
|
||
- [This document](http://webaim.org/techniques/alttext) from webaim.org |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
# use-onblur-not-onchange (deprecated - use no-onchange) | ||
|
||
Enforce usage of onBlur over onChange for accessibility. onBlur must be used | ||
instead of onChange, unless absolutely necessary and it causes no negative | ||
consequences for keyboard only or screen reader users. | ||
|
||
|
||
## options | ||
|
||
*This rule takes no options* | ||
|
||
## Passes | ||
|
||
```jsx harmony | ||
// passes when there is no `onChange` prop | ||
<input/> | ||
|
||
// passes when the element is aria-hidden | ||
<input onChange={fn} aria-hidden="true"/> | ||
|
||
// passes when the element is aria-disabled | ||
<input onChange={fn} aria-disabled="true"/> | ||
|
||
// passes when the element is aria-readonly | ||
<input onChange={fn} aria-readonly="true"/> | ||
|
||
// passes when there is an `onChange` prop and an `onBlur` prop | ||
<input onChange={fn} onBlur={fn}/> | ||
``` | ||
|
||
## Fails | ||
|
||
```jsx harmony | ||
// fails when the `onChange` prop is present without an `onBlur` prop | ||
<input onChange={fn}/> | ||
``` | ||
|
||
## See also | ||
|
||
- [This document](http://webaim.org/techniques/javascript/eventhandlers#onchange) from webaim.org |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
# valid-aria-role (deprecated - use aria-role) | ||
|
||
The ARIA roles model requires that elements with a role attribute use a valid, | ||
non-abstract ARIA role. Each non-abstract ARIA role is mapped on to a known set | ||
of behavior by the user agent or assistive technology, so using an unknown role | ||
will result in the desired behavior not being available to the user. | ||
|
||
You can find a list of valid ARIA roles, along with descriptions and information | ||
on additional required attributes, on the | ||
[WAI-ARIA](http://www.w3.org/TR/wai-aria/roles#roles_categorization) site. | ||
|
||
|
||
## options | ||
|
||
*This rule takes no options* | ||
|
||
## Passes | ||
|
||
```jsx harmony | ||
// passes when there is a role and it is valid | ||
<div role="button"></div> | ||
|
||
// passes when there is no `role` | ||
<div></div> | ||
``` | ||
|
||
## Fails | ||
|
||
```jsx harmony | ||
// fails when there is an invalid `role` | ||
<div role="foo"></div> | ||
``` | ||
|
||
## See also | ||
|
||
- [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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import { | ||
hasProp, | ||
warnRuleDeprecated | ||
} from '../util'; | ||
|
||
|
||
export const description = ` | ||
Keyboard users move focus from one form control to the next by using the tab | ||
key. By default focus order is determined by source order. | ||
The \`tabIndex\` prop allows the author to specify an alternative tab order. | ||
Elements with a \`tabIndex\` value greater than zero will receive focus in numerical | ||
order, ahead of focusable elements with a \`tabIndex\` of zero. | ||
It is recommended that authors avoid positive values for the \`tabIndex\` attribute | ||
because it is brittle (any focusable elements added to the page without an | ||
explicit \`tabIndex\` value greater than zero will come last in the tab order) and | ||
can easily result in a page which is extremely difficult to navigate, causing | ||
accessibility problems. | ||
`; | ||
|
||
export default [{ | ||
msg: 'Avoid positive integer values for `tabIndex`.', | ||
AX: 'AX_FOCUS_03', | ||
test(_, props) { | ||
warnRuleDeprecated('avoid-positive-index', 'tabindex-no-positive'); | ||
const tabIndex = hasProp(props, 'tabIndex'); | ||
return !tabIndex || props.tabIndex <= 0; | ||
} | ||
}]; | ||
|
||
export const pass = [{ | ||
when: 'the element has no tabIndex', | ||
render: React => <div /> | ||
}, { | ||
when: 'the element has a negative tabIndex', | ||
render: React => <div tabIndex={-1} /> | ||
}, { | ||
when: 'the element has a tabIndex of zero', | ||
render: React => <div tabIndex="0" /> | ||
}]; | ||
|
||
export const fail = [{ | ||
when: 'the element has a positive tabIndex', | ||
// eslint-disable-next-line jsx-a11y/tabindex-no-positive | ||
render: React => <div tabIndex={2} /> | ||
}]; |
Oops, something went wrong.