[fix:634] Ignore control elements that are hidden

jsx-eslint · Jul 4, 2020 · 381b9d6 · 381b9d6
1 parent 7a34e45
commit 381b9d6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/__tests__/src/rules/control-has-associated-label-test.js b/__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),
+});
diff --git a/src/rules/control-has-associated-label.js b/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