Just keep the global setting.

Author: edoardocavazza

__tests__/src/rules/label-has-associated-control-test.js

@@ -35,15 +35,23 @@ const componentsSettings = {
   },
 };
 
+const attributesSettings = {
+  'jsx-a11y': {
+    attributes: {
+      for: ['htmlFor', 'for'],
+    },
+  },
+};
+
 const htmlForValid = [
   { code: '<label htmlFor="js_id"><span><span><span>A label</span></span></span></label>', options: [{ depth: 4 }] },
   { code: '<label htmlFor="js_id" aria-label="A label" />' },
   { code: '<label htmlFor="js_id" aria-labelledby="A label" />' },
   { code: '<div><label htmlFor="js_id">A label</label><input id="js_id" /></div>' },
-  { code: '<label for="js_id"><span><span><span>A label</span></span></span></label>', options: [{ depth: 4, htmlForAttributes: ['htmlFor', 'for'] }] },
-  { code: '<label for="js_id" aria-label="A label" />', options: [{ htmlForAttributes: ['htmlFor', 'for'] }] },
-  { code: '<label for="js_id" aria-labelledby="A label" />', options: [{ htmlForAttributes: ['htmlFor', 'for'] }] },
-  { code: '<div><label for="js_id">A label</label><input id="js_id" /></div>', options: [{ htmlForAttributes: ['htmlFor', 'for'] }] },
+  { code: '<label for="js_id"><span><span><span>A label</span></span></span></label>', options: [{ depth: 4 }], settings: attributesSettings },
+  { code: '<label for="js_id" aria-label="A label" />', settings: attributesSettings },
+  { code: '<label for="js_id" aria-labelledby="A label" />', settings: attributesSettings },
+  { code: '<div><label for="js_id">A label</label><input id="js_id" /></div>', settings: attributesSettings },
   // Custom label component.
   { code: '<CustomLabel htmlFor="js_id" aria-label="A label" />', options: [{ labelComponents: ['CustomLabel'] }] },
   { code: '<CustomLabel htmlFor="js_id" label="A label" />', options: [{ labelAttributes: ['label'], labelComponents: ['CustomLabel'] }] },

__tests__/src/rules/label-has-for-test.js

@@ -50,20 +50,28 @@ const optionsChildrenAllowed = [{
   allowChildren: true,
 }];
 
+const attributesSettings = {
+  'jsx-a11y': {
+    attributes: {
+      for: ['htmlFor', 'for'],
+    },
+  },
+};
+
 ruleTester.run('label-has-for', rule, {
   valid: parsers.all([].concat(
     // DEFAULT ELEMENT 'label' TESTS
     { code: '<div />' },
     { code: '<label htmlFor="foo"><input /></label>' },
     { code: '<label htmlFor="foo"><textarea /></label>' },
-    { code: '<label for="foo"><input /></label>', options: [{ htmlForAttributes: ['htmlFor', 'for'] }] },
-    { code: '<label for="foo"><textarea /></label>', options: [{ htmlForAttributes: ['htmlFor', 'for'] }] },
+    { code: '<label for="foo"><input /></label>', settings: attributesSettings },
+    { code: '<label for="foo"><textarea /></label>', settings: attributesSettings },
     { code: '<Label />' }, // lower-case convention refers to real HTML elements.
     { code: '<Label htmlFor="foo" />' },
-    { code: '<Label for="foo" />', options: [{ htmlForAttributes: ['htmlFor', 'for'] }] },
+    { code: '<Label for="foo" />', settings: attributesSettings },
     { code: '<Descriptor />' },
     { code: '<Descriptor htmlFor="foo">Test!</Descriptor>' },
-    { code: '<Descriptor for="foo">Test!</Descriptor>', options: [{ htmlForAttributes: ['htmlFor', 'for'] }] },
+    { code: '<Descriptor for="foo">Test!</Descriptor>', settings: attributesSettings },
     { code: '<UX.Layout>test</UX.Layout>' },
 
     // CUSTOM ELEMENT ARRAY OPTION TESTS

docs/rules/label-has-associated-control.md

@@ -53,7 +53,6 @@ And the configuration:
 {
   "rules": {
     "jsx-a11y/label-has-associated-control": [ 2, {
-      "htmlForAttributes": ["htmlFor", "for"],
       "labelComponents": ["CustomInputLabel"],
       "labelAttributes": ["label"],
       "controlComponents": ["CustomInput"],
@@ -104,7 +103,6 @@ This rule takes one optional object argument of type object:
 }
 ```
 
-`htmlForAttributes`: is an array of strings that specify the attribute to check for an associated control. Default is `["htmlFor"]`.
 `labelComponents` is a list of custom React Component names that should be checked for an associated control.
 `labelAttributes` is a list of attributes to check on the label component and its children for a label. Use this if you have a custom component that uses a string passed on a prop to render an HTML `label`, for example.
 `controlComponents` is a list of custom React Components names that will output an input element. [Glob format](https://linuxhint.com/bash_globbing_tutorial/) is also supported for specifying names (e.g., `Label*` matches `LabelComponent` but not `CustomLabel`, `????Label` matches `LinkLabel` but not `CustomLabel`).

docs/rules/label-has-for.md

@@ -25,7 +25,6 @@ This rule takes one optional object argument of type object:
 {
     "rules": {
         "jsx-a11y/label-has-for": [ 2, {
-            "htmlForAttributes": ["htmlFor", "for"],
             "components": [ "Label" ],
             "required": {
                 "every": [ "nesting", "id" ]
@@ -36,8 +35,6 @@ This rule takes one optional object argument of type object:
 }
 ```
 
-The `htmlForAttributes` allows you to specify which prop to check for. This is useful when you want to use a different property instead of `htmlFor`, for example `for`.
-
 For the `components` option, these strings determine which JSX elements (**always including** `<label>`) should be checked for having `htmlFor` prop. This is a good use case when you have a wrapper component that simply renders a `label` element (like in React):
 
 ```js

src/rules/label-has-associated-control.js

@@ -20,7 +20,6 @@ import mayHaveAccessibleLabel from '../util/mayHaveAccessibleLabel';
 const errorMessage = 'A form label must be associated with a control.';
 
 const schema = generateObjSchema({
-  htmlForAttributes: arraySchema,
   labelComponents: arraySchema,
   labelAttributes: arraySchema,
   controlComponents: arraySchema,
@@ -62,7 +61,7 @@ export default ({
   create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
     const { settings } = context;
     const options = context.options[0] || {};
-    const htmlForAttributes = options.htmlForAttributes ?? settings['jsx-a11y']?.attributes?.for ?? ['htmlFor'];
+    const htmlForAttributes = settings['jsx-a11y']?.attributes?.for ?? ['htmlFor'];
     const labelComponents = options.labelComponents || [];
     const assertType = options.assert || 'either';
     const componentNames = ['label'].concat(labelComponents);

src/rules/label-has-for.js

@@ -16,7 +16,6 @@ const enumValues = ['nesting', 'id'];
 const schema = {
   type: 'object',
   properties: {
-    htmlForAttributes: arraySchema,
     components: arraySchema,
     required: {
       oneOf: [
@@ -110,7 +109,7 @@ export default {
       JSXOpeningElement: (node) => {
         const { settings } = context;
         const options = context.options[0] || {};
-        const htmlForAttributes = options.htmlForAttributes ?? settings['jsx-a11y']?.attributes?.for ?? ['htmlFor'];
+        const htmlForAttributes = settings['jsx-a11y']?.attributes?.for ?? ['htmlFor'];
         const componentOptions = options.components || [];
         const typesToValidate = ['label'].concat(componentOptions);
         const nodeType = elementType(node);