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

`getByRole` `description` does not look at `aria-label`

Open
#1,336 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

  • @testing-library/react version: 16.0.1
  • Testing Framework and version: vitest@2.0.5
  • DOM Environment: @testing-library/jest-dom@6.5.0 (6.4.5 also 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
Screenshot 2024-10-03 at 11 08 26 AM Screenshot 2024-10-03 at 11 09 07 AM
Reproduction:

See snippet

Problem description:

Not reflective of the real result.

Suggested solution:

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.