Aria labels not coming through aria descriptions

[HeartSquared]

Initially reported in https://github.com/testing-library/dom-testing-library/issues/1336. Opening issue here as requested.

---

Relevant code:

  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

Problem description:

Not reflective of the real result.