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.