diff --git a/README.md b/README.md
index 02f1ed5c0..19f6bddc9 100644
--- a/README.md
+++ b/README.md
@@ -157,7 +157,7 @@ will be evaluated as an `h3`. If no `polymorphicPropName` is set, then the compo
| [img-redundant-alt](docs/rules/img-redundant-alt.md) | Enforce ` ` alt prop does not contain the word "image", "picture", or "photo". | ☑️ 🔒 | | |
| [interactive-supports-focus](docs/rules/interactive-supports-focus.md) | Enforce that elements with interactive handlers like `onClick` must be focusable. | ☑️ 🔒 | | |
| [label-has-associated-control](docs/rules/label-has-associated-control.md) | Enforce that a `label` tag has a text label and an associated control. | ☑️ 🔒 | | |
-| [label-has-for](docs/rules/label-has-for.md) | Enforce that `` elements have the `htmlFor` prop. | | ☑️ 🔒 | ❌ |
+| [label-has-for](docs/rules/label-has-for.md) | Enforce that `` elements have the `htmlFor` (or `for`) prop. | | ☑️ 🔒 | ❌ |
| [lang](docs/rules/lang.md) | Enforce lang attribute has a valid value. | | | |
| [media-has-caption](docs/rules/media-has-caption.md) | Enforces that `` and `` elements must have a `` for captions. | ☑️ 🔒 | | |
| [mouse-events-have-key-events](docs/rules/mouse-events-have-key-events.md) | Enforce that `onMouseOver`/`onMouseOut` are accompanied by `onFocus`/`onBlur` for keyboard-only users. | ☑️ 🔒 | | |
diff --git a/__tests__/src/rules/label-has-associated-control-test.js b/__tests__/src/rules/label-has-associated-control-test.js
index d0b4c3b31..faae51e6d 100644
--- a/__tests__/src/rules/label-has-associated-control-test.js
+++ b/__tests__/src/rules/label-has-associated-control-test.js
@@ -40,6 +40,10 @@ const htmlForValid = [
{ code: ' ' },
{ code: ' ' },
{ code: 'A label
' },
+ { code: 'A label ', options: [{ depth: 4 }] },
+ { code: ' ' },
+ { code: ' ' },
+ { code: 'A label
' },
// Custom label component.
{ code: ' ', options: [{ labelComponents: ['CustomLabel'] }] },
{ code: ' ', options: [{ labelAttributes: ['label'], labelComponents: ['CustomLabel'] }] },
diff --git a/__tests__/src/rules/label-has-for-test.js b/__tests__/src/rules/label-has-for-test.js
index 9b4bd1478..c8d2dbf72 100644
--- a/__tests__/src/rules/label-has-for-test.js
+++ b/__tests__/src/rules/label-has-for-test.js
@@ -56,10 +56,14 @@ ruleTester.run('label-has-for', rule, {
{ code: '
' },
{ code: ' ' },
{ code: ' ' },
+ { code: ' ' },
+ { code: ' ' },
{ code: ' ' }, // lower-case convention refers to real HTML elements.
{ code: ' ' },
+ { code: ' ' },
{ code: ' ' },
{ code: 'Test! ' },
+ { code: 'Test! ' },
{ code: 'test ' },
// CUSTOM ELEMENT ARRAY OPTION TESTS
diff --git a/docs/rules/label-has-associated-control.md b/docs/rules/label-has-associated-control.md
index 5a3efa48d..297683ee5 100644
--- a/docs/rules/label-has-associated-control.md
+++ b/docs/rules/label-has-associated-control.md
@@ -9,9 +9,9 @@ Enforce that a label tag has a text label and an associated control.
There are two supported ways to associate a label with a control:
- Wrapping a control in a label tag.
-- Adding `htmlFor` to a label and assigning it a DOM ID string that indicates an input on the page.
+- Adding `htmlFor` (or `for`) to a label and assigning it a DOM ID string that indicates an input on the page.
-This rule checks that any `label` tag (or an indicated custom component that will output a `label` tag) either (1) wraps an `input` element (or an indicated custom component that will output an `input` tag) or (2) has an `htmlFor` attribute and that the `label` tag has text content.
+This rule checks that any `label` tag (or an indicated custom component that will output a `label` tag) either (1) wraps an `input` element (or an indicated custom component that will output an `input` tag) or (2) has an `htmlFor` (or `for`) attribute and that the `label` tag has text content.
## How do I resolve this error?
diff --git a/docs/rules/label-has-for.md b/docs/rules/label-has-for.md
index 71730c998..f35536ed5 100644
--- a/docs/rules/label-has-for.md
+++ b/docs/rules/label-has-for.md
@@ -13,7 +13,7 @@ Enforce label tags have associated control.
There are two supported ways to associate a label with a control:
- nesting: by wrapping a control in a label tag
-- id: by using the prop `htmlFor` as in `htmlFor=[ID of control]`
+- id: by using the prop `htmlFor` (or `for`) as in `htmlFor=[ID of control]`
To fully cover 100% of assistive devices, you're encouraged to validate for both nesting and id.
@@ -35,7 +35,7 @@ This rule takes one optional object argument of type object:
}
```
-For the `components` option, these strings determine which JSX elements (**always including** ``) 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):
+For the `components` option, these strings determine which JSX elements (**always including** ``) should be checked for having `htmlFor` (or `for`) prop. This is a good use case when you have a wrapper component that simply renders a `label` element (like in React):
```js
// Label.js
diff --git a/src/rules/label-has-associated-control.js b/src/rules/label-has-associated-control.js
index 7ee98ef65..ea611313c 100644
--- a/src/rules/label-has-associated-control.js
+++ b/src/rules/label-has-associated-control.js
@@ -36,7 +36,7 @@ const schema = generateObjSchema({
});
const validateId = (node) => {
- const htmlForAttr = getProp(node.attributes, 'htmlFor');
+ const htmlForAttr = getProp(node.attributes, 'for') || getProp(node.attributes, 'htmlFor');
const htmlForValue = getPropValue(htmlForAttr);
return htmlForAttr !== false && !!htmlForValue;
diff --git a/src/rules/label-has-for.js b/src/rules/label-has-for.js
index dd7ff0627..2fee0e659 100644
--- a/src/rules/label-has-for.js
+++ b/src/rules/label-has-for.js
@@ -46,7 +46,7 @@ function validateNesting(node) {
}
const validateId = (node) => {
- const htmlForAttr = getProp(node.attributes, 'htmlFor');
+ const htmlForAttr = getProp(node.attributes, 'for') || getProp(node.attributes, 'htmlFor');
const htmlForValue = getPropValue(htmlForAttr);
return htmlForAttr !== false && !!htmlForValue;
@@ -90,7 +90,7 @@ export default {
deprecated: true,
replacedBy: ['label-has-associated-control'],
docs: {
- description: 'Enforce that `` elements have the `htmlFor` prop.',
+ description: 'Enforce that `` elements have the `htmlFor` (or `for`) prop.',
url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/label-has-for.md',
},
schema: [schema],