diff --git a/README.md b/README.md index 70e8b49ab..283f0d397 100644 --- a/README.md +++ b/README.md @@ -104,6 +104,9 @@ Add `plugin:jsx-a11y/recommended` or `plugin:jsx-a11y/strict` in `extends`: "CustomButton": "button", "MyButton": "button", "RoundButton": "button" + }, + "attributes": { + "for": ["htmlFor", "for"] } } } @@ -202,6 +205,11 @@ module.exports = [ To enable your custom components to be checked as DOM elements, you can set global settings in your configuration file by mapping each custom component name to a DOM element type. +#### Attribute Mapping + +To configure the JSX property to use for attribute checking, you can set global settings in your configuration file by mapping each DOM attribute to the JSX property you want to check. +For example, you may want to allow the `for` attribute in addition to the `htmlFor` attribute for checking label associations. + #### Polymorphic Components You can optionally use the `polymorphicPropName` setting to define the prop your code uses to create polymorphic components. diff --git a/__tests__/src/rules/label-has-associated-control-test.js b/__tests__/src/rules/label-has-associated-control-test.js index c765d9713..6db067394 100644 --- a/__tests__/src/rules/label-has-associated-control-test.js +++ b/__tests__/src/rules/label-has-associated-control-test.js @@ -40,11 +40,23 @@ const componentsSettings = { }, }; +const attributesSettings = { + 'jsx-a11y': { + attributes: { + for: ['htmlFor', 'for'], + }, + }, +}; + const htmlForValid = [ { code: '', options: [{ depth: 4 }] }, { code: '