Reverse settings logic.

jsx-eslint · Mar 28, 2022 · 92b78f0 · 92b78f0
1 parent 936e871
commit 92b78f0
Show file tree

Hide file tree

Showing 33 changed files with 53 additions and 114 deletions.
diff --git a/README.md b/README.md
@@ -90,15 +90,17 @@ Add `plugin:jsx-a11y/recommended` or `plugin:jsx-a11y/strict` in `extends`:
 ```
 
 To enable your custom components to be checked as DOM elements, you can set global settings in your
-configuration file by mapping each DOM element type to your component names.
+configuration file by mapping each custom component name to a DOM element type.
 
 ```json
 {
-  "settins": {
+  "settings": {
     "jsx-a11y": {
       "components": {
-        "button": ["MyButton", "CustomButton", "RoundButton"],
-        "input": ["CityInput"]
+        "CityInput": "input",
+        "CustomButton": "button",
+        "MyButton": "button",
+        "RoundButton": "button"
       }
     }
   }

diff --git a/__tests__/src/rules/accessible-emoji-test.js b/__tests__/src/rules/accessible-emoji-test.js
@@ -40,7 +40,7 @@ ruleTester.run('accessible-emoji', rule, {
     { code: '<input type="hidden">🐼</input>' },
     {
       code: '<CustomInput type="hidden">🐼</CustomInput>',
-      settings: { 'jsx-a11y': { components: { input: ['CustomInput'] } } },
+      settings: { 'jsx-a11y': { components: { CustomInput: 'input' } } },
     },
   ].map(parserOptionsMapper),
   invalid: [

diff --git a/__tests__/src/rules/anchor-has-content-test.js b/__tests__/src/rules/anchor-has-content-test.js
@@ -34,7 +34,7 @@ ruleTester.run('anchor-has-content', rule, {
     { code: '<Link />' },
     {
       code: '<Link>foo</Link>',
-      settings: { 'jsx-a11y': { components: { a: ['Link'] } } },
+      settings: { 'jsx-a11y': { components: { Link: 'a' } } },
     },
   ].map(parserOptionsMapper),
   invalid: [
@@ -44,7 +44,7 @@ ruleTester.run('anchor-has-content', rule, {
     {
       code: '<Link />',
       errors: [expectedError],
-      settings: { 'jsx-a11y': { components: { a: ['Link'] } } },
+      settings: { 'jsx-a11y': { components: { Link: 'a' } } },
     },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/anchor-is-valid-test.js b/__tests__/src/rules/anchor-is-valid-test.js
@@ -81,7 +81,8 @@ const componentsAndSpecialLinkAndNoHrefAspect = [{
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      a: ['Anchor', 'Link'],
+      Anchor: 'a',
+      Link: 'a',
     },
   },
 };

diff --git a/__tests__/src/rules/aria-activedescendant-has-tabindex-test.js b/__tests__/src/rules/aria-activedescendant-has-tabindex-test.js
@@ -38,7 +38,7 @@ ruleTester.run('aria-activedescendant-has-tabindex', rule, {
     },
     {
       code: '<CustomComponent aria-activedescendant={someID} tabIndex={0} />;',
-      settings: { 'jsx-a11y': { components: { div: ['CustomComponent'] } } },
+      settings: { 'jsx-a11y': { components: { CustomComponent: 'div' } } },
     },
     {
       code: '<div />;',
@@ -88,7 +88,7 @@ ruleTester.run('aria-activedescendant-has-tabindex', rule, {
     {
       code: '<CustomComponent aria-activedescendant={someID} />;',
       errors: [expectedError],
-      settings: { 'jsx-a11y': { components: { div: ['CustomComponent'] } } },
+      settings: { 'jsx-a11y': { components: { CustomComponent: 'div' } } },
     },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/aria-role-test.js b/__tests__/src/rules/aria-role-test.js
@@ -50,7 +50,7 @@ const ignoreNonDOMSchema = [{
 const customDivSettings = {
   'jsx-a11y': {
     components: {
-      div: ['Div'],
+      Div: 'div',
     },
   },
 };

diff --git a/__tests__/src/rules/aria-unsupported-elements-test.js b/__tests__/src/rules/aria-unsupported-elements-test.js
@@ -57,7 +57,7 @@ const invalidRoleValidityTests = domElements
   })).concat({
     code: '<Meta aria-hidden />',
     errors: [errorMessage('aria-hidden')],
-    settings: { 'jsx-a11y': { components: { meta: ['Meta'] } } },
+    settings: { 'jsx-a11y': { components: { Meta: 'meta' } } },
   });
 
 const invalidAriaValidityTests = domElements

diff --git a/__tests__/src/rules/autocomplete-valid-test.js b/__tests__/src/rules/autocomplete-valid-test.js
@@ -31,7 +31,7 @@ const inappropriateAutocomplete = [{
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      input: ['Input'],
+      Input: 'input',
     },
   },
 };

diff --git a/__tests__/src/rules/click-events-have-key-events-test.js b/__tests__/src/rules/click-events-have-key-events-test.js
@@ -71,6 +71,6 @@ ruleTester.run('click-events-have-key-events', rule, {
     },
     { code: '<a onClick={() => void 0} />', errors: [expectedError] },
     { code: '<a tabIndex="0" onClick={() => void 0} />', errors: [expectedError] },
-    { code: '<Footer onClick={doFoo} />', errors: [expectedError], settings: { 'jsx-a11y': { components: { footer: ['Footer'] } } } },
+    { code: '<Footer onClick={doFoo} />', errors: [expectedError], settings: { 'jsx-a11y': { components: { Footer: 'footer' } } } },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/control-has-associated-label-test.js b/__tests__/src/rules/control-has-associated-label-test.js
@@ -30,7 +30,7 @@ const alwaysValid = [
   // Custom Control Components
   { code: '<CustomControl><span><span>Save</span></span></CustomControl>', options: [{ depth: 3, controlComponents: ['CustomControl'] }] },
   { code: '<CustomControl><span><span label="Save"></span></span></CustomControl>', options: [{ depth: 3, controlComponents: ['CustomControl'], labelAttributes: ['label'] }] },
-  { code: '<CustomControl>Save</CustomControl>', settings: { 'jsx-a11y': { components: { button: ['CustomControl'] } } } },
+  { code: '<CustomControl>Save</CustomControl>', settings: { 'jsx-a11y': { components: { CustomControl: 'button' } } } },
   // Interactive Elements
   { code: '<button>Save</button>' },
   { code: '<button><span>Save</span></button>' },
@@ -256,7 +256,7 @@ const neverValid = [
   { code: '<button><span title="This is not a real label" /></button>', errors: [expectedError] },
   { code: '<button><span><span><span>Save</span></span></span></button>', options: [{ depth: 3 }], errors: [expectedError] },
   { code: '<CustomControl><span><span></span></span></CustomControl>', options: [{ depth: 3, controlComponents: ['CustomControl'] }], errors: [expectedError] },
-  { code: '<CustomControl></CustomControl>', errors: [expectedError], settings: { 'jsx-a11y': { components: { button: ['CustomControl'] } } } },
+  { code: '<CustomControl></CustomControl>', errors: [expectedError], settings: { 'jsx-a11y': { components: { CustomControl: 'button' } } } },
   { code: '<a href="#" />', errors: [expectedError] },
   { code: '<area href="#" />', errors: [expectedError] },
   { code: '<menuitem />', errors: [expectedError] },

diff --git a/__tests__/src/rules/heading-has-content-test.js b/__tests__/src/rules/heading-has-content-test.js
@@ -29,8 +29,8 @@ const components = [{
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      h2: ['Heading'],
-      h1: ['Title'],
+      Heading: 'h2',
+      Title: 'h1',
     },
   },
 };

diff --git a/__tests__/src/rules/html-has-lang-test.js b/__tests__/src/rules/html-has-lang-test.js
@@ -30,12 +30,12 @@ ruleTester.run('html-has-lang', rule, {
     { code: '<html lang={foo} />' },
     { code: '<html lang />' },
     { code: '<HTML />' },
-    { code: '<HTMLTop lang="en" />', errors: [expectedError], settings: { 'jsx-a11y': { components: { html: ['HTMLTop'] } } } },
+    { code: '<HTMLTop lang="en" />', errors: [expectedError], settings: { 'jsx-a11y': { components: { HTMLTop: 'html' } } } },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<html />', errors: [expectedError] },
     { code: '<html {...props} />', errors: [expectedError] },
     { code: '<html lang={undefined} />', errors: [expectedError] },
-    { code: '<HTMLTop />', errors: [expectedError], settings: { 'jsx-a11y': { components: { html: ['HTMLTop'] } } } },
+    { code: '<HTMLTop />', errors: [expectedError], settings: { 'jsx-a11y': { components: { HTMLTop: 'html' } } } },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/iframe-has-title-test.js b/__tests__/src/rules/iframe-has-title-test.js
@@ -25,7 +25,7 @@ const expectedError = {
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      iframe: ['FooComponent'],
+      FooComponent: 'iframe',
     },
   },
 };

diff --git a/__tests__/src/rules/img-redundant-alt-test.js b/__tests__/src/rules/img-redundant-alt-test.js
@@ -25,7 +25,7 @@ const array = [{
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      img: ['Image'],
+      Image: 'img',
     },
   },
 };

diff --git a/__tests__/src/rules/interactive-supports-focus-test.js b/__tests__/src/rules/interactive-supports-focus-test.js
@@ -41,7 +41,7 @@ const focusableTemplate = template`Elements with the '${0}' interactive role mus
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      div: ['Div'],
+      Div: 'div',
     },
   },
 };

diff --git a/__tests__/src/rules/label-has-associated-control-test.js b/__tests__/src/rules/label-has-associated-control-test.js
@@ -28,8 +28,8 @@ const expectedError = {
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      input: ['CustomInput'],
-      label: ['CustomLabel'],
+      CustomInput: 'input',
+      CustomLabel: 'label',
     },
   },
 };

diff --git a/__tests__/src/rules/lang-test.js b/__tests__/src/rules/lang-test.js
@@ -25,7 +25,7 @@ const expectedError = {
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      html: ['Foo'],
+      Foo: 'html',
     },
   },
 };

diff --git a/__tests__/src/rules/media-has-caption-test.js b/__tests__/src/rules/media-has-caption-test.js
@@ -33,9 +33,9 @@ const customSchema = [
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      audio: ['Audio'],
-      video: ['Video'],
-      track: ['Track'],
+      Audio: 'audio',
+      Video: 'video',
+      Track: 'track',
     },
   },
 };

diff --git a/__tests__/src/rules/no-autofocus-test.js b/__tests__/src/rules/no-autofocus-test.js
@@ -31,7 +31,7 @@ const ignoreNonDOMSchema = [
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      button: ['Button'],
+      Button: 'button',
     },
   },
 };

diff --git a/__tests__/src/rules/no-distracting-elements-test.js b/__tests__/src/rules/no-distracting-elements-test.js
@@ -25,7 +25,7 @@ const expectedError = (element) => ({
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      blink: ['Blink'],
+      Blink: 'blink',
     },
   },
 };

diff --git a/__tests__/src/rules/no-interactive-element-to-noninteractive-role-test.js b/__tests__/src/rules/no-interactive-element-to-noninteractive-role-test.js
@@ -31,8 +31,8 @@ const ruleName = 'jsx-a11y/no-interactive-element-to-noninteractive-role';
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      a: ['Link'],
-      button: ['Button'],
+      Button: 'button',
+      Link: 'a',
     },
   },
 };

diff --git a/__tests__/src/rules/no-noninteractive-element-interactions-test.js b/__tests__/src/rules/no-noninteractive-element-interactions-test.js
@@ -34,7 +34,7 @@ const alwaysValid = [
   { code: '<Image onClick={() => void 0} />;' },
   {
     code: '<Button onClick={() => void 0} />;',
-    settings: { 'jsx-a11y': { components: { button: ['Button'] } } },
+    settings: { 'jsx-a11y': { components: { Button: 'button' } } },
   },
   /* All flavors of input */
   { code: '<input onClick={() => void 0} />' },
@@ -364,7 +364,7 @@ const neverValid = [
   {
     code: '<Image onClick={() => void 0} />;',
     errors: [expectedError],
-    settings: { 'jsx-a11y': { components: { img: ['Image'] } } },
+    settings: { 'jsx-a11y': { components: { Image: 'img' } } },
   },
 ];
 

diff --git a/__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js b/__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js
@@ -33,8 +33,8 @@ const ruleName = 'jsx-a11y/no-noninteractive-element-to-interactive-role';
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      article: ['Article'],
-      input: ['Input'],
+      Article: 'article',
+      Input: 'input',
     },
   },
 };

diff --git a/__tests__/src/rules/no-noninteractive-tabindex-test.js b/__tests__/src/rules/no-noninteractive-tabindex-test.js
@@ -29,8 +29,8 @@ const expectedError = {
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      article: ['Article'],
-      button: ['MyButton'],
+      Article: 'article',
+      MyButton: 'button',
     },
   },
 };

diff --git a/__tests__/src/rules/no-onchange-test.js b/__tests__/src/rules/no-onchange-test.js
@@ -25,8 +25,8 @@ const expectedError = {
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      input: ['Input'],
-      option: ['CustomOption'],
+      CustomOption: 'option',
+      Input: 'input',
     },
   },
 };

diff --git a/__tests__/src/rules/no-redundant-roles-test.js b/__tests__/src/rules/no-redundant-roles-test.js
@@ -29,7 +29,7 @@ const ruleName = 'jsx-a11y/no-redundant-roles';
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      button: ['Button'],
+      Button: 'button',
     },
   },
 };

diff --git a/__tests__/src/rules/no-static-element-interactions-test.js b/__tests__/src/rules/no-static-element-interactions-test.js
@@ -31,8 +31,8 @@ const ruleName = 'no-static-element-interactions';
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      button: ['Button'],
-      div: ['TestComponent'],
+      Button: 'button',
+      TestComponent: 'div',
     },
   },
 };

diff --git a/__tests__/src/rules/role-has-required-aria-props-test.js b/__tests__/src/rules/role-has-required-aria-props-test.js
@@ -31,7 +31,7 @@ const errorMessage = (role) => {
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      div: ['MyComponent'],
+      MyComponent: 'div',
     },
   },
 };

diff --git a/__tests__/src/rules/scope-test.js b/__tests__/src/rules/scope-test.js
@@ -25,8 +25,8 @@ const expectedError = {
 const componentsSettings = {
   'jsx-a11y': {
     components: {
-      div: ['Foo'],
-      th: ['TableHeader'],
+      Foo: 'div',
+      TableHeader: 'th',
     },
   },
 };

diff --git a/__tests__/src/util/getElementType-test.js b/__tests__/src/util/getElementType-test.js
@@ -20,7 +20,7 @@ describe('getElementType', () => {
       settings: {
         'jsx-a11y': {
           components: {
-            input: ['CustomInput'],
+            CustomInput: 'input',
           },
         },
       },
@@ -38,47 +38,4 @@ describe('getElementType', () => {
       expect(elementType(JSXElementMock('CityInput').openingElement)).toBe('CityInput');
     });
   });
-
-  it('should fail if a component is included several times', () => {
-    expect(() => {
-      getElementType({
-        settings: {
-          'jsx-a11y': {
-            components: {
-              input: ['CustomInput'],
-              button: ['CustomInput'],
-            },
-          },
-        },
-      });
-    }).toThrow("CustomInput was specified twice in jsx-a11y's settings.");
-  });
-
-  it('should fail when the config is using only a string instead of an array of strings', () => {
-    expect(() => {
-      getElementType({
-        settings: {
-          'jsx-a11y': {
-            components: {
-              input: 'CustomInput',
-            },
-          },
-        },
-      });
-    }).toThrow("jsx-a11y's setting for input must be an array of strings.");
-  });
-
-  it('should fail when the config is using an array that contains other things than strings', () => {
-    expect(() => {
-      getElementType({
-        settings: {
-          'jsx-a11y': {
-            components: {
-              input: ['CustomInput', 3, 'Input'],
-            },
-          },
-        },
-      });
-    }).toThrow("jsx-a11y's setting for input must be an array of strings.");
-  });
 });