From 9e877b7ec3e09f00ed986c429dd0d9ff9ea1ccfb Mon Sep 17 00:00:00 2001
From: Gethin Webster <gethinw@amazon.com>
Date: Fri, 10 Jul 2026 06:10:16 +0000
Subject: [PATCH] feat: resolve analytics label from associated <label for>
 element
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

getLabelFromElement now falls back to the text of a `label[for=id]` associated with the element (after aria-label/aria-labelledby, before textContent). This lets autocapture resolve a label for controls whose accessible name is bound only via an external <label for> — e.g. CollectionPreferences visible-content toggles, where AbstractSwitch already points detail.label at the native input.
---
 .../__tests__/labels-utils.test.tsx           | 20 +++++++++++++++++++
 .../analytics-metadata/labels-utils.ts        |  9 +++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/internal/analytics-metadata/__tests__/labels-utils.test.tsx b/src/internal/analytics-metadata/__tests__/labels-utils.test.tsx
index 43ab010..ac50e03 100644
--- a/src/internal/analytics-metadata/__tests__/labels-utils.test.tsx
+++ b/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', () => {
diff --git a/src/internal/analytics-metadata/labels-utils.ts b/src/internal/analytics-metadata/labels-utils.ts
index 5920334..35a94a5 100644
--- a/src/internal/analytics-metadata/labels-utils.ts
+++ b/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() : '';
 };