chore: replace ignoreNonDOM with inputComponents

Author: WilcoFiers

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

@@ -29,10 +29,6 @@ const inappropriateAutocomplete = [{
   type: 'JSXOpeningElement',
 }];
 
-const ignoreNonDOMSchema = [{
-  ignoreNonDOM: true,
-}];
-
 ruleTester.run('autocomplete-valid', rule, {
   valid: [
     // INAPPLICABLE
@@ -49,20 +45,20 @@ ruleTester.run('autocomplete-valid', rule, {
     { 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 },
+    { 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 },
+    { 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 },
+    { code: '<Foo type="month" autocomplete="tel"></Foo>;', errors: inappropriateAutocomplete, options: [{ inputComponents: ['Foo'] }] },
   ].map(parserOptionsMapper),
 });

docs/rules/autocomplete-valid.md

@@ -14,7 +14,7 @@ This rule takes one optional object argument of type object:
 {
     "rules": {
         "jsx-a11y/autocomplete-valid": [ 2, {
-            "ignoreNonDOM": true
+            "inputComponents": ["Input", "FormField"]
         }],
     }
 }
@@ -25,7 +25,7 @@ This rule takes one optional object argument of type object:
 <!-- Good: the autocomplete attribute is used according to the HTML specification -->
 <input type="text" autocomplete="name" />
 
-<!-- Good: ignoreNonDOM is set to true -->
+<!-- Good: MyInput is not listed in inputComponents -->
 <MyInput autocomplete="incorrect" /> 
 ```
 
@@ -37,6 +37,6 @@ This rule takes one optional object argument of type object:
 <!-- Bad: the autocomplete attribute is on an inappropriate input element -->
 <input type="email" autocomplete="url" />
 
-<!-- Bad: ignoreNonDOM is undefined or set to false -->
+<!-- Bad: MyInput is listed in inputComponents -->
 <MyInput autocomplete="incorrect" /> 
 ```

src/rules/autocomplete-valid.js

@@ -6,16 +6,12 @@
 // ----------------------------------------------------------------------------
 // Rule Definition
 // ----------------------------------------------------------------------------
-import { dom } from 'aria-query';
 import { runVirtualRule } from 'axe-core';
 import { elementType, getLiteralPropValue, getProp } from 'jsx-ast-utils';
-import { generateObjSchema } from '../util/schemas';
+import { generateObjSchema, arraySchema } from '../util/schemas';
 
 const schema = generateObjSchema({
-  ignoreNonDOM: {
-    type: 'boolean',
-    default: false,
-  },
+  inputComponents: arraySchema,
 });
 
 module.exports = {
@@ -29,16 +25,13 @@ module.exports = {
   create: context => ({
     JSXOpeningElement: (node) => {
       const options = context.options[0] || {};
-      const ignoreNonDOM = !!options.ignoreNonDOM;
+      const { inputComponents = [] } = options;
+      const inputTypes = ['input', ...inputComponents];
 
-      const autocomplete = getLiteralPropValue(getProp(node.attributes, 'autocomplete'));
       const elType = elementType(node);
-      const isNativeDOMNode = !!dom.get(elType);
+      const autocomplete = getLiteralPropValue(getProp(node.attributes, 'autocomplete'));
 
-      if (typeof autocomplete !== 'string'
-        || (isNativeDOMNode && elType !== 'input')
-        || (!isNativeDOMNode && ignoreNonDOM)
-      ) {
+      if (typeof autocomplete !== 'string' || !inputTypes.includes(elType)) {
         return;
       }