You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -29,13 +33,13 @@ Ryan Florence built out this awesome runtime-analysis tool called [react-a11y](h
29
33
30
34
You'll first need to install [ESLint](http://eslint.org):
31
35
32
-
```
36
+
```sh
33
37
$ npm i eslint --save-dev
34
38
```
35
39
36
40
Next, install `eslint-plugin-jsx-a11y`:
37
41
38
-
```
42
+
```sh
39
43
$ npm install eslint-plugin-jsx-a11y --save-dev
40
44
```
41
45
@@ -47,9 +51,9 @@ Add `jsx-a11y` to the plugins section of your `.eslintrc` configuration file. Yo
47
51
48
52
```json
49
53
{
50
-
"plugins": [
51
-
"jsx-a11y"
52
-
]
54
+
"plugins": [
55
+
"jsx-a11y"
56
+
]
53
57
}
54
58
```
55
59
@@ -58,27 +62,30 @@ Then configure the rules you want to use under the rules section.
58
62
59
63
```json
60
64
{
61
-
"rules": {
62
-
"jsx-a11y/rule-name": 2
63
-
}
65
+
"rules": {
66
+
"jsx-a11y/rule-name": 2
67
+
}
64
68
}
65
69
```
66
70
67
71
## Supported Rules
68
72
69
-
-[img-uses-alt](docs/rules/img-uses-alt.md): Enforce that img jsx elements use the alt attribute.
70
-
-[onclick-uses-role](docs/rules/onclick-uses-role.md): Enforce that non-interactive, visible elements (such as div) that have click handlers use the role attribute.
71
-
-[mouse-events-map-to-key-events](docs/rules/mouse-events-map-to-key-events.md): Enforce that onMouseOver/onMouseOut are accompanied by onFocus/onBlur for strictly keyboard users.
72
-
-[use-onblur-not-onchange](docs/rules/use-onblur-not-onchange.md): Enforce that onBlur is used instead of onChange.
73
-
-[no-access-key](docs/rules/no-access-key.md): Enforce that the accessKey prop is not used on any element to avoid complications with keyboard commands used by a screenreader.
74
-
-[label-uses-for](docs/rules/label-uses-for.md): Enforce that label elements have the htmlFor attribute
75
-
-[redundant-alt](docs/rules/redundant-alt.md): Enforce img alt attribute does not contain the word image, picture, or photo.
76
-
-[no-hash-href](docs/rules/no-hash-href.md): Enforce an anchor element's href prop value is not just #.
73
+
-[aria-role-supports-attribute](docs/rules/aria-role-supports-attribute.md): Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`.
74
+
-[avoid-positive-tabindex](docs/rules/avoid-positive-tabindex.md): Enforce `tabIndex` value is not greater than zero.
75
+
-[img-uses-alt](docs/rules/img-uses-alt.md): Enforce that `<img>` JSX elements use the `alt` prop.
76
+
-[label-uses-for](docs/rules/label-uses-for.md): Enforce that `<label>` elements have the `htmlFor` prop.
77
+
-[mouse-events-map-to-key-events](docs/rules/mouse-events-map-to-key-events.md): Enforce that `onMouseOver`/`onMouseOut` are accompanied by `onFocus`/`onBlur` for keyboard-only users.
78
+
-[no-access-key](docs/rules/no-access-key.md): Enforce that the `accessKey` prop is not used on any element to avoid complications with keyboard commands used by a screenreader.
79
+
-[no-hash-href](docs/rules/no-hash-href.md): Enforce an anchor element's `href` prop value is not just `#`.
80
+
-[no-invalid-aria](docs/rules/no-invalid-aria.md): Enforce all `aria-*` props are valid.
81
+
-[no-unsupported-elements-use-aria](docs/rules/no-unsupported-elements-use-aria.md): Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes.
82
+
-[onclick-has-focus](docs/rules/onclick-has-focus.md): Enforce that elements with `onClick` handlers must be focusable.
83
+
-[onclick-uses-role](docs/rules/onclick-uses-role.md): Enforce that non-interactive, visible elements (such as `<div>`) that have click handlers use the role attribute.
84
+
-[redundant-alt](docs/rules/redundant-alt.md): Enforce `<img>` alt prop does not contain the word "image", "picture", or "photo".
85
+
-[role-requires-aria](docs/rules/role-requires-aria.md): Enforce that elements with ARIA roles must have all required attributes for that role.
86
+
-[use-onblur-not-onchange](docs/rules/use-onblur-not-onchange.md): Enforce that `onBlur` is used instead of `onChange`.
87
+
-[valid-aria-proptype](docs/rules/valid-aria-proptype.md): Enforce ARIA state and property values are valid.
77
88
-[valid-aria-role](docs/rules/valid-aria-role.md): Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
78
-
-[no-invalid-aria](docs/rules/no-invalid-aria.md): Enforce all aria-* properties are valid.
79
-
80
-
## Contributing
81
-
Feel free to contribute! I am currently using [Google Chrome's Audit Rules](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules) to map out as rules for this plugin.
Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`. Many ARIA attributes (states and properties) can only be used on elements with particular roles. Some elements have implicit roles, such as `<a href="#" />`, which will resolve to `role="link"`.
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.
Enforce that visible elements with onClick handlers must be focusable. Visible means that it is not hidden from a screen reader. Examples of non-interactive elements are `div`, `section`, and `a` elements without a href prop. Elements which have click handlers but are not focusable can not be used by keyboard-only users.
4
+
5
+
To make an element focusable, you can either set the tabIndex property, or use an element type which is inherently focusable.
6
+
7
+
Elements that are inherently focusable are as follows:
8
+
-`<input>`, `<button>`, `<select>` and `<textarea>` elements which are not disabled
9
+
-`<a>` or `<area>` elements with an `href` attribute.
Copy file name to clipboardExpand all lines: docs/rules/onclick-uses-role.md
+5-3Lines changed: 5 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,9 @@
1
1
# onclick-uses-role
2
2
3
-
Enforce visible, non-interactive elements with click handlers use role attribute. Visible means that it is not hidden from a screen reader. Examples of non-interactive elements are `div`, `section`, and `a` elements without a href prop.The purpose of the role attribute is to identify to screenreaders the exact function of an element.
3
+
Enforce visible, non-interactive elements with click handlers use role attribute. Visible means that it is not hidden from a screen reader. Examples of non-interactive elements are `div`, `section`, and `a` elements without a href prop. The purpose of the role attribute is to identify to screenreaders the exact function of an element.
0 commit comments