fix: Only return first child element in label query

Author: Aaron Pettengill

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', () => {

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)
     }, [])