[fix:634] Ignore control elements that are hidden

Author: jessebeach

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

@@ -311,3 +311,15 @@ ruleTester.run(`${ruleName}:strict`, rule, {
  .map(ruleOptionsMapperFactory(strictOptions))
  .map(parserOptionsMapper),
 });
+
+ruleTester.run(`${ruleName}:no-config`, rule, {
+ valid: [
+ { code: '<input type="hidden" />' },
+ { code: '<input type="text" aria-hidden="true" />' },
+ ]
+ .map(parserOptionsMapper),
+ invalid: [
+ { code: '<input type="text" />', errors: [expectedError] },
+ ]
+ .map(parserOptionsMapper),
+});

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

@@ -15,6 +15,7 @@ import includes from 'array-includes';
 import { generateObjSchema, arraySchema } from '../util/schemas';
 import type { ESLintContext } from '../../flow/eslint';
 import isDOMElement from '../util/isDOMElement';
+import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
 import isInteractiveRole from '../util/isInteractiveRole';
 import mayHaveAccessibleLabel from '../util/mayHaveAccessibleLabel';
@@ -67,10 +68,15 @@ module.exports = {
  }
  const props = node.openingElement.attributes;
  const nodeIsDOMElement = isDOMElement(tag);
+ const nodeIsHiddenFromScreenReader = isHiddenFromScreenReader(tag, props);
  const nodeIsInteractiveElement = isInteractiveElement(tag, props);
  const nodeIsInteractiveRole = isInteractiveRole(tag, props);
  const nodeIsControlComponent = controlComponents.indexOf(tag) > -1;
 
+ if (nodeIsHiddenFromScreenReader) {
+ return;
+ }
+
  let hasAccessibleLabel = true;
  if (
  nodeIsInteractiveElement