[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.

[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.

Author: michaelfaith

README.md

@@ -227,15 +227,15 @@ To restrict polymorphic linting to specified components, additionally set `polym
 
 ## Supported Rules
 
-<!-- begin auto-generated rules list -->
-
-💼 Configurations enabled in.\
-🚫 Configurations disabled in.\
-☑️ Set in the `recommended` configuration.\
-🔒 Set in the `strict` configuration.\
-💡 Manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions).\
-❌ Deprecated.
-
+<!-- begin auto-generated rules list -->
+
+💼 Configurations enabled in.\
+🚫 Configurations disabled in.\
+☑️ Set in the `recommended` configuration.\
+🔒 Set in the `strict` configuration.\
+💡 Manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions).\
+❌ Deprecated.
+
 | Name                                                                                                         | Description                                                                                                                         | 💼    | 🚫    | 💡 | ❌  |
 | :----------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------- | :---- | :---- | :- | :- |
 | [accessible-emoji](docs/rules/accessible-emoji.md)                                                           | Enforce emojis are wrapped in `<span>` and provide screen reader access.                                                            |       |       |    | ❌  |
@@ -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.                                                  | ☑️ 🔒 |       |    |    |
@@ -276,8 +276,8 @@ To restrict polymorphic linting to specified components, additionally set `polym
 | [role-has-required-aria-props](docs/rules/role-has-required-aria-props.md)                                   | Enforce that elements with ARIA roles must have all required attributes for that role.                                              | ☑️ 🔒 |       |    |    |
 | [role-supports-aria-props](docs/rules/role-supports-aria-props.md)                                           | Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`.            | ☑️ 🔒 |       |    |    |
 | [scope](docs/rules/scope.md)                                                                                 | Enforce `scope` prop is only used on `<th>` elements.                                                                               | ☑️ 🔒 |       |    |    |
-| [tabindex-no-positive](docs/rules/tabindex-no-positive.md)                                                   | Enforce `tabIndex` value is not greater than zero.                                                                                  | ☑️ 🔒 |       |    |    |
-
+| [tabindex-no-positive](docs/rules/tabindex-no-positive.md)                                                   | Enforce `tabIndex` value is not greater than zero.                                                                                  | ☑️ 🔒 |       |    |    |
+
 <!-- end auto-generated rules list -->
 
 The following rules have extra options when in _recommended_ mode:

__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 },

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} />
 ```
 

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,10 @@ 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') {
+          // eslint-disable-next-line no-console
+          console.log(`attribute value: ${getPropValue(attribute)}`);
           context.report({
             node: attribute,
             message: errorMessage,