getByRole description does not look at aria-label

[HeartSquared]

• @testing-library/react version: 16.0.1
• Testing Framework and version: [email protected]
• DOM Environment: @testing-library/[email protected] (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

Reproduction:

See snippet

Problem description:

Not reflective of the real result.

Suggested solution:

[MatanBobi]

Hi @HeartSquared, thanks for the detailed explanation.
I looked at the spec and IIUC, it looks like we're compliant with it and the browser is actually behaving a bit differently.
the aria-label shouldn't be added there because it's already in use to calculate the accessible name. Having said that, I might be wrong here with my understanding of the spec, attaching it here for anyone else who wants to have a look: https://www.w3.org/TR/accname-1.2/#mapping_additional_nd_description

I'll tag @eps1lon also who might have an opinion here.
I'm moving this to DTL as this isn't related to React specifically :)

[github-actions]

Uh oh! @HeartSquared, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[eps1lon]

Sounds to me spec and browser agree. We should compute the name on the referenced elements and use that as the description. Please file a bug against https://github.com/eps1lon/dom-accessibility-api/