Merge pull request #471 from ljharb/textarea

[Fix] `label-has-for`: `textarea`s are inputs too

Author: jessebeach

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

@@ -38,6 +38,7 @@ const htmlForValid = [
 ];
 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>' },
@@ -56,6 +57,7 @@ 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'] }] },
@@ -80,6 +82,7 @@ const htmlForInvalid = [
 ];
 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] },
@@ -97,6 +100,7 @@ const nestingInvalid = [
 const neverValid = [
   { code: '<label htmlFor="js_id" />', errors: [expectedError] },
   { code: '<label htmlFor="js_id"><input /></label>', errors: [expectedError] },
+  { code: '<label htmlFor="js_id"><textarea /></label>', errors: [expectedError] },
   { code: '<label></label>', errors: [expectedError] },
   { code: '<label>A label</label>', errors: [expectedError] },
   { code: '<div><label /><input /></div>', errors: [expectedError] },

__tests__/src/rules/label-has-for-test.js

@@ -56,6 +56,7 @@ ruleTester.run('label-has-for', rule, {
     // DEFAULT ELEMENT 'label' TESTS
     { code: '<div />' },
     { code: '<label htmlFor="foo"><input /></label>' },
+    { code: '<label htmlFor="foo"><textarea /></label>' },
     { code: '<Label />' }, // lower-case convention refers to real HTML elements.
     { code: '<Label htmlFor="foo" />' },
     { code: '<Descriptor />' },
@@ -100,6 +101,7 @@ ruleTester.run('label-has-for', rule, {
     { code: '<label>First Name</label>', errors: [expectedEveryError], options: optionsRequiredEvery },
     { code: '<label {...props}>Foo</label>', errors: [expectedEveryError], options: optionsRequiredEvery },
     { code: '<label><input /></label>', errors: [expectedEveryError], options: optionsRequiredEvery },
+    { code: '<label><textarea /></label>', errors: [expectedEveryError], options: optionsRequiredEvery },
     { code: '<label>{children}</label>', errors: [expectedEveryError], options: optionsRequiredEvery },
     { code: '<label htmlFor="foo" />', errors: [expectedEveryError], options: optionsRequiredEvery },
     { code: '<label htmlFor={"foo"} />', errors: [expectedEveryError], options: optionsRequiredEvery },

src/rules/label-has-for.js

@@ -34,7 +34,7 @@ function validateNesting(node) {
   while (queue.length) {
     child = queue.shift();
     opener = child.openingElement;
-    if (child.type === 'JSXElement' && opener && opener.name.name === 'input') {
+    if (child.type === 'JSXElement' && opener && (opener.name.name === 'input' || opener.name.name === 'textarea')) {
       return true;
     }
     if (child.children) {