[new] - Add no-autofocus rule. (#147)

Author: beefancohen

README.md

@@ -100,6 +100,7 @@ You can also enable all the recommended rules at once. Add `plugin:jsx-a11y/reco
 - [lang](docs/rules/lang.md): Enforce lang attribute has a valid value.
 - [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 screenreader.
+- [no-autofocus](docs/rules/no-autofocus.md): Enforce autoFocus prop is not used.
 - [no-distracting-elements](docs/rules/no-distracting-elements.md): Enforce distracting elements are not used.
 - [no-onchange](docs/rules/no-onchange.md): Enforce usage of `onBlur` over `onChange` on select menus for accessibility.
 - [no-static-element-interactions](docs/rules/no-static-element-interactions.md): Enforce non-interactive elements have no interactive handlers.

__tests__/src/rules/no-autofocus-test.js

@@ -0,0 +1,47 @@
+/* eslint-env jest */
+/**
+ * @fileoverview Enforce autoFocus prop is not used.
+ * @author Ethan Cohen <@evcohen>
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import rule from '../../../src/rules/no-autofocus';
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: 'The autoFocus prop should not be used, as it can reduce usability and accessibility for users.',
+  type: 'JSXAttribute',
+};
+
+ruleTester.run('no-autofocus', rule, {
+  valid: [
+    { code: '<div />;', parserOptions },
+    { code: '<div autofocus />;', parserOptions },
+    { code: '<input autofocus="true" />;', parserOptions },
+  ],
+  invalid: [
+    { code: '<div autoFocus />', errors: [expectedError], parserOptions },
+    { code: '<div autoFocus={true} />', errors: [expectedError], parserOptions },
+    { code: '<div autoFocus={false} />', errors: [expectedError], parserOptions },
+    { code: '<div autoFocus={undefined} />', errors: [expectedError], parserOptions },
+    { code: '<div autoFocus="true" />', errors: [expectedError], parserOptions },
+    { code: '<div autoFocus="false" />', errors: [expectedError], parserOptions },
+    { code: '<input autoFocus />', errors: [expectedError], parserOptions },
+  ],
+});

docs/rules/no-autofocus.md

@@ -0,0 +1,23 @@
+# no-autofocus
+
+Enforce that autoFocus prop is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users, alike.
+
+#### References
+1. [w3c](https://w3c.github.io/html/sec-forms.html#autofocusing-a-form-control-the-autofocus-attribute)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<div />
+```
+
+### Fail
+```jsx
+<div autoFocus />
+<div autoFocus="true" />
+<div autoFocus="false" />
+<div autoFocus={undefined} />
+```

src/index.js

@@ -20,6 +20,7 @@ module.exports = {
     lang: require('./rules/lang'),
     'mouse-events-have-key-events': require('./rules/mouse-events-have-key-events'),
     'no-access-key': require('./rules/no-access-key'),
+    'no-autofocus': require('./rules/no-autofocus'),
     'no-distracting-elements': require('./rules/no-distracting-elements'),
     'no-onchange': require('./rules/no-onchange'),
     'no-static-element-interactions': require('./rules/no-static-element-interactions'),
@@ -55,6 +56,7 @@ module.exports = {
         'jsx-a11y/label-has-for': 'error',
         'jsx-a11y/mouse-events-have-key-events': 'error',
         'jsx-a11y/no-access-key': 'error',
+        'jsx-a11y/no-autofocus': 'error',
         'jsx-a11y/no-distracting-elements': 'error',
         'jsx-a11y/no-onchange': 'error',
         'jsx-a11y/no-static-element-interactions': 'warn',

src/rules/no-autofocus.js

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview Enforce autoFocus prop is not used.
+ * @author Ethan Cohen <@evcohen>
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import { propName } from 'jsx-ast-utils';
+import { generateObjSchema } from '../util/schemas';
+
+const errorMessage = 'The autoFocus prop should not be used, as it can reduce usability and accessibility for users.';
+
+const schema = generateObjSchema();
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: context => ({
+    JSXAttribute: (attribute) => {
+      // Don't normalize, since React only recognizes autoFocus on low-level DOM elements.
+      if (propName(attribute) === 'autoFocus') {
+        context.report({
+          node: attribute,
+          message: errorMessage,
+        });
+      }
+    },
+  }),
+};