From 81c50ba8445f138a681349ab06cc20fd8fba1699 Mon Sep 17 00:00:00 2001
From: Aaron Pettengill <aaron.pettengill@echoman.com>
Date: Mon, 6 Apr 2020 13:37:02 -0400
Subject: [PATCH 1/2] fix: Only return first child element in label query

---
 src/__tests__/element-queries.js | 36 +++++++++++++++++++++++++++++---
 src/queries/label-text.js        |  5 +++--
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js
index b0dc39c8..4e1f735b 100644
--- a/src/__tests__/element-queries.js
+++ b/src/__tests__/element-queries.js
@@ -230,7 +230,7 @@ test('can filter results of label query based on selector', () => {
 })
 
 test('can find any form control when label text is inside other elements', () => {
-  const {getAllByLabelText} = render(`
+  const {getByLabelText} = render(`
     <label>
       <span>Test</span>
       <span>Label</span>
@@ -244,8 +244,38 @@ test('can find any form control when label text is inside other elements', () =>
     </label>
   `)
 
-  const result = getAllByLabelText('Test Label')
-  expect(result).toHaveLength(7)
+  const nodeTypes = [
+    'button',
+    'input',
+    'meter',
+    'output',
+    'progress',
+    'select',
+    'textarea',
+  ]
+  nodeTypes.forEach(nodeType => {
+    expect(getByLabelText('Test Label', {selector: nodeType}).nodeName).toEqual(
+      nodeType.toUpperCase(),
+    )
+  })
+})
+
+test('returns the first form control inside a label', () => {
+  const {getByLabelText} = render(`
+    <label>
+      <span>Test</span>
+      <span>Label</span>
+      <button />
+      <input />
+      <meter />
+      <output />
+      <progress />
+      <select />
+      <textarea />
+    </label>
+  `)
+
+  expect(getByLabelText('Test Label').nodeName).toEqual('BUTTON')
 })
 
 test('can find non-input elements when aria-labelledby a label', () => {
diff --git a/src/queries/label-text.js b/src/queries/label-text.js
index 588258d1..94eeed79 100644
--- a/src/queries/label-text.js
+++ b/src/queries/label-text.js
@@ -74,9 +74,10 @@ function queryAllByLabelText(
         // <label>text: <input /></label>
         const formControlSelector =
           'button, input, meter, output, progress, select, textarea'
-        Array.from(
+        const labelledFormControl = Array.from(
           label.querySelectorAll(formControlSelector),
-        ).forEach(element => elementsForLabel.push(element))
+        ).filter(element => element.matches(selector))[0]
+        if (labelledFormControl) elementsForLabel.push(labelledFormControl)
       }
       return matchedElements.concat(elementsForLabel)
     }, [])

From 7cf549602d6bf2f782b7d03b8f036d7807a0b513 Mon Sep 17 00:00:00 2001
From: Aaron Pettengill <aaron.pettengill@echoman.com>
Date: Mon, 6 Apr 2020 15:43:09 -0400
Subject: [PATCH 2/2] fix: Link to spec and correct terminology

---
 src/__tests__/element-queries.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js
index 4e1f735b..05aade0c 100644
--- a/src/__tests__/element-queries.js
+++ b/src/__tests__/element-queries.js
@@ -229,7 +229,7 @@ test('can filter results of label query based on selector', () => {
   expect(result[0].id).toBe('input1')
 })
 
-test('can find any form control when label text is inside other elements', () => {
+test('can find any labelable element when label text is inside other elements', () => {
   const {getByLabelText} = render(`
     <label>
       <span>Test</span>
@@ -260,7 +260,9 @@ test('can find any form control when label text is inside other elements', () =>
   })
 })
 
-test('returns the first form control inside a label', () => {
+// According to the spec, the first descendant of a label that is a labelable element is the labeled control
+// https://html.spec.whatwg.org/multipage/forms.html#the-label-element
+test('returns the labelable element control inside a label', () => {
   const {getByLabelText} = render(`
     <label>
       <span>Test</span>