new autocomplete-valid rule

WilcoFiers · WilcoFiers · commit 9916990d89a4 · 2019-11-06T20:55:37.000+01:00
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,68 @@
+/* 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',
+}];
+
+const ignoreNonDOMSchema = [{
+  ignoreNonDOM: true,
+}];
+
+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>;', options: ignoreNonDOMSchema },
+  ].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 },
+
+    // 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 },
+  ].map(parserOptionsMapper),
+});
diff --git a/__tests__/src/util/JSXVirtualNode-test.js b/__tests__/src/util/JSXVirtualNode-test.js
@@ -0,0 +1,112 @@
+/* eslint-env mocha */
+import expect from 'expect';
+import { AbstractVirtualNode } from 'axe-core';
+import JSXVirtualNode from '../../../src/util/JSXVirtualNode';
+import JSXElementMock from '../../../__mocks__/JSXElementMock';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+import IdentifierMock from '../../../__mocks__/IdentifierMock';
+
+describe('JSXVirtualNode', () => {
+  it('extends AbstractVirtualNode', () => {
+    expect(new JSXVirtualNode()).toBeInstanceOf(AbstractVirtualNode);
+  });
+
+  it('sets default props when no props are provided', () => {
+    const { props } = new JSXVirtualNode();
+    expect(props).toHaveProperty('nodeType', 1);
+    expect(props).toHaveProperty('nodeName', 'div');
+  });
+
+  it('sets props not part of the default', () => {
+    const { props } = new JSXVirtualNode({
+      props: {
+        nodeName: 'span',
+        foo: 'bar',
+      },
+    });
+    expect(props).toHaveProperty('nodeType', 1); // default
+    expect(props).toHaveProperty('nodeName', 'span');
+    expect(props).toHaveProperty('foo', 'bar');
+  });
+
+  describe('.attr()', () => {
+    it('returns null when the attribute does not exist', () => {
+      const vNode = new JSXVirtualNode();
+      expect(vNode.attr('id')).toBeNull();
+    });
+
+    it('returns the attribute value when set', () => {
+      const idAttr = JSXAttributeMock('id', 'foo');
+      const vNode = new JSXVirtualNode({
+        attrs: [idAttr],
+      });
+      expect(vNode.attr('id')).toBe('foo');
+    });
+
+    it('returns null when the attribute value is not a literal', () => {
+      const identifierExpression = IdentifierMock('theIdentifier');
+      const idAttr = JSXAttributeMock('id', identifierExpression);
+      const vNode = new JSXVirtualNode({
+        attrs: [idAttr],
+      });
+      expect(vNode.attr('id')).toBeNull();
+    });
+  });
+
+  describe('.hasAttr()', () => {
+    it('returns false when the attribute does not exist', () => {
+      const vNode = new JSXVirtualNode();
+      expect(vNode.hasAttr('id')).toBe(false);
+    });
+
+    it('returns true attribute value when set', () => {
+      const idAttr = JSXAttributeMock('id', 'foo');
+      const vNode = new JSXVirtualNode({
+        attrs: [idAttr],
+      });
+      expect(vNode.hasAttr('id')).toBe(true);
+    });
+
+    it('returns true when the attribute has no value', () => {
+      const idAttr = JSXAttributeMock('id');
+      const vNode = new JSXVirtualNode({
+        attrs: [idAttr],
+      });
+      expect(vNode.hasAttr('id')).toBe(true);
+    });
+
+    it('returns true when the attribute value is not a literal', () => {
+      const identifierExpression = IdentifierMock('theIdentifier');
+      const idAttr = JSXAttributeMock('id', identifierExpression);
+      const vNode = new JSXVirtualNode({
+        attrs: [idAttr],
+      });
+      expect(vNode.hasAttr('id')).toBe(true);
+    });
+  });
+
+  describe('::fromJSXOpeningElement()', () => {
+    it('creates a virtual node', () => {
+      const { openingElement } = JSXElementMock('div');
+      const vNode = JSXVirtualNode.fromJSXOpeningElement(openingElement);
+      expect(vNode).toBeInstanceOf(AbstractVirtualNode);
+    });
+
+    it('sets the correct props', () => {
+      const { openingElement } = JSXElementMock('span');
+      const { props } = JSXVirtualNode.fromJSXOpeningElement(openingElement);
+      expect(props).toHaveProperty('nodeType', 1);
+      expect(props).toHaveProperty('nodeName', 'span');
+    });
+
+    it('sets the correct attribute', () => {
+      const { openingElement } = JSXElementMock('input', [
+        JSXAttributeMock('id', 'foo'),
+        JSXAttributeMock('type', 'text'),
+      ]);
+      const vNode = JSXVirtualNode.fromJSXOpeningElement(openingElement);
+      expect(vNode.attr('id')).toBe('foo');
+      expect(vNode.attr('type')).toBe('text');
+    });
+  });
+});
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, {
+            "ignoreNonDOM": true
+        }],
+    }
+}
+```
+
+### Succeed
+```jsx
+<!-- Good: the autocomplete attribute is used according to the HTML specification -->
+<input type="text" autocomplete="name" />
+
+<!-- Good: ignoreNonDOM is set to true -->
+<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: ignoreNonDOM is undefined or set to false -->
+<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.2.2-canary.d45f81e",
     "axobject-query": "^2.0.2",
     "damerau-levenshtein": "^1.0.4",
     "emoji-regex": "^7.0.2",
