diff --git a/README.md b/README.md
index 494a5784..3ec1ecaf 100644
--- a/README.md
+++ b/README.md
@@ -263,7 +263,7 @@ To restrict polymorphic linting to specified components, additionally set `polym
| [mouse-events-have-key-events](docs/rules/mouse-events-have-key-events.md) | Enforce that `onMouseOver`/`onMouseOut` are accompanied by `onFocus`/`onBlur` for keyboard-only users. | ☑️ 🔒 | | | |
| [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 screen reader. | ☑️ 🔒 | | | |
| [no-aria-hidden-on-focusable](docs/rules/no-aria-hidden-on-focusable.md) | Disallow `aria-hidden="true"` from being set on focusable elements. | | | | |
-| [no-autofocus](docs/rules/no-autofocus.md) | Enforce autoFocus prop is not used. | ☑️ 🔒 | | | |
+| [no-autofocus](docs/rules/no-autofocus.md) | Enforce autoFocus prop is not enabled. | ☑️ 🔒 | | | |
| [no-distracting-elements](docs/rules/no-distracting-elements.md) | Enforce distracting elements are not used. | ☑️ 🔒 | | | |
| [no-interactive-element-to-noninteractive-role](docs/rules/no-interactive-element-to-noninteractive-role.md) | Interactive elements should not be assigned non-interactive roles. | ☑️ 🔒 | | | |
| [no-noninteractive-element-interactions](docs/rules/no-noninteractive-element-interactions.md) | Non-interactive elements should not be assigned mouse or keyboard event listeners. | ☑️ 🔒 | | | |
diff --git a/__tests__/src/rules/no-autofocus-test.js b/__tests__/src/rules/no-autofocus-test.js
index 13bddc72..5bdcfb59 100644
--- a/__tests__/src/rules/no-autofocus-test.js
+++ b/__tests__/src/rules/no-autofocus-test.js
@@ -19,7 +19,7 @@ import rule from '../../../src/rules/no-autofocus';
const ruleTester = new RuleTester();
const expectedError = {
- message: 'The autoFocus prop should not be used, as it can reduce usability and accessibility for users.',
+ message: 'The autoFocus prop should not be enabled, as it can reduce usability and accessibility for users.',
type: 'JSXAttribute',
};
@@ -43,6 +43,8 @@ ruleTester.run('no-autofocus', rule, {
{ code: '
', options: ignoreNonDOMSchema },
{ code: '', settings: componentsSettings },
@@ -51,10 +53,8 @@ ruleTester.run('no-autofocus', rule, {
invalid: parsers.all([].concat(
{ code: '', errors: [expectedError] },
{ code: '', errors: [expectedError] },
- { code: '', errors: [expectedError] },
{ code: '', errors: [expectedError] },
{ code: '', errors: [expectedError] },
- { code: '', errors: [expectedError] },
{ code: '', errors: [expectedError] },
{ code: '', errors: [expectedError] },
{ code: '', errors: [expectedError], settings: componentsSettings },
diff --git a/docs/rules/no-autofocus.md b/docs/rules/no-autofocus.md
index d91469b3..50e416f3 100644
--- a/docs/rules/no-autofocus.md
+++ b/docs/rules/no-autofocus.md
@@ -4,7 +4,7 @@
-Enforce that autoFocus prop is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users, alike.
+Enforce that `autoFocus` prop is either not set at all on elements or is only set to `false`. Auto-focusing elements can cause usability issues for sighted and non-sighted users, alike.
## Rule options
@@ -25,13 +25,13 @@ For the `ignoreNonDOM` option, this determines if developer created components a
### Succeed
```jsx
+
```
### Fail
```jsx
-
```
diff --git a/src/rules/no-autofocus.js b/src/rules/no-autofocus.js
index 43c3fe59..cfaecfe0 100644
--- a/src/rules/no-autofocus.js
+++ b/src/rules/no-autofocus.js
@@ -7,12 +7,12 @@
// Rule Definition
// ----------------------------------------------------------------------------
-import { propName } from 'jsx-ast-utils';
+import { propName, getPropValue } from 'jsx-ast-utils';
import { dom } from 'aria-query';
import { generateObjSchema } from '../util/schemas';
import getElementType from '../util/getElementType';
-const errorMessage = 'The autoFocus prop should not be used, as it can reduce usability and accessibility for users.';
+const errorMessage = 'The autoFocus prop should not be enabled, as it can reduce usability and accessibility for users.';
const schema = generateObjSchema({
ignoreNonDOM: {
@@ -25,7 +25,7 @@ export default {
meta: {
docs: {
url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-autofocus.md',
- description: 'Enforce autoFocus prop is not used.',
+ description: 'Enforce autoFocus prop is not enabled.',
},
schema: [schema],
},
@@ -46,8 +46,8 @@ export default {
}
}
- // Don't normalize, since React only recognizes autoFocus on low-level DOM elements.
- if (propName(attribute) === 'autoFocus') {
+ // Fail if autoFocus is used and the value is anything other than false (either via an expression or string literal).
+ if (propName(attribute) === 'autoFocus' && getPropValue(attribute) !== false && getPropValue(attribute) !== 'false') {
context.report({
node: attribute,
message: errorMessage,