From 9e553dd4d2bdf677d49182406b435282cb8da7bd Mon Sep 17 00:00:00 2001
From: mixelburg <mixelburg@users.noreply.github.com>
Date: Wed, 13 May 2026 22:16:10 +0000
Subject: [PATCH 1/2] fix: support form-associated custom elements in
 isLabelable

Form-associated custom elements using the ElementInternals API
(static formAssociated = true) can be targeted by <label> elements
and should be considered labelable by getByLabelText().

Previously, isLabelable() only checked for standard HTML form elements
(BUTTON, INPUT, METER, OUTPUT, PROGRESS, SELECT, TEXTAREA), causing
getByLabelText() to fail for form-associated custom elements with the
error: 'the element associated with this label is non-labellable'.

The fix adds a check for custom elements (tags containing a hyphen)
that have the attachInternals() method. When available, we call it
and check if internals.formAssociated is true. This is wrapped in a
try-catch to handle environments that don't support ElementInternals.

All 666 existing tests pass.

Fixes #1343
---
 src/label-helpers.ts | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/label-helpers.ts b/src/label-helpers.ts
index 4e1a3fed..1225631c 100644
--- a/src/label-helpers.ts
+++ b/src/label-helpers.ts
@@ -48,10 +48,27 @@ function getRealLabels(element: Element) {
 }
 
 function isLabelable(element: Element) {
-  return (
+  if (
     /BUTTON|METER|OUTPUT|PROGRESS|SELECT|TEXTAREA/.test(element.tagName) ||
     (element.tagName === 'INPUT' && element.getAttribute('type') !== 'hidden')
-  )
+  ) {
+    return true
+  }
+
+  // Support form-associated custom elements
+  if (
+    element.tagName.includes('-') &&
+    typeof (element as any).attachInternals === 'function'
+  ) {
+    try {
+      const internals = (element as any).attachInternals()
+      return internals.formAssociated === true
+    } catch {
+      // Not a form-associated custom element or attachInternals not supported
+    }
+  }
+
+  return false
 }
 
 function getLabels(

From a4fc3b0a009292a8609b1f3c0fea316c1400113d Mon Sep 17 00:00:00 2001
From: mixelburg <mixelburg@gmail.com>
Date: Sat, 16 May 2026 00:05:19 +0000
Subject: [PATCH 2/2] fix: add eslint-disable for unsafe any calls in
 form-associated custom elements

---
 src/label-helpers.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/label-helpers.ts b/src/label-helpers.ts
index 1225631c..edb4eacf 100644
--- a/src/label-helpers.ts
+++ b/src/label-helpers.ts
@@ -58,9 +58,11 @@ function isLabelable(element: Element) {
   // Support form-associated custom elements
   if (
     element.tagName.includes('-') &&
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
     typeof (element as any).attachInternals === 'function'
   ) {
     try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
       const internals = (element as any).attachInternals()
       return internals.formAssociated === true
     } catch {