fix: Only return first child element in label query (#520)

* fix: Only return first child element in label query

* fix: Link to spec and correct terminology

Co-authored-by: Aaron Pettengill <aaron.pettengill@echoman.com>

Author: airjp73

src/__tests__/element-queries.js

@@ -229,8 +229,8 @@ 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', () => {
-  const {getAllByLabelText} = render(`
+test('can find any labelable element when label text is inside other elements', () => {
+  const {getByLabelText} = render(`
     <label>
       <span>Test</span>
       <span>Label</span>
@@ -244,8 +244,40 @@ 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(),
+    )
+  })
+})
+
+// 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>
+      <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)
     }, [])