Merge pull request #624 from WilcoFiers/autocomplete-rule

jessebeach · web-flow · commit de761845a55f · 2019-11-06T21:12:50.000+01:00
Add new autocomplete-valid rule using axe-core
diff --git a/README.md b/README.md
@@ -103,6 +103,7 @@ Add `plugin:jsx-a11y/recommended` or `plugin:jsx-a11y/strict` in `extends`:
 - [aria-proptypes](docs/rules/aria-proptypes.md): Enforce ARIA state and property values are valid.
 - [aria-role](docs/rules/aria-role.md): Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
 - [aria-unsupported-elements](docs/rules/aria-unsupported-elements.md): Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes.
+- [autocomplete-valid](docs/rules/autocomplete-valid.md): Enforce that autocomplete attributes are used correctly.
 - [click-events-have-key-events](docs/rules/click-events-have-key-events.md): Enforce a clickable non-interactive element has at least one keyboard event listener.
 - [heading-has-content](docs/rules/heading-has-content.md): Enforce heading (`h1`, `h2`, etc) elements contain accessible content.
 - [html-has-lang](docs/rules/html-has-lang.md): Enforce `<html>` element has `lang` prop.
@@ -141,6 +142,7 @@ Rule | Recommended | Strict
 [aria-proptypes](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md) | error | error
 [aria-role](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md) | error | error
 [aria-unsupported-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md) | error | error
+[autocomplete-valid](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/autocomplete-valid.md) | error | error
 [click-events-have-key-events](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md) | error | error
 [heading-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md) | error | error
 [html-has-lang](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/html-has-lang.md) | error | error
