feat: resolve analytics label from associated <label for> element (#228)

Author: gethinwebster

src/internal/analytics-metadata/__tests__/labels-utils.test.tsx

@@ -118,6 +118,26 @@ describe('getLabelFromElement', () => {
     const target2 = container.querySelector('#target2');
     expect(getLabelFromElement(target2 as HTMLElement)).toEqual('content');
   });
+  test('returns text of an associated <label for> when the element has no text of its own', () => {
+    const { container } = render(
+      <div>
+        <label htmlFor="target">Column name</label>
+        <input id="target" type="checkbox" />
+      </div>
+    );
+    const target = container.querySelector('#target');
+    expect(getLabelFromElement(target as HTMLElement)).toEqual('Column name');
+  });
+  test('prefers aria-label over an associated <label for>', () => {
+    const { container } = render(
+      <div>
+        <label htmlFor="target">from label for</label>
+        <input id="target" type="checkbox" aria-label="from aria-label" />
+      </div>
+    );
+    const target = container.querySelector('#target');
+    expect(getLabelFromElement(target as HTMLElement)).toEqual('from aria-label');
+  });
 });
 
 describe('processLabel', () => {

src/internal/analytics-metadata/labels-utils.ts

@@ -160,5 +160,14 @@ export const getLabelFromElement = (element: HTMLElement | null): string => {
     }
   }
 
+  const id = element.getAttribute('id');
+  if (id) {
+    const associatedLabel = element.ownerDocument.querySelector(`label[for="${CSS.escape(id)}"]`);
+    const associatedText = associatedLabel?.textContent?.trim();
+    if (associatedText) {
+      return associatedText;
+    }
+  }
+
   return element.textContent ? element.textContent.trim() : '';
 };