From 40f008bbb6807355bdc1c1824550e7f692c89c3d Mon Sep 17 00:00:00 2001
From: Kevin Deisz <kevin.deisz@gmail.com>
Date: Wed, 27 May 2020 08:44:34 -0400
Subject: [PATCH] Support deeply nested input controls for
 form-control-has-label

---
 CHANGELOG.md                                      |  4 ++++
 bin/lint                                          | 15 +++++++++++++++
 docs/label-has-for.md                             |  4 +++-
 .../__tests__/form-control-has-label.test.js      | 12 +++++++++++-
 src/rules/form-control-has-label.js               |  6 +++++-
 5 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100755 bin/lint

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9a77e4f..7fade717 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 ## [Unreleased]
 
+### Changed
+
+- Support deeply nested `input` controls for the `form-control-has-label` rule.
+
 ## [0.1.2] - 2020-05-11
 
 ### Changed
diff --git a/bin/lint b/bin/lint
new file mode 100755
index 00000000..aee16a0b
--- /dev/null
+++ b/bin/lint
@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+
+const { CLIEngine } = require("eslint");
+const a11yPlugin = require("../src");
+
+(async function () {
+  const cli = new CLIEngine({ baseConfig: a11yPlugin.configs.recommended });
+  cli.addPlugin("eslint-plugin-vuejs-accessibility", a11yPlugin);
+
+  const report = cli.executeOnFiles(process.argv.slice(2));
+  console.log(cli.getFormatter()(report.results));
+})().catch((error) => {
+  process.exitCode = 1;
+  console.error(error);
+});
diff --git a/docs/label-has-for.md b/docs/label-has-for.md
index 3dc0007a..eeb4637b 100644
--- a/docs/label-has-for.md
+++ b/docs/label-has-for.md
@@ -40,7 +40,9 @@ The `required` option (defaults to `"required": { "every": ["nesting", "id"] }`)
 The `allowChildren` option (defaults to `false`) determines whether default slot content is allowed to be passed into a `label` element. For example, the following pattern, by default, is not allowed:
 
 ```vue
-<label>Foo</label>
+<label>
+  <slot />
+</label>
 ```
 
 However, if `allowChildren` is set to `true`, no error will be raised. If you want to pass in default slot content without raising an error because you cannot be sure what the default slot will render, then set `allowChildren` to `true`.
diff --git a/src/rules/__tests__/form-control-has-label.test.js b/src/rules/__tests__/form-control-has-label.test.js
index 15e55245..975b61e4 100644
--- a/src/rules/__tests__/form-control-has-label.test.js
+++ b/src/rules/__tests__/form-control-has-label.test.js
@@ -6,7 +6,17 @@ makeRuleTester("form-control-has-label", rule, {
     "<label for=''><input type='text' /></label>",
     "<input type='text' aria-label='test' />",
     "<label for=''>text</label><input type='text' />",
-    "<input type='button'>"
+    "<input type='button'>",
+    `
+      <label>
+        <div>
+          <input type="radio" />
+        </div>
+        <div>
+          <slot />
+        </div>
+      </label>
+    `
   ],
   invalid: ["<input type='text' />", "<textarea type='text'></textarea>"]
 });
diff --git a/src/rules/form-control-has-label.js b/src/rules/form-control-has-label.js
index b09b89a2..2ee42802 100644
--- a/src/rules/form-control-has-label.js
+++ b/src/rules/form-control-has-label.js
@@ -11,7 +11,11 @@ const isLabelElement = (node) =>
 
 const hasLabelElement = (node) => {
   const { parent } = node;
-  return [parent, ...parent.children].some(isLabelElement);
+
+  return (
+    [parent, ...parent.children].some(isLabelElement) ||
+    (parent && parent.type === "VElement" && hasLabelElement(parent))
+  );
 };
 
 module.exports = {