getByRole does not work for role = term and specifying name = contentOfElement

[fvanderwielen]

• Testing Framework and version:

>pnpx testing-library-envinfo react

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 22.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @testing-library/cypress: ^10.0.3 => 10.0.3
    @testing-library/dom: ^10.4.0 => 10.4.0
    @testing-library/jest-dom: ^6.6.3 => 6.6.3
    @testing-library/react: ^16.3.0 => 16.3.0
    @testing-library/user-event: ^14.6.1 => 14.6.1
    jsdom: ^25.0.1 => 25.0.1
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1

using vitest 3.1.2

Relevant code or config:

testing playground reproducible:
https://testing-playground.com/gist/9a5293d2879a9166bcaa48dc520982ae/a3984c7d21b6ff2c670a9eb95df5163713d0a5b5

const ReactComponent= () => {
    return (
        <div>
          <dl >
            <dt>foo</dt>
            <dd>bar</dd>
            <dt>baz</dt>
            <dd>qux</dd>
          </dl>
        </div>
    );
};

What you did:

I want to check my component to have the accessible UI inside:
expect(screen.getByRole("term", { name: "foo" })).toBeInTheDocument();

What happened:

RTL is unable to find the an HTML component with that role and term:

TestingLibraryElementError: Unable to find an accessible element with the role "term" and name "foo"

Here are the accessible roles:

  term:

  Name "":
  <dt />

  Name "":
  <dt />

  --------------------------------------------------
  definition:

  Name "":
  <dd />

  Name "":
  <dd />

  --------------------------------------------------

Ignored nodes: comments, script, style
[logging continues but is irrelevant]

Reproduction:

it can be reproduced in this testing library playground:

https://testing-playground.com/gist/9a5293d2879a9166bcaa48dc520982ae/a3984c7d21b6ff2c670a9eb95df5163713d0a5b5

Problem description:

I would like to be able to check that this specific component exists with this accessible role and this name. the first dt can be found with this role and name using screenreaders and can be viewed in the accessibility tree in devtools of the browser, but testing library does not handle this expectation as this works in a production situation.

As per https://testing-library.com/docs/queries/about#priority I prefer to use getByRole, but for now I can use the following (less accessibility using/testing) alternative:
expect(screen.getByText("foo", { selector: "dt" })).toBeInTheDocument();

Suggested solution:

have expect(screen.getByRole("term", { name: "foo" })).toBeInTheDocument(); succeed for the given component.