testing-library / testing-library/dom-testing-library
`isLabelable` does not support custom elements with `formAssociated = true`
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.3k
- Forks
- 474
- PR merge metrics
- No merged PRs in 30d
Description
@testing-library/domversion: 10.0.0- Testing Framework and version:
jest29.7.0 /@testing-library/jest-dom6.5.0 /@testing-library/react16.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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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