testing-library / testing-library/dom-testing-library
`getByRole` `description` does not look at `aria-label`
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.3k
- Forks
- 474
- PR merge metrics
- No merged PRs in 30d
Description
@testing-library/reactversion:16.0.1- Testing Framework and version:
vitest@2.0.5 - DOM Environment:
@testing-library/jest-dom@6.5.0(6.4.5also found in our lock file, likely from other deps)
Relevant code or config:
it("RTL example", () => {
const Input = (): JSX.Element => (
<>
<label htmlFor="id--input">Label</label>
<input
type="text"
id="id--input"
aria-describedby="id--error-msg"
/>
<div id="id--error-msg">
<span aria-label="icon_label">icon_name</span>
<span>The error message</span>
</div>
</>
)
const { getByRole } = render(<Input />)
const input = getByRole("textbox", {
description: "icon_label The error message",
})
expect(input).toBeInTheDocument()
})
What you did:
Found discrepancy between browser results and unit test using the exact same snippet.
The snippet is a simpler version of our TextField component, where the validation message is prefixed with a font icon with an aria-label.
What happened:
| Browser | Testing Library |
|---|---|
Reproduction:
See snippet
Problem description:
Not reflective of the real result.
Suggested solution:
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 by reproducing the issue with the JSX snippet in the report and trace the getByRole description handling, especially how aria-label contributes to the accessible description. Add a regression test for the expected "icon_label The error message" description, and confirm the reported query succeeds.
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
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100