Skip to content

Commit

Permalink
Just keep the global setting.
Browse files Browse the repository at this point in the history
  • Loading branch information
edoardocavazza committed Apr 16, 2024
1 parent 2031c01 commit ef13138
Show file tree
Hide file tree
Showing 6 changed files with 26 additions and 17 deletions.
16 changes: 12 additions & 4 deletions __tests__/src/rules/label-has-associated-control-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'] }] },
Expand Down
16 changes: 12 additions & 4 deletions __tests__/src/rules/label-has-for-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 0 additions & 2 deletions docs/rules/label-has-associated-control.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ And the configuration:
{
"rules": {
"jsx-a11y/label-has-associated-control": [ 2, {
"htmlForAttributes": ["htmlFor", "for"],
"labelComponents": ["CustomInputLabel"],
"labelAttributes": ["label"],
"controlComponents": ["CustomInput"],
Expand Down Expand Up @@ -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`).
Expand Down
3 changes: 0 additions & 3 deletions docs/rules/label-has-for.md
Original file line number Diff line number Diff line change
Expand Up @@ -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" ]
Expand All @@ -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
Expand Down
3 changes: 1 addition & 2 deletions src/rules/label-has-associated-control.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand Down
3 changes: 1 addition & 2 deletions src/rules/label-has-for.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const enumValues = ['nesting', 'id'];
const schema = {
type: 'object',
properties: {
htmlForAttributes: arraySchema,
components: arraySchema,
required: {
oneOf: [
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit ef13138

Please sign in to comment.