@arcaauth/eslint-plugin-jsx-a11y 6.10.2

package/__tests__/src/rules/aria-props-test.js

@@ -0,0 +1,69 @@
+/**
+ * @fileoverview Enforce all aria-* properties are valid.
+ * @author Ethan Cohen
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { aria } from 'aria-query';
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import parsers from '../../__util__/helpers/parsers';
+import rule from '../../../src/rules/aria-props';
+import getSuggestion from '../../../src/util/getSuggestion';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+const ariaAttributes = aria.keys();
+
+const errorMessage = (name) => {
+  const suggestions = getSuggestion(name, ariaAttributes);
+  const message = `${name}: This attribute is an invalid ARIA attribute.`;
+
+  if (suggestions.length > 0) {
+    return {
+      type: 'JSXAttribute',
+      message: `${message} Did you mean to use ${suggestions}?`,
+    };
+  }
+
+  return {
+    type: 'JSXAttribute',
+    message,
+  };
+};
+
+// Create basic test cases using all valid role types.
+const basicValidityTests = ariaAttributes.map((prop) => ({
+  code: `<div ${prop.toLowerCase()}="foobar" />`,
+}));
+
+ruleTester.run('aria-props', rule, {
+  valid: parsers.all([].concat(
+    // Variables should pass, as we are only testing literals.
+    { code: '<div />' },
+    { code: '<div></div>' },
+    { code: '<div aria="wee"></div>' }, // Needs aria-*
+    { code: '<div abcARIAdef="true"></div>' },
+    { code: '<div fooaria-foobar="true"></div>' },
+    { code: '<div fooaria-hidden="true"></div>' },
+    { code: '<Bar baz />' },
+    { code: '<input type="text" aria-errormessage="foobar" />' },
+  )).concat(basicValidityTests).map(parserOptionsMapper),
+  invalid: parsers.all([].concat(
+    { code: '<div aria-="foobar" />', errors: [errorMessage('aria-')] },
+    {
+      code: '<div aria-labeledby="foobar" />',
+      errors: [errorMessage('aria-labeledby')],
+    },
+    {
+      code: '<div aria-skldjfaria-klajsd="foobar" />',
+      errors: [errorMessage('aria-skldjfaria-klajsd')],
+    },
+  )).map(parserOptionsMapper),
+});

package/__tests__/src/rules/aria-proptypes-test.js

@@ -0,0 +1,311 @@
+/**
+ * @fileoverview Enforce ARIA state and property values are valid.
+ * @author Ethan Cohen
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { aria } from 'aria-query';
+import { RuleTester } from 'eslint';
+import test from 'tape';
+
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import parsers from '../../__util__/helpers/parsers';
+import rule from '../../../src/rules/aria-proptypes';
+
+const { validityCheck } = rule;
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const errorMessage = (name) => {
+  const {
+    type,
+    values: permittedValues,
+  } = aria.get(name.toLowerCase());
+
+  switch (type) {
+    case 'tristate':
+      return { message: `The value for ${name} must be a boolean or the string "mixed".` };
+    case 'token':
+      return { message: `The value for ${name} must be a single token from the following: ${permittedValues}.` };
+    case 'tokenlist':
+      return {
+        message: `The value for ${name} must be a list of one or more \
+tokens from the following: ${permittedValues}.`,
+      };
+    case 'idlist':
+      return { message: `The value for ${name} must be a list of strings that represent DOM element IDs (idlist)` };
+    case 'id':
+      return { message: `The value for ${name} must be a string that represents a DOM element ID` };
+    case 'boolean':
+    case 'string':
+    case 'integer':
+    case 'number':
+    default:
+      return { message: `The value for ${name} must be a ${type}.` };
+  }
+};
+
+test('validityCheck', (t) => {
+  t.equal(
+    validityCheck(null, null),
+    false,
+    'is false for an unknown expected type',
+  );
+
+  t.end();
+});
+
+ruleTester.run('aria-proptypes', rule, {
+  valid: parsers.all([].concat(
+    // DON'T TEST INVALID ARIA-* PROPS
+    { code: '<div aria-foo="true" />' },
+    { code: '<div abcaria-foo="true" />' },
+
+    // BOOLEAN
+    { code: '<div aria-hidden={true} />' },
+    { code: '<div aria-hidden="true" />' },
+    { code: '<div aria-hidden={"false"} />' },
+    { code: '<div aria-hidden={!false} />' },
+    { code: '<div aria-hidden />' },
+    { code: '<div aria-hidden={false} />' },
+    { code: '<div aria-hidden={!true} />' },
+    { code: '<div aria-hidden={!"yes"} />' },
+    { code: '<div aria-hidden={foo} />' },
+    { code: '<div aria-hidden={foo.bar} />' },
+    { code: '<div aria-hidden={null} />' },
+    { code: '<div aria-hidden={undefined} />' },
+    { code: '<div aria-hidden={<div />} />' },
+
+    // STRING
+    { code: '<div aria-label="Close" />' },
+    { code: '<div aria-label={`Close`} />' },
+    { code: '<div aria-label={foo} />' },
+    { code: '<div aria-label={foo.bar} />' },
+    { code: '<div aria-label={null} />' },
+    { code: '<div aria-label={undefined} />' },
+    { code: '<input aria-invalid={error ? "true" : "false"} />' },
+    { code: '<input aria-invalid={undefined ? "true" : "false"} />' },
+
+    // TRISTATE
+    { code: '<div aria-checked={true} />' },
+    { code: '<div aria-checked="true" />' },
+    { code: '<div aria-checked={"false"} />' },
+    { code: '<div aria-checked={!false} />' },
+    { code: '<div aria-checked />' },
+    { code: '<div aria-checked={false} />' },
+    { code: '<div aria-checked={!true} />' },
+    { code: '<div aria-checked={!"yes"} />' },
+    { code: '<div aria-checked={foo} />' },
+    { code: '<div aria-checked={foo.bar} />' },
+    { code: '<div aria-checked="mixed" />' },
+    { code: '<div aria-checked={`mixed`} />' },
+    { code: '<div aria-checked={null} />' },
+    { code: '<div aria-checked={undefined} />' },
+
+    // INTEGER
+    { code: '<div aria-level={123} />' },
+    { code: '<div aria-level={-123} />' },
+    { code: '<div aria-level={+123} />' },
+    { code: '<div aria-level={~123} />' },
+    { code: '<div aria-level={"123"} />' },
+    { code: '<div aria-level={`123`} />' },
+    { code: '<div aria-level="123" />' },
+    { code: '<div aria-level={foo} />' },
+    { code: '<div aria-level={foo.bar} />' },
+    { code: '<div aria-level={null} />' },
+    { code: '<div aria-level={undefined} />' },
+
+    // NUMBER
+    { code: '<div aria-valuemax={123} />' },
+    { code: '<div aria-valuemax={-123} />' },
+    { code: '<div aria-valuemax={+123} />' },
+    { code: '<div aria-valuemax={~123} />' },
+    { code: '<div aria-valuemax={"123"} />' },
+    { code: '<div aria-valuemax={`123`} />' },
+    { code: '<div aria-valuemax="123" />' },
+    { code: '<div aria-valuemax={foo} />' },
+    { code: '<div aria-valuemax={foo.bar} />' },
+    { code: '<div aria-valuemax={null} />' },
+    { code: '<div aria-valuemax={undefined} />' },
+
+    // TOKEN
+    { code: '<div aria-sort="ascending" />' },
+    { code: '<div aria-sort="ASCENDING" />' },
+    { code: '<div aria-sort={"ascending"} />' },
+    { code: '<div aria-sort={`ascending`} />' },
+    { code: '<div aria-sort="descending" />' },
+    { code: '<div aria-sort={"descending"} />' },
+    { code: '<div aria-sort={`descending`} />' },
+    { code: '<div aria-sort="none" />' },
+    { code: '<div aria-sort={"none"} />' },
+    { code: '<div aria-sort={`none`} />' },
+    { code: '<div aria-sort="other" />' },
+    { code: '<div aria-sort={"other"} />' },
+    { code: '<div aria-sort={`other`} />' },
+    { code: '<div aria-sort={foo} />' },
+    { code: '<div aria-sort={foo.bar} />' },
+    { code: '<div aria-invalid={true} />' },
+    { code: '<div aria-invalid="true" />' },
+    { code: '<div aria-invalid={false} />' },
+    { code: '<div aria-invalid="false" />' },
+    { code: '<div aria-invalid="grammar" />' },
+    { code: '<div aria-invalid="spelling" />' },
+    { code: '<div aria-invalid={null} />' },
+    { code: '<div aria-invalid={undefined} />' },
+
+    // TOKENLIST
+    { code: '<div aria-relevant="additions" />' },
+    { code: '<div aria-relevant={"additions"} />' },
+    { code: '<div aria-relevant={`additions`} />' },
+    { code: '<div aria-relevant="additions removals" />' },
+    { code: '<div aria-relevant="additions additions" />' },
+    { code: '<div aria-relevant={"additions removals"} />' },
+    { code: '<div aria-relevant={`additions removals`} />' },
+    { code: '<div aria-relevant="additions removals text" />' },
+    { code: '<div aria-relevant={"additions removals text"} />' },
+    { code: '<div aria-relevant={`additions removals text`} />' },
+    { code: '<div aria-relevant="additions removals text all" />' },
+    { code: '<div aria-relevant={"additions removals text all"} />' },
+    { code: '<div aria-relevant={`removals additions text all`} />' },
+    { code: '<div aria-relevant={foo} />' },
+    { code: '<div aria-relevant={foo.bar} />' },
+    { code: '<div aria-relevant={null} />' },
+    { code: '<div aria-relevant={undefined} />' },
+
+    // ID
+    { code: '<div aria-activedescendant="ascending" />' },
+    { code: '<div aria-activedescendant="ASCENDING" />' },
+    { code: '<div aria-activedescendant={"ascending"} />' },
+    { code: '<div aria-activedescendant={`ascending`} />' },
+    { code: '<div aria-activedescendant="descending" />' },
+    { code: '<div aria-activedescendant={"descending"} />' },
+    { code: '<div aria-activedescendant={`descending`} />' },
+    { code: '<div aria-activedescendant="none" />' },
+    { code: '<div aria-activedescendant={"none"} />' },
+    { code: '<div aria-activedescendant={`none`} />' },
+    { code: '<div aria-activedescendant="other" />' },
+    { code: '<div aria-activedescendant={"other"} />' },
+    { code: '<div aria-activedescendant={`other`} />' },
+    { code: '<div aria-activedescendant={foo} />' },
+    { code: '<div aria-activedescendant={foo.bar} />' },
+    { code: '<div aria-activedescendant={null} />' },
+    { code: '<div aria-activedescendant={undefined} />' },
+
+    // IDLIST
+    { code: '<div aria-labelledby="additions" />' },
+    { code: '<div aria-labelledby={"additions"} />' },
+    { code: '<div aria-labelledby={`additions`} />' },
+    { code: '<div aria-labelledby="additions removals" />' },
+    { code: '<div aria-labelledby="additions additions" />' },
+    { code: '<div aria-labelledby={"additions removals"} />' },
+    { code: '<div aria-labelledby={`additions removals`} />' },
+    { code: '<div aria-labelledby="additions removals text" />' },
+    { code: '<div aria-labelledby={"additions removals text"} />' },
+    { code: '<div aria-labelledby={`additions removals text`} />' },
+    { code: '<div aria-labelledby="additions removals text all" />' },
+    { code: '<div aria-labelledby={"additions removals text all"} />' },
+    { code: '<div aria-labelledby={`removals additions text all`} />' },
+    { code: '<div aria-labelledby={foo} />' },
+    { code: '<div aria-labelledby={foo.bar} />' },
+    { code: '<div aria-labelledby={null} />' },
+    { code: '<div aria-labelledby={undefined} />' },
+  )).map(parserOptionsMapper),
+  invalid: parsers.all([].concat(
+    // BOOLEAN
+    { code: '<div aria-hidden="yes" />', errors: [errorMessage('aria-hidden')] },
+    { code: '<div aria-hidden="no" />', errors: [errorMessage('aria-hidden')] },
+    { code: '<div aria-hidden={1234} />', errors: [errorMessage('aria-hidden')] },
+    {
+      code: '<div aria-hidden={`${abc}`} />',
+      errors: [errorMessage('aria-hidden')],
+    },
+
+    // STRING
+    { code: '<div aria-label />', errors: [errorMessage('aria-label')] },
+    { code: '<div aria-label={true} />', errors: [errorMessage('aria-label')] },
+    { code: '<div aria-label={false} />', errors: [errorMessage('aria-label')] },
+    { code: '<div aria-label={1234} />', errors: [errorMessage('aria-label')] },
+    { code: '<div aria-label={!true} />', errors: [errorMessage('aria-label')] },
+
+    // TRISTATE
+    { code: '<div aria-checked="yes" />', errors: [errorMessage('aria-checked')] },
+    { code: '<div aria-checked="no" />', errors: [errorMessage('aria-checked')] },
+    { code: '<div aria-checked={1234} />', errors: [errorMessage('aria-checked')] },
+    {
+      code: '<div aria-checked={`${abc}`} />',
+      errors: [errorMessage('aria-checked')],
+    },
+
+    // INTEGER
+    { code: '<div aria-level="yes" />', errors: [errorMessage('aria-level')] },
+    { code: '<div aria-level="no" />', errors: [errorMessage('aria-level')] },
+    { code: '<div aria-level={`abc`} />', errors: [errorMessage('aria-level')] },
+    { code: '<div aria-level={true} />', errors: [errorMessage('aria-level')] },
+    { code: '<div aria-level />', errors: [errorMessage('aria-level')] },
+    { code: '<div aria-level={"false"} />', errors: [errorMessage('aria-level')] },
+    { code: '<div aria-level={!"false"} />', errors: [errorMessage('aria-level')] },
+
+    // NUMBER
+    { code: '<div aria-valuemax="yes" />', errors: [errorMessage('aria-valuemax')] },
+    { code: '<div aria-valuemax="no" />', errors: [errorMessage('aria-valuemax')] },
+    {
+      code: '<div aria-valuemax={`abc`} />',
+      errors: [errorMessage('aria-valuemax')],
+    },
+    {
+      code: '<div aria-valuemax={true} />',
+      errors: [errorMessage('aria-valuemax')],
+    },
+    { code: '<div aria-valuemax />', errors: [errorMessage('aria-valuemax')] },
+    {
+      code: '<div aria-valuemax={"false"} />',
+      errors: [errorMessage('aria-valuemax')],
+    },
+    {
+      code: '<div aria-valuemax={!"false"} />',
+      errors: [errorMessage('aria-valuemax')],
+    },
+
+    // TOKEN
+    { code: '<div aria-sort="" />', errors: [errorMessage('aria-sort')] },
+    { code: '<div aria-sort="descnding" />', errors: [errorMessage('aria-sort')] },
+    { code: '<div aria-sort />', errors: [errorMessage('aria-sort')] },
+    { code: '<div aria-sort={true} />', errors: [errorMessage('aria-sort')] },
+    { code: '<div aria-sort={"false"} />', errors: [errorMessage('aria-sort')] },
+    {
+      code: '<div aria-sort="ascending descending" />',
+      errors: [errorMessage('aria-sort')],
+    },
+
+    // TOKENLIST
+    { code: '<div aria-relevant="" />', errors: [errorMessage('aria-relevant')] },
+    {
+      code: '<div aria-relevant="foobar" />',
+      errors: [errorMessage('aria-relevant')],
+    },
+    { code: '<div aria-relevant />', errors: [errorMessage('aria-relevant')] },
+    {
+      code: '<div aria-relevant={true} />',
+      errors: [errorMessage('aria-relevant')],
+    },
+    {
+      code: '<div aria-relevant={"false"} />',
+      errors: [errorMessage('aria-relevant')],
+    },
+    {
+      code: '<div aria-relevant="additions removalss" />',
+      errors: [errorMessage('aria-relevant')],
+    },
+    {
+      code: '<div aria-relevant="additions removalss " />',
+      errors: [errorMessage('aria-relevant')],
+    },
+  )).map(parserOptionsMapper),
+});

package/__tests__/src/rules/aria-role-test.js

@@ -0,0 +1,118 @@
+/**
+ * @fileoverview Enforce aria role attribute is valid.
+ * @author Ethan Cohen
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { roles } from 'aria-query';
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import parsers from '../../__util__/helpers/parsers';
+import rule from '../../../src/rules/aria-role';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const errorMessage = {
+  message: 'Elements with ARIA roles must use a valid, non-abstract ARIA role.',
+  type: 'JSXAttribute',
+};
+
+const roleKeys = roles.keys();
+
+const validRoles = roleKeys.filter((role) => roles.get(role).abstract === false);
+const invalidRoles = roleKeys.filter((role) => roles.get(role).abstract === true);
+
+const createTests = (roleNames) => roleNames.map((role) => ({
+  code: `<div role="${role.toLowerCase()}" />`,
+}));
+
+const validTests = createTests(validRoles);
+const invalidTests = createTests(invalidRoles).map((test) => {
+  const invalidTest = { ...test };
+  invalidTest.errors = [errorMessage];
+  return invalidTest;
+});
+
+const allowedInvalidRoles = [{
+  allowedInvalidRoles: ['invalid-role', 'other-invalid-role'],
+}];
+
+const ignoreNonDOMSchema = [{
+  ignoreNonDOM: true,
+}];
+
+const customDivSettings = {
+  'jsx-a11y': {
+    polymorphicPropName: 'asChild',
+    components: {
+      Div: 'div',
+    },
+  },
+};
+
+ruleTester.run('aria-role', rule, {
+  valid: parsers.all([].concat(
+    // Variables should pass, as we are only testing literals.
+    { code: '<div />' },
+    { code: '<div></div>' },
+    { code: '<div role={role} />' },
+    { code: '<div role={role || "button"} />' },
+    { code: '<div role={role || "foobar"} />' },
+    { code: '<div role="tabpanel row" />' },
+    { code: '<div role="switch" />' },
+    { code: '<div role="doc-abstract" />' },
+    { code: '<div role="doc-appendix doc-bibliography" />' },
+    { code: '<Bar baz />' },
+    { code: '<img role="invalid-role" />', options: allowedInvalidRoles },
+    { code: '<img role="invalid-role tabpanel" />', options: allowedInvalidRoles },
+    { code: '<img role="invalid-role other-invalid-role" />', options: allowedInvalidRoles },
+    { code: '<Foo role="bar" />', options: ignoreNonDOMSchema },
+    { code: '<fakeDOM role="bar" />', options: ignoreNonDOMSchema },
+    { code: '<img role="presentation" />', options: ignoreNonDOMSchema },
+    {
+      code: '<Div role="button" />',
+      settings: customDivSettings,
+    },
+    {
+      code: '<Box asChild="div" role="button" />',
+      settings: customDivSettings,
+    },
+    { code: '<svg role="graphics-document document" />' },
+    { code: '<svg role="img" />' },
+  )).concat(validTests).map(parserOptionsMapper),
+
+  invalid: parsers.all([].concat(
+    { code: '<div role="foobar" />', errors: [errorMessage] },
+    { code: '<div role="datepicker"></div>', errors: [errorMessage] },
+    { code: '<div role="range"></div>', errors: [errorMessage] },
+    { code: '<div role="Button"></div>', errors: [errorMessage] },
+    { code: '<div role=""></div>', errors: [errorMessage] },
+    { code: '<div role="tabpanel row foobar"></div>', errors: [errorMessage] },
+    { code: '<div role="tabpanel row range"></div>', errors: [errorMessage] },
+    { code: '<div role="doc-endnotes range"></div>', errors: [errorMessage] },
+    { code: '<div role />', errors: [errorMessage] },
+    { code: '<div role="unknown-invalid-role" />', errors: [errorMessage], options: allowedInvalidRoles },
+    { code: '<div role={null}></div>', errors: [errorMessage] },
+    { code: '<Foo role="datepicker" />', errors: [errorMessage] },
+    { code: '<Foo role="Button" />', errors: [errorMessage] },
+    { code: '<Div role="Button" />', errors: [errorMessage], settings: customDivSettings },
+    {
+      code: '<Div role="Button" />',
+      errors: [errorMessage],
+      options: ignoreNonDOMSchema,
+      settings: customDivSettings,
+    },
+    {
+      code: '<Box asChild="div" role="Button" />',
+      settings: customDivSettings,
+      errors: [errorMessage],
+    },
+  )).concat(invalidTests).map(parserOptionsMapper),
+});

package/__tests__/src/rules/aria-unsupported-elements-test.js

@@ -0,0 +1,75 @@
+/**
+ * @fileoverview Enforce that elements that do not support ARIA roles,
+ *  states and properties do not have those attributes.
+ * @author Ethan Cohen
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { dom } from 'aria-query';
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import parsers from '../../__util__/helpers/parsers';
+import rule from '../../../src/rules/aria-unsupported-elements';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const errorMessage = (invalidProp) => ({
+  message: `This element does not support ARIA roles, states and properties. \
+Try removing the prop '${invalidProp}'.`,
+  type: 'JSXOpeningElement',
+});
+
+const domElements = dom.keys();
+// Generate valid test cases
+const roleValidityTests = domElements.map((element) => {
+  const isReserved = dom.get(element).reserved || false;
+  const role = isReserved ? '' : 'role';
+
+  return {
+    code: `<${element} ${role} />`,
+  };
+});
+
+const ariaValidityTests = domElements.map((element) => {
+  const isReserved = dom.get(element).reserved || false;
+  const aria = isReserved ? '' : 'aria-hidden';
+
+  return {
+    code: `<${element} ${aria} />`,
+  };
+}).concat({
+  code: '<fake aria-hidden />',
+  errors: [errorMessage('aria-hidden')],
+});
+
+// Generate invalid test cases.
+const invalidRoleValidityTests = domElements
+  .filter((element) => dom.get(element).reserved)
+  .map((reservedElem) => ({
+    code: `<${reservedElem} role {...props} />`,
+    errors: [errorMessage('role')],
+  })).concat({
+    code: '<Meta aria-hidden />',
+    errors: [errorMessage('aria-hidden')],
+    settings: { 'jsx-a11y': { components: { Meta: 'meta' } } },
+  });
+
+const invalidAriaValidityTests = domElements
+  .filter((element) => dom.get(element).reserved)
+  .map((reservedElem) => ({
+    code: `<${reservedElem} aria-hidden aria-role="none" {...props} />`,
+    errors: [errorMessage('aria-hidden')],
+  }));
+
+ruleTester.run('aria-unsupported-elements', rule, {
+  valid: parsers.all([].concat(roleValidityTests, ariaValidityTests)).map(parserOptionsMapper),
+  invalid: parsers.all([].concat(invalidRoleValidityTests, invalidAriaValidityTests))
+    .map(parserOptionsMapper),
+});

package/__tests__/src/rules/autocomplete-valid-test.js

@@ -0,0 +1,77 @@
+/**
+ * @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 parsers from '../../__util__/helpers/parsers';
+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 componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Input: 'input',
+    },
+  },
+};
+
+ruleTester.run('autocomplete-valid', rule, {
+  valid: parsers.all([].concat(
+    // 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>;' },
+    { code: '<input type={isEmail ? "email" : "text"} autocomplete="none" />;' },
+    { code: '<Input type="text" autocomplete="name" />', settings: componentsSettings },
+    { code: '<Input type="text" autocomplete="baz" />' },
+
+    // PASSED "autocomplete-appropriate"
+    // see also: https://github.com/dequelabs/axe-core/issues/2912
+    { 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),
+  invalid: parsers.all([].concat(
+    // 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'] }] },
+    { code: '<Input type="text" autocomplete="baz" />', errors: invalidAutocomplete, settings: componentsSettings },
+  )).map(parserOptionsMapper),
+});