[patch] no-autofocus: don't report error if autoFocus is set to false

This change adjusts the error condition for `no-autofocus` to allow for manually disabling `autoFocus`. Now, any usage of `autoFocus="false"` or `autoFocus={false}` will not report.
jsx-eslint · Dec 25, 2024 · 91e39b4 · 91e39b4
1 parent bfb0e9e
commit 91e39b4
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git 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
@@ -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: '<div autofocus />;' },
     { code: '<input autofocus="true" />;' },
     { code: '<Foo bar />' },
+    { code: '<div autoFocus={false} />' },
+    { code: '<div autoFocus="false" />' },
     { code: '<Foo autoFocus />', options: ignoreNonDOMSchema },
     { code: '<div><div autofocus /></div>', options: ignoreNonDOMSchema },
     { code: '<Button />', settings: componentsSettings },
@@ -51,10 +53,8 @@ ruleTester.run('no-autofocus', rule, {
   invalid: parsers.all([].concat(
     { code: '<div autoFocus />', errors: [expectedError] },
     { code: '<div autoFocus={true} />', errors: [expectedError] },
-    { code: '<div autoFocus={false} />', errors: [expectedError] },
     { code: '<div autoFocus={undefined} />', errors: [expectedError] },
     { code: '<div autoFocus="true" />', errors: [expectedError] },
-    { code: '<div autoFocus="false" />', errors: [expectedError] },
     { code: '<input autoFocus />', errors: [expectedError] },
     { code: '<Foo autoFocus />', errors: [expectedError] },
     { code: '<Button autoFocus />', errors: [expectedError], settings: componentsSettings },

diff --git a/docs/rules/no-autofocus.md b/docs/rules/no-autofocus.md
@@ -4,7 +4,7 @@
 
 <!-- end auto-generated rule header -->
 
-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
 <div />
+<div autoFocus="false" />
 ```
 
 ### Fail
 ```jsx
 <div autoFocus />
 <div autoFocus="true" />
-<div autoFocus="false" />
 <div autoFocus={undefined} />
 ```
 

diff --git 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,