computeAccessibleDescription does not include aria-label text

[greypants]

This issue was originally reported here testing-library/jest-dom#500, but it was noted that the underlying issue is here in the computeAccessibleDescription method.

• @testing-library/jest-dom: "5.16.5"
• @testing-library/react: "13.4.0"
• node version: 18

Relevant code or config:

  it("includes svg aria-label in description text", () => {
    render(
      <>
        <label htmlFor="input-id">input</label>
        <input id="input-id" aria-describedby="description-id" />
        <div id="description-id">
          <svg role="img" aria-label="error" /> message
        </div>
      </>
    );

    expect(screen.getByLabelText("input")).toHaveAccessibleDescription("error message");
  });

What you did:

Screen readers include the svg aria-label in the accessible description, but computeAccessibleDescription (via toHaveAccessibleDescription in jest-dom) does not.

What happened:

    Expected element to have accessible description:
      error message
    Received:
      message

Reproduction:

https://codesandbox.io/s/react-testing-library-demo-forked-45xzdn?file=/src/__tests__/toHaveAccessibleDescription.js

Problem description:

aria-label contents are not included in the accessible description.

Suggested solution:

aria-label contents should be included in accessible descriptions.

[greypants]

Looks like it might be an issue around here? https://github.com/eps1lon/dom-accessibility-api/blob/main/sources/accessible-name-and-description.ts#L461-L470C4

If an SVG (or a number of other elements) element has an aria-label, that should probably trump all the other checks and the value of the aria-label attribute should be returned, right?