`isLabelable` does not support custom elements with `formAssociated = true`

[schjetne]

• @testing-library/dom version: 10.0.0
• Testing Framework and version: jest 29.7.0 / @testing-library/jest-dom 6.5.0 / @testing-library/react 16.0.1

Relevant code or config:

    const { getByLabelText } = render(<pkt-textinput labelText="Input Label" id="inputId" />)
    await window.customElements.whenDefined('pkt-textinput')
    const inputElement = getByLabelText('Input Label')

What you did:

Tried to use getByLabelText to query a form associated custom element by label text.

What happened:

´TestingLibraryElementError: Found a label with the text of: Input Label, however the element associated with this label (<pkt-textinput />) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a <pkt-textinput />, you can use aria-label or aria-labelledby instead.´

Reproduction:

Not needed as the problem is evident from this code in dom-testing-library:

function isLabelable(element: Element) {
  return (
    /BUTTON|METER|OUTPUT|PROGRESS|SELECT|TEXTAREA/.test(element.tagName) ||
    (element.tagName === 'INPUT' && element.getAttribute('type') !== 'hidden')
  )
}

Problem description:

Web component API has formAssociated and ElementInternals functionality to let a custom element in HTML behave like a fully valid form element that should support being targeted with a label. This is not supported in dom testing because only the “standard” built-in list of HTML form elements is supported in the isLabelable function.

I checked the W3C specs and formAssociated custom elements should indeed support being targeted by a label with for.

Suggested solution:

Add a test in isLabelable to check if the element is a form associated custom element.

[schjetne]

Would love to hear if this is going to get fixed, because as it is now the testing library reports valid HTML as invalid and it’s not great. I run a component library where we use web components with ElementInternals on our form elements and I have a hard time trying to think of a workaround or a fix for this issue. It's kind of tough to have to explain to our users that it’s the testing library that’s wrong, and not our components.

In the current HTML spec, these are listed as labelable elements:

button, input (if the type attribute is not in the Hidden state), meter, output, progress, select, textarea, form-associated custom elements