diff --git a/__tests__/__util__/axeMapping.js b/__tests__/__util__/axeMapping.js
@@ -0,0 +1,6 @@
+/* eslint-disable import/prefer-default-export, no-underscore-dangle */
+import * as axe from 'axe-core';
+
+export function axeFailMessage(checkId, data) {
+  return axe._audit.data.checks[checkId].messages.fail(data);
+}
diff --git a/__tests__/src/rules/autocomplete-valid-test.js b/__tests__/src/rules/autocomplete-valid-test.js
@@ -0,0 +1,64 @@
+/* eslint-env jest */
+/**
+ * @fileoverview Ensure autocomplete attribute is correct.
+ * @author Wilco Fiers
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import { axeFailMessage } from '../../__util__/axeMapping';
+import rule from '../../../src/rules/autocomplete-valid';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const invalidAutocomplete = [{
+  message: axeFailMessage('autocomplete-valid'),
+  type: 'JSXOpeningElement',
+}];
+
+const inappropriateAutocomplete = [{
+  message: axeFailMessage('autocomplete-appropriate'),
+  type: 'JSXOpeningElement',
+}];
+
+ruleTester.run('autocomplete-valid', rule, {
+  valid: [
+    // INAPPLICABLE
+    { code: '<input type="text" />;' },
+    // // PASSED AUTOCOMPLETE
+    { code: '<input type="text" autocomplete="name" />;' },
+    { code: '<input type="text" autocomplete="" />;' },
+    { code: '<input type="text" autocomplete="off" />;' },
+    { code: '<input type="text" autocomplete="on" />;' },
+    { code: '<input type="text" autocomplete="billing family-name" />;' },
+    { code: '<input type="text" autocomplete="section-blue shipping street-address" />;' },
+    { code: '<input type="text" autocomplete="section-somewhere shipping work email" />;' },
+    { code: '<input type="text" autocomplete />;' },
+    { code: '<input type="text" autocomplete={autocompl} />;' },
+    { code: '<input type="text" autocomplete={autocompl || "name"} />;' },
+    { code: '<input type="text" autocomplete={autocompl || "foo"} />;' },
+    { code: '<Foo autocomplete="bar"></Foo>;' },
+  ].map(parserOptionsMapper),
+  invalid: [
+    // FAILED "autocomplete-valid"
+    { code: '<input type="text" autocomplete="foo" />;', errors: invalidAutocomplete },
+    { code: '<input type="text" autocomplete="name invalid" />;', errors: invalidAutocomplete },
+    { code: '<input type="text" autocomplete="invalid name" />;', errors: invalidAutocomplete },
+    { code: '<input type="text" autocomplete="home url" />;', errors: invalidAutocomplete },
+    { code: '<Bar autocomplete="baz"></Bar>;', errors: invalidAutocomplete, options: [{ inputComponents: ['Bar'] }] },
+
+    // FAILED "autocomplete-appropriate"
+    { code: '<input type="date" autocomplete="email" />;', errors: inappropriateAutocomplete },
+    { code: '<input type="number" autocomplete="url" />;', errors: inappropriateAutocomplete },
+    { code: '<input type="month" autocomplete="tel" />;', errors: inappropriateAutocomplete },
+    { code: '<Foo type="month" autocomplete="tel"></Foo>;', errors: inappropriateAutocomplete, options: [{ inputComponents: ['Foo'] }] },
+  ].map(parserOptionsMapper),
+});
diff --git a/docs/rules/autocomplete-valid.md b/docs/rules/autocomplete-valid.md
@@ -0,0 +1,42 @@
+# autocomplete-valid
+
+Ensure the autocomplete attribute is correct and suitable for the form field it is used with.
+
+#### References
+1. [axe-core, autocomplete-valid](https://dequeuniversity.com/rules/axe/3.2/autocomplete-valid)
+2. [HTML 5.2, Autocomplete requirements](https://www.w3.org/TR/html52/sec-forms.html#autofilling-form-controls-the-autocomplete-attribute)
+
+## Rule details
+
+This rule takes one optional object argument of type object:
+
+```
+{
+    "rules": {
+        "jsx-a11y/autocomplete-valid": [ 2, {
+            "inputComponents": ["Input", "FormField"]
+        }],
+    }
+}
+```
+
+### Succeed
+```jsx
+<!-- Good: the autocomplete attribute is used according to the HTML specification -->
+<input type="text" autocomplete="name" />
+
+<!-- Good: MyInput is not listed in inputComponents -->
+<MyInput autocomplete="incorrect" /> 
+```
+
+### Fail
+```jsx
+<!-- Bad: the autocomplete attribute has an invalid value -->
+<input type="text" autocomplete="incorrect" />
+
+<!-- Bad: the autocomplete attribute is on an inappropriate input element -->
+<input type="email" autocomplete="url" />
+
+<!-- Bad: MyInput is listed in inputComponents -->
+<MyInput autocomplete="incorrect" /> 
+```
diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
     "aria-query": "^3.0.0",
     "array-includes": "^3.0.3",
     "ast-types-flow": "^0.0.7",
+    "axe-core": "^3.4.0",
     "axobject-query": "^2.0.2",
     "damerau-levenshtein": "^1.0.4",
     "emoji-regex": "^7.0.2",
diff --git a/src/index.js b/src/index.js
@@ -58,6 +58,7 @@ module.exports = {
         'jsx-a11y/aria-proptypes': 'error',
         'jsx-a11y/aria-role': 'error',
         'jsx-a11y/aria-unsupported-elements': 'error',
+        'jsx-a11y/autocomplete-valid': 'error',
         'jsx-a11y/click-events-have-key-events': 'error',
         'jsx-a11y/control-has-associated-label': ['off',
           {
@@ -214,6 +215,7 @@ module.exports = {
         'jsx-a11y/aria-proptypes': 'error',
         'jsx-a11y/aria-role': 'error',
         'jsx-a11y/aria-unsupported-elements': 'error',
+        'jsx-a11y/autocomplete-valid': 'error',
         'jsx-a11y/click-events-have-key-events': 'error',
         'jsx-a11y/control-has-associated-label': ['off', {
           ignoreElements: [
diff --git a/src/rules/autocomplete-valid.js b/src/rules/autocomplete-valid.js
@@ -0,0 +1,57 @@
+/**
+ * @fileoverview Ensure autocomplete attribute is correct.
+ * @author Wilco Fiers
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+import { runVirtualRule } from 'axe-core';
+import { elementType, getLiteralPropValue, getProp } from 'jsx-ast-utils';
+import { generateObjSchema, arraySchema } from '../util/schemas';
+
+const schema = generateObjSchema({
+  inputComponents: arraySchema,
+});
+
+module.exports = {
+  meta: {
+    docs: {
+      url: 'https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules/autocomplete-valid.md',
+    },
+    schema: [schema],
+  },
+
+  create: context => ({
+    JSXOpeningElement: (node) => {
+      const options = context.options[0] || {};
+      const { inputComponents = [] } = options;
+      const inputTypes = ['input', ...inputComponents];
+
+      const elType = elementType(node);
+      const autocomplete = getLiteralPropValue(getProp(node.attributes, 'autocomplete'));
+
+      if (typeof autocomplete !== 'string' || !inputTypes.includes(elType)) {
+        return;
+      }
+
+      const { violations } = runVirtualRule('autocomplete-valid', {
+        nodeName: 'input',
+        attributes: {
+          autocomplete,
+          // Which autocomplete is valid depends on the input type
+          type: getLiteralPropValue(getProp(node.attributes, 'type')),
+        },
+      });
+
+      if (violations.length === 0) {
+        return;
+      }
+      // Since we only test one rule, with one node, return the message from first (and only) instance of each
+      context.report({
+        node,
+        message: violations[0].nodes[0].all[0].message,
+      });
+    },
+  }),
+};