diff --git a/src/rules/autocomplete-valid.js b/src/rules/autocomplete-valid.js
@@ -0,0 +1,58 @@
+/**
+ * @fileoverview Ensure autocomplete attribute is correct.
+ * @author Wilco Fiers
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+import { dom } from 'aria-query';
+import { runVirtualRule } from 'axe-core';
+import { elementType } from 'jsx-ast-utils';
+import { generateObjSchema } from '../util/schemas';
+import JSXVirtualNode from '../util/JSXVirtualNode';
+
+const schema = generateObjSchema({
+  ignoreNonDOM: {
+    type: 'boolean',
+    default: false,
+  },
+});
+
+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) => {
+      // Determine if ignoreNonDOM is set to true
+      // If true, then do not run rule.
+      const options = context.options[0] || {};
+      const ignoreNonDOM = !!options.ignoreNonDOM;
+      const nodeName = elementType(node);
+      const isDOMNode = dom.get(nodeName);
+      if (ignoreNonDOM && !isDOMNode) {
+        return;
+      }
+
+      // If not a DOM node, assume an input element
+      const vNode = new JSXVirtualNode({
+        props: { nodeName: isDOMNode ? nodeName : 'input' },
+        attrs: node.attributes,
+      });
+
+      const { violations } = runVirtualRule('autocomplete-valid', vNode);
+      if (violations.length === 0) {
+        return;
+      }
+      context.report({
+        node,
+        message: violations[0].nodes[0].all[0].message,
+      });
+    },
+  }),
+};
diff --git a/src/util/JSXVirtualNode.js b/src/util/JSXVirtualNode.js
@@ -0,0 +1,45 @@
+/* eslint-disable no-underscore-dangle */
+import { AbstractVirtualNode } from 'axe-core';
+
+const defaultProps = {
+  nodeType: 1,
+  nodeName: 'div',
+};
+
+export default class JSXVirtualNode extends AbstractVirtualNode {
+  constructor({
+    props = {},
+    attrs = [],
+  } = {}) {
+    super();
+    this._attrs = [...attrs];
+    this._props = {
+      ...defaultProps,
+      ...props,
+    };
+  }
+
+  get props() {
+    return this._props;
+  }
+
+  attr(attrName) {
+    const jsxAttr = this._attrs.find(({ name }) => name.name === attrName);
+    return (jsxAttr && jsxAttr.value && jsxAttr.value.value
+      ? jsxAttr.value.value
+      : null
+    );
+  }
+
+  hasAttr(attrName) {
+    return this._attrs.some(({ name }) => name.name === attrName);
+  }
+
+  static fromJSXOpeningElement(jsxNode) {
+    const { name = {}, attributes } = jsxNode;
+    return new JSXVirtualNode({
+      props: { nodeName: name.name || undefined },
+      attrs: attributes,
+    });
+  }
+}
