fix: support form-associated custom elements in isLabelable

[mixelburg]

Description

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:

Found a label with the text of: Input Label, however the element associated with this label () is non-labellable

Solution

Added a check for custom elements (tags containing a hyphen) that have the attachInternals() method. When available, we call it and check if internals.formAssociated === true. This is wrapped in a try-catch to gracefully handle:

• Environments that don't support ElementInternals
• Elements that throw when attachInternals() is called on non-form-associated custom elements

Changes

• src/label-helpers.ts: Extended isLabelable() to detect form-associated custom elements

Testing

• All 666 existing tests pass
• The change is fully backward compatible
• In environments without ElementInternals support (older jsdom), behavior is unchanged

Fixes #1343

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9e553dd:

Sandbox	Source
react-testing-library-examples	Configuration