testing-library / testing-library/dom-testing-library

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

Open
#1,343 2 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
3.3k
Forks
474
PR merge metrics
No merged PRs in 30d

Description

  • @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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the isLabelable function shown in the issue and inspect the existing tests that cover labelable elements. Add coverage for a form-associated custom element and update the behavior so it is recognized as labelable. The work is done when the new test passes without regressing the existing standard-element cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.