@arcaauth/eslint-plugin-jsx-a11y 6.10.2

package/__tests__/src/rules/img-redundant-alt-test.js

@@ -0,0 +1,137 @@
+/**
+ * @fileoverview Enforce img alt attribute does not have the word image, picture, or photo.
+ * @author Ethan Cohen
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import semver from 'semver';
+import { version as eslintVersion } from 'eslint/package.json';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import parsers from '../../__util__/helpers/parsers';
+import rule from '../../../src/rules/img-redundant-alt';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const array = [{
+  components: ['Image'],
+  words: ['Word1', 'Word2'],
+}];
+
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Image: 'img',
+    },
+  },
+};
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: 'Redundant alt attribute. Screen-readers already announce `img` tags as an image. You don’t need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the alt prop.',
+  type: 'JSXOpeningElement',
+};
+
+ruleTester.run('img-redundant-alt', rule, {
+  valid: parsers.all([].concat(
+    { code: '<img alt="foo" />;' },
+    { code: '<img alt="picture of me taking a photo of an image" aria-hidden />' },
+    { code: '<img aria-hidden alt="photo of image" />' },
+    { code: '<img ALt="foo" />;' },
+    { code: '<img {...this.props} alt="foo" />' },
+    { code: '<img {...this.props} alt={"foo"} />' },
+    { code: '<img {...this.props} alt={alt} />' },
+    { code: '<a />' },
+    { code: '<img />' },
+    { code: '<IMG />' },
+    { code: '<img alt={undefined} />' },
+    { code: '<img alt={`this should pass for ${now}`} />' },
+    { code: '<img alt={`this should pass for ${photo}`} />' },
+    { code: '<img alt={`this should pass for ${image}`} />' },
+    { code: '<img alt={`this should pass for ${picture}`} />' },
+    { code: '<img alt={`${photo}`} />' },
+    { code: '<img alt={`${image}`} />' },
+    { code: '<img alt={`${picture}`} />' },
+    { code: '<img alt={"undefined"} />' },
+    { code: '<img alt={() => {}} />' },
+    { code: '<img alt={function(e){}} />' },
+    { code: '<img aria-hidden={false} alt="Doing cool things." />' },
+    { code: '<UX.Layout>test</UX.Layout>' },
+    { code: '<img alt />' },
+    { code: '<img alt={imageAlt} />' },
+    { code: '<img alt={imageAlt.name} />' },
+    semver.satisfies(eslintVersion, '>= 6') ? [
+      { code: '<img alt={imageAlt?.name} />', languageOptions: { ecmaVersion: 2020 } },
+      { code: '<img alt="Doing cool things" aria-hidden={foo?.bar}/>', languageOptions: { ecmaVersion: 2020 } },
+    ] : [],
+    { code: '<img alt="Photography" />;' },
+    { code: '<img alt="ImageMagick" />;' },
+    { code: '<Image alt="Photo of a friend" />' },
+    { code: '<Image alt="Foo" />', settings: componentsSettings },
+    { code: '<img alt="画像" />', options: [{ words: ['イメージ'] }] },
+  )).map(parserOptionsMapper),
+  invalid: parsers.all([].concat(
+    { code: '<img alt="Photo of friend." />;', errors: [expectedError] },
+    { code: '<img alt="Picture of friend." />;', errors: [expectedError] },
+    { code: '<img alt="Image of friend." />;', errors: [expectedError] },
+    { code: '<img alt="PhOtO of friend." />;', errors: [expectedError] },
+    { code: '<img alt={"photo"} />;', errors: [expectedError] },
+    { code: '<img alt="piCTUre of friend." />;', errors: [expectedError] },
+    { code: '<img alt="imAGE of friend." />;', errors: [expectedError] },
+    {
+      code: '<img alt="photo of cool person" aria-hidden={false} />',
+      errors: [expectedError],
+    },
+    {
+      code: '<img alt="picture of cool person" aria-hidden={false} />',
+      errors: [expectedError],
+    },
+    {
+      code: '<img alt="image of cool person" aria-hidden={false} />',
+      errors: [expectedError],
+    },
+    { code: '<img alt="photo" {...this.props} />', errors: [expectedError] },
+    { code: '<img alt="image" {...this.props} />', errors: [expectedError] },
+    { code: '<img alt="picture" {...this.props} />', errors: [expectedError] },
+    {
+      code: '<img alt={`picture doing ${things}`} {...this.props} />',
+      errors: [expectedError],
+    },
+    {
+      code: '<img alt={`photo doing ${things}`} {...this.props} />',
+      errors: [expectedError],
+    },
+    {
+      code: '<img alt={`image doing ${things}`} {...this.props} />',
+      errors: [expectedError],
+    },
+    {
+      code: '<img alt={`picture doing ${picture}`} {...this.props} />',
+      errors: [expectedError],
+    },
+    {
+      code: '<img alt={`photo doing ${photo}`} {...this.props} />',
+      errors: [expectedError],
+    },
+    {
+      code: '<img alt={`image doing ${image}`} {...this.props} />',
+      errors: [expectedError],
+    },
+    { code: '<Image alt="Photo of a friend" />', errors: [expectedError], settings: componentsSettings },
+
+    // TESTS FOR ARRAY OPTION TESTS
+    { code: '<img alt="Word1" />;', options: array, errors: [expectedError] },
+    { code: '<img alt="Word2" />;', options: array, errors: [expectedError] },
+    { code: '<Image alt="Word1" />;', options: array, errors: [expectedError] },
+    { code: '<Image alt="Word2" />;', options: array, errors: [expectedError] },
+
+    { code: '<img alt="イメージ" />', options: [{ words: ['イメージ'] }], errors: [expectedError] },
+    { code: '<img alt="イメージです" />', options: [{ words: ['イメージ'] }], errors: [expectedError] },
+  )).map(parserOptionsMapper),
+});

package/__tests__/src/rules/interactive-supports-focus-test.js

@@ -0,0 +1,267 @@
+/**
+ * @fileoverview Enforce that elements with onClick handlers must be focusable.
+ * @author Ethan Cohen
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import includes from 'array-includes';
+import { RuleTester } from 'eslint';
+import {
+  eventHandlers,
+  eventHandlersByType,
+} from 'jsx-ast-utils';
+import { configs } from '../../../src/index';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import parsers from '../../__util__/helpers/parsers';
+import rule from '../../../src/rules/interactive-supports-focus';
+import ruleOptionsMapperFactory from '../../__util__/ruleOptionsMapperFactory';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+function template(strings, ...keys) {
+  return (...values) => keys.reduce(
+    (acc, k, i) => acc + (values[k] || '') + strings[i + 1],
+    strings[0],
+  );
+}
+
+const ruleName = 'interactive-supports-focus';
+const type = 'JSXOpeningElement';
+const codeTemplate = template`<${0} role="${1}" ${2}={() => void 0} />`;
+const tabindexTemplate = template`<${0} role="${1}" ${2}={() => void 0} tabIndex="0" />`;
+const tabbableTemplate = template`Elements with the '${0}' interactive role must be tabbable.`;
+const focusableTemplate = template`Elements with the '${0}' interactive role must be focusable.`;
+
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Div: 'div',
+    },
+  },
+};
+
+const buttonError = { message: tabbableTemplate('button'), type };
+
+const recommendedOptions = configs.recommended.rules[`jsx-a11y/${ruleName}`][1] || {};
+
+const strictOptions = configs.strict.rules[`jsx-a11y/${ruleName}`][1] || {};
+
+const alwaysValid = [
+  { code: '<div />' },
+  { code: '<div aria-hidden onClick={() => void 0} />' },
+  { code: '<div aria-hidden={true == true} onClick={() => void 0} />' },
+  { code: '<div aria-hidden={true === true} onClick={() => void 0} />' },
+  { code: '<div aria-hidden={hidden !== false} onClick={() => void 0} />' },
+  { code: '<div aria-hidden={hidden != false} onClick={() => void 0} />' },
+  { code: '<div aria-hidden={1 < 2} onClick={() => void 0} />' },
+  { code: '<div aria-hidden={1 <= 2} onClick={() => void 0} />' },
+  { code: '<div aria-hidden={2 > 1} onClick={() => void 0} />' },
+  { code: '<div aria-hidden={2 >= 1} onClick={() => void 0} />' },
+  { code: '<div onClick={() => void 0} />;' },
+  { code: '<div onClick={() => void 0} tabIndex={undefined} />;' },
+  { code: '<div onClick={() => void 0} tabIndex="bad" />;' },
+  { code: '<div onClick={() => void 0} role={undefined} />;' },
+  { code: '<div role="section" onClick={() => void 0} />' },
+  { code: '<div onClick={() => void 0} aria-hidden={false} />;' },
+  { code: '<div onClick={() => void 0} {...props} />;' },
+  { code: '<input type="text" onClick={() => void 0} />' },
+  { code: '<input type="hidden" onClick={() => void 0} tabIndex="-1" />' },
+  { code: '<input type="hidden" onClick={() => void 0} tabIndex={-1} />' },
+  { code: '<input onClick={() => void 0} />' },
+  { code: '<input onClick={() => void 0} role="combobox" />' },
+  { code: '<button onClick={() => void 0} className="foo" />' },
+  { code: '<option onClick={() => void 0} className="foo" />' },
+  { code: '<select onClick={() => void 0} className="foo" />' },
+  { code: '<area href="#" onClick={() => void 0} className="foo" />' },
+  { code: '<area onClick={() => void 0} className="foo" />' },
+  { code: '<summary onClick={() => void 0} />' },
+  { code: '<textarea onClick={() => void 0} className="foo" />' },
+  { code: '<a onClick="showNextPage();">Next page</a>' },
+  { code: '<a onClick="showNextPage();" tabIndex={undefined}>Next page</a>' },
+  { code: '<a onClick="showNextPage();" tabIndex="bad">Next page</a>' },
+  { code: '<a onClick={() => void 0} />' },
+  { code: '<a tabIndex="0" onClick={() => void 0} />' },
+  { code: '<a tabIndex={dynamicTabIndex} onClick={() => void 0} />' },
+  { code: '<a tabIndex={0} onClick={() => void 0} />' },
+  { code: '<a role="button" href="#" onClick={() => void 0} />' },
+  { code: '<a onClick={() => void 0} href="http://x.y.z" />' },
+  { code: '<a onClick={() => void 0} href="http://x.y.z" tabIndex="0" />' },
+  { code: '<a onClick={() => void 0} href="http://x.y.z" tabIndex={0} />' },
+  { code: '<a onClick={() => void 0} href="http://x.y.z" role="button" />' },
+  { code: '<TestComponent onClick={doFoo} />' },
+  { code: '<input onClick={() => void 0} type="hidden" />;' },
+  { code: '<span onClick="submitForm();">Submit</span>' },
+  { code: '<span onClick="submitForm();" tabIndex={undefined}>Submit</span>' },
+  { code: '<span onClick="submitForm();" tabIndex="bad">Submit</span>' },
+  { code: '<span onClick="doSomething();" tabIndex="0">Click me!</span>' },
+  { code: '<span onClick="doSomething();" tabIndex={0}>Click me!</span>' },
+  { code: '<span onClick="doSomething();" tabIndex="-1">Click me too!</span>' },
+  {
+    code: '<a href="javascript:void(0);" onClick="doSomething();">Click ALL the things!</a>',
+  },
+  { code: '<section onClick={() => void 0} />;' },
+  { code: '<main onClick={() => void 0} />;' },
+  { code: '<article onClick={() => void 0} />;' },
+  { code: '<header onClick={() => void 0} />;' },
+  { code: '<footer onClick={() => void 0} />;' },
+  { code: '<div role="button" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="checkbox" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="link" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="menuitem" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="menuitemcheckbox" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="menuitemradio" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="option" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="radio" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="spinbutton" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="switch" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="tablist" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="tab" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="textbox" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="textbox" aria-disabled="true" onClick={() => void 0} />' },
+  { code: '<Foo.Bar onClick={() => void 0} aria-hidden={false} />;' },
+  { code: '<Input onClick={() => void 0} type="hidden" />;' },
+  { code: '<Div onClick={() => void 0} role="button" tabIndex="0" />', settings: componentsSettings },
+];
+
+const neverValid = [
+  { code: '<Div onClick={() => void 0} role="button" />', errors: [buttonError], settings: componentsSettings },
+];
+
+const interactiveRoles = [
+  'button',
+  'checkbox',
+  'link',
+  'gridcell',
+  'menuitem',
+  'menuitemcheckbox',
+  'menuitemradio',
+  'option',
+  'radio',
+  'searchbox',
+  'slider',
+  'spinbutton',
+  'switch',
+  'tab',
+  'textbox',
+  'treeitem',
+];
+
+const recommendedRoles = [
+  'button',
+  'checkbox',
+  'link',
+  'searchbox',
+  'spinbutton',
+  'switch',
+  'textbox',
+];
+
+const strictRoles = [
+  'button',
+  'checkbox',
+  'link',
+  'progressbar',
+  'searchbox',
+  'slider',
+  'spinbutton',
+  'switch',
+  'textbox',
+];
+
+const staticElements = [
+  'div',
+];
+
+const triggeringHandlers = [
+  ...eventHandlersByType.mouse,
+  ...eventHandlersByType.keyboard,
+];
+
+const passReducer = (roles, handlers, messageTemplate) => (
+  staticElements.reduce((elementAcc, element) => (
+    elementAcc.concat(roles.reduce((roleAcc, role) => (
+      roleAcc.concat(handlers.map((handler) => ({
+        code: messageTemplate(element, role, handler),
+      })))
+    ), []))
+  ), [])
+);
+
+const failReducer = (roles, handlers, messageTemplate) => (
+  staticElements.reduce((elementAcc, element) => (
+    elementAcc.concat(roles.reduce((roleAcc, role) => (
+      roleAcc.concat(handlers.map((handler) => ({
+        code: codeTemplate(element, role, handler),
+        errors: [{
+          type,
+          message: messageTemplate(role),
+        }],
+      })))
+    ), []))
+  ), [])
+);
+
+ruleTester.run(`${ruleName}:recommended`, rule, {
+  valid: parsers.all([].concat(
+    ...alwaysValid,
+    ...passReducer(
+      interactiveRoles,
+      eventHandlers.filter((handler) => !includes(triggeringHandlers, handler)),
+      codeTemplate,
+    ),
+    ...passReducer(
+      interactiveRoles.filter((role) => !includes(recommendedRoles, role)),
+      eventHandlers.filter((handler) => includes(triggeringHandlers, handler)),
+      tabindexTemplate,
+    ),
+  ))
+    .map(ruleOptionsMapperFactory(recommendedOptions))
+    .map(parserOptionsMapper),
+  invalid: parsers.all([].concat(
+    ...neverValid,
+    ...failReducer(recommendedRoles, triggeringHandlers, tabbableTemplate),
+    ...failReducer(
+      interactiveRoles.filter((role) => !includes(recommendedRoles, role)),
+      triggeringHandlers,
+      focusableTemplate,
+    ),
+  ))
+    .map(ruleOptionsMapperFactory(recommendedOptions))
+    .map(parserOptionsMapper),
+});
+
+ruleTester.run(`${ruleName}:strict`, rule, {
+  valid: parsers.all([].concat(
+    ...alwaysValid,
+    ...passReducer(
+      interactiveRoles,
+      eventHandlers.filter((handler) => !includes(triggeringHandlers, handler)),
+      codeTemplate,
+    ),
+    ...passReducer(
+      interactiveRoles.filter((role) => !includes(strictRoles, role)),
+      eventHandlers.filter((handler) => includes(triggeringHandlers, handler)),
+      tabindexTemplate,
+    ),
+  ))
+    .map(ruleOptionsMapperFactory(strictOptions))
+    .map(parserOptionsMapper),
+  invalid: parsers.all([].concat(
+    ...neverValid,
+    ...failReducer(strictRoles, triggeringHandlers, tabbableTemplate),
+    ...failReducer(
+      interactiveRoles.filter((role) => !includes(strictRoles, role)),
+      triggeringHandlers,
+      focusableTemplate,
+    ),
+  ))
+    .map(ruleOptionsMapperFactory(strictOptions))
+    .map(parserOptionsMapper),
+});

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

@@ -0,0 +1,243 @@
+/**
+ * @fileoverview Enforce label tags have an associated control.
+ * @author Jesse Beach
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import parsers from '../../__util__/helpers/parsers';
+import rule from '../../../src/rules/label-has-associated-control';
+import ruleOptionsMapperFactory from '../../__util__/ruleOptionsMapperFactory';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const ruleName = 'label-has-associated-control';
+
+const expectedError = {
+  message: 'A form label must be associated with a control.',
+  type: 'JSXOpeningElement',
+};
+
+const expectedErrorNoLabel = {
+  message: 'A form label must have accessible text.',
+  type: 'JSXOpeningElement',
+};
+
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      CustomInput: 'input',
+      CustomLabel: 'label',
+    },
+  },
+};
+
+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 }], 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'] }] },
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label" />', settings: componentsSettings },
+  // Custom label attributes.
+  { code: '<label htmlFor="js_id" label="A label" />', options: [{ labelAttributes: ['label'] }] },
+  // Glob support for controlComponents option.
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label" />', options: [{ controlComponents: ['Custom*'] }] },
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label" />', options: [{ controlComponents: ['*Label'] }] },
+  // Rule does not error if presence of accessible label cannot be determined
+  { code: '<div><label htmlFor="js_id"><CustomText /></label><input id="js_id" /></div>' },
+];
+const nestingValid = [
+  { code: '<label>A label<input /></label>' },
+  { code: '<label>A label<textarea /></label>' },
+  { code: '<label><img alt="A label" /><input /></label>' },
+  { code: '<label><img aria-label="A label" /><input /></label>' },
+  { code: '<label><span>A label<input /></span></label>' },
+  { code: '<label><span><span>A label<input /></span></span></label>', options: [{ depth: 3 }] },
+  { code: '<label><span><span><span>A label<input /></span></span></span></label>', options: [{ depth: 4 }] },
+  { code: '<label><span><span><span><span>A label</span><input /></span></span></span></label>', options: [{ depth: 5 }] },
+  { code: '<label><span><span><span><span aria-label="A label" /><input /></span></span></span></label>', options: [{ depth: 5 }] },
+  { code: '<label><span><span><span><input aria-label="A label" /></span></span></span></label>', options: [{ depth: 5 }] },
+  // Other controls
+  { code: '<label>foo<meter /></label>' },
+  { code: '<label>foo<output /></label>' },
+  { code: '<label>foo<progress /></label>' },
+  { code: '<label>foo<textarea /></label>' },
+  // Custom controlComponents.
+  { code: '<label>A label<CustomInput /></label>', options: [{ controlComponents: ['CustomInput'] }] },
+  { code: '<label><span>A label<CustomInput /></span></label>', options: [{ controlComponents: ['CustomInput'] }] },
+  { code: '<label><span>A label<CustomInput /></span></label>', settings: componentsSettings },
+  { code: '<CustomLabel><span>A label<CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'] }] },
+  { code: '<CustomLabel><span label="A label"><CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'], labelAttributes: ['label'] }] },
+  // Glob support for controlComponents option.
+  { code: '<label><span>A label<CustomInput /></span></label>', options: [{ controlComponents: ['Custom*'] }] },
+  { code: '<label><span>A label<CustomInput /></span></label>', options: [{ controlComponents: ['*Input'] }] },
+  // Rule does not error if presence of accessible label cannot be determined
+  { code: '<label><CustomText /><input /></label>' },
+];
+
+const bothValid = [
+  { code: '<label htmlFor="js_id"><span><span><span>A label<input /></span></span></span></label>', options: [{ depth: 4 }] },
+  { code: '<label htmlFor="js_id" aria-label="A label"><input /></label>' },
+  { code: '<label htmlFor="js_id" aria-labelledby="A label"><input /></label>' },
+  { code: '<label htmlFor="js_id" aria-labelledby="A label"><textarea /></label>' },
+  // Custom label component.
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label"><input /></CustomLabel>', options: [{ labelComponents: ['CustomLabel'] }] },
+  { code: '<CustomLabel htmlFor="js_id" label="A label"><input /></CustomLabel>', options: [{ labelAttributes: ['label'], labelComponents: ['CustomLabel'] }] },
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label"><input /></CustomLabel>', settings: componentsSettings },
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label"><CustomInput /></CustomLabel>', settings: componentsSettings },
+  // Custom label attributes.
+  { code: '<label htmlFor="js_id" label="A label"><input /></label>', options: [{ labelAttributes: ['label'] }] },
+  { code: '<label htmlFor="selectInput">Some text<select id="selectInput" /></label>' },
+];
+
+const alwaysValid = [
+  { code: '<div />' },
+  { code: '<CustomElement />' },
+  { code: '<input type="hidden" />' },
+];
+
+const htmlForInvalid = [
+  { code: '<label htmlFor="js_id"><span><span><span>A label</span></span></span></label>', options: [{ depth: 4 }], errors: [expectedError] },
+  { code: '<label htmlFor="js_id" aria-label="A label" />', errors: [expectedError] },
+  { code: '<label htmlFor="js_id" aria-labelledby="A label" />', errors: [expectedError] },
+  // Custom label component.
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label" />', options: [{ labelComponents: ['CustomLabel'] }], errors: [expectedError] },
+  { code: '<CustomLabel htmlFor="js_id" label="A label" />', options: [{ labelAttributes: ['label'], labelComponents: ['CustomLabel'] }], errors: [expectedError] },
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label" />', settings: componentsSettings, errors: [expectedError] },
+  // Custom label attributes.
+  { code: '<label htmlFor="js_id" label="A label" />', options: [{ labelAttributes: ['label'] }], errors: [expectedError] },
+];
+const nestingInvalid = [
+  { code: '<label>A label<input /></label>', errors: [expectedError] },
+  { code: '<label>A label<textarea /></label>', errors: [expectedError] },
+  { code: '<label><img alt="A label" /><input /></label>', errors: [expectedError] },
+  { code: '<label><img aria-label="A label" /><input /></label>', errors: [expectedError] },
+  { code: '<label><span>A label<input /></span></label>', errors: [expectedError] },
+  { code: '<label><span><span>A label<input /></span></span></label>', options: [{ depth: 3 }], errors: [expectedError] },
+  { code: '<label><span><span><span>A label<input /></span></span></span></label>', options: [{ depth: 4 }], errors: [expectedError] },
+  { code: '<label><span><span><span><span>A label</span><input /></span></span></span></label>', options: [{ depth: 5 }], errors: [expectedError] },
+  { code: '<label><span><span><span><span aria-label="A label" /><input /></span></span></span></label>', options: [{ depth: 5 }], errors: [expectedError] },
+  { code: '<label><span><span><span><input aria-label="A label" /></span></span></span></label>', options: [{ depth: 5 }], errors: [expectedError] },
+  // Custom controlComponents.
+  { code: '<label>A label<OtherCustomInput /></label>', options: [{ controlComponents: ['CustomInput'] }], errors: [expectedError] },
+  { code: '<label><span>A label<CustomInput /></span></label>', options: [{ controlComponents: ['CustomInput'] }], errors: [expectedError] },
+  { code: '<CustomLabel><span>A label<CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'] }], errors: [expectedError] },
+  { code: '<CustomLabel><span label="A label"><CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'], labelAttributes: ['label'] }], errors: [expectedError] },
+  { code: '<label><span>A label<CustomInput /></span></label>', settings: componentsSettings, errors: [expectedError] },
+  { code: '<CustomLabel><span>A label<CustomInput /></span></CustomLabel>', settings: componentsSettings, errors: [expectedError] },
+];
+
+const neverValid = [
+  { code: '<label htmlFor="js_id" />', errors: [expectedErrorNoLabel] },
+  { code: '<label htmlFor="js_id"><input /></label>', errors: [expectedErrorNoLabel] },
+  { code: '<label htmlFor="js_id"><textarea /></label>', errors: [expectedErrorNoLabel] },
+  { code: '<label></label>', errors: [expectedErrorNoLabel] },
+  { code: '<label>A label</label>', errors: [expectedError] },
+  { code: '<div><label /><input /></div>', errors: [expectedErrorNoLabel] },
+  { code: '<div><label>A label</label><input /></div>', errors: [expectedError] },
+  // Custom label component.
+  { code: '<CustomLabel aria-label="A label" />', options: [{ labelComponents: ['CustomLabel'] }], errors: [expectedError] },
+  { code: '<CustomLabel label="A label" />', options: [{ labelAttributes: ['label'], labelComponents: ['CustomLabel'] }], errors: [expectedError] },
+  { code: '<CustomLabel aria-label="A label" />', settings: componentsSettings, errors: [expectedError] },
+  // Custom label attributes.
+  { code: '<label label="A label" />', options: [{ labelAttributes: ['label'] }], errors: [expectedError] },
+  // Custom controlComponents.
+  { code: '<label><span><CustomInput /></span></label>', options: [{ controlComponents: ['CustomInput'] }], errors: [expectedErrorNoLabel] },
+  { code: '<CustomLabel><span><CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'] }], errors: [expectedErrorNoLabel] },
+  { code: '<CustomLabel><span><CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'], labelAttributes: ['label'] }], errors: [expectedErrorNoLabel] },
+  { code: '<label><span><CustomInput /></span></label>', settings: componentsSettings, errors: [expectedErrorNoLabel] },
+  { code: '<CustomLabel><span><CustomInput /></span></CustomLabel>', settings: componentsSettings, errors: [expectedErrorNoLabel] },
+];
+// htmlFor valid
+ruleTester.run(ruleName, rule, {
+  valid: parsers.all([].concat(
+    ...alwaysValid,
+    ...htmlForValid,
+  ))
+    .map(ruleOptionsMapperFactory({
+      assert: 'htmlFor',
+    }))
+    .map(parserOptionsMapper),
+  invalid: parsers.all([].concat(
+    ...neverValid,
+    ...nestingInvalid,
+  ))
+    .map(ruleOptionsMapperFactory({
+      assert: 'htmlFor',
+    }))
+    .map(parserOptionsMapper),
+});
+
+// nesting valid
+ruleTester.run(ruleName, rule, {
+  valid: parsers.all([].concat(
+    ...alwaysValid,
+    ...nestingValid,
+  ))
+    .map(ruleOptionsMapperFactory({
+      assert: 'nesting',
+    }))
+    .map(parserOptionsMapper),
+  invalid: parsers.all([].concat(
+    ...neverValid,
+    ...htmlForInvalid,
+  ))
+    .map(ruleOptionsMapperFactory({
+      assert: 'nesting',
+    }))
+    .map(parserOptionsMapper),
+});
+
+// either valid
+ruleTester.run(ruleName, rule, {
+  valid: parsers.all([].concat(
+    ...alwaysValid,
+    ...htmlForValid,
+    ...nestingValid,
+  ))
+    .map(ruleOptionsMapperFactory({
+      assert: 'either',
+    }))
+    .map(parserOptionsMapper),
+  invalid: parsers.all([].concat(
+    ...neverValid,
+  )).map(parserOptionsMapper),
+});
+
+// both valid
+ruleTester.run(ruleName, rule, {
+  valid: parsers.all([].concat(
+    ...alwaysValid,
+    ...bothValid,
+  ))
+    .map(ruleOptionsMapperFactory({
+      assert: 'both',
+    }))
+    .map(parserOptionsMapper),
+  invalid: parsers.all([].concat(
+    ...neverValid,
+  )).map(parserOptionsMapper),
+});