definition names aren't detected

[Vinnl]

• @testing-library/dom version: See below.
• Testing Framework and version: See below.
• DOM Environment: See below.(jsdom)

$ npx testing-library-envinfo react
  System:
    OS: Linux 5.15 Fedora Linux 35 (Workstation Edition)
  Binaries:
    Node: 14.18.1 - ~/.volta/tools/image/node/14.18.1/bin/node
    Yarn: Not Found
    npm: 8.1.0 - ~/.volta/tools/image/npm/8.1.0/bin/npm
  npmPackages:
    @testing-library/dom: ^8.11.1 => 8.11.1 
    @testing-library/jest-dom: ^5.16.1 => 5.16.1 
    @testing-library/react: ^12.1.2 => 12.1.2 
    @testing-library/react-hooks: ^7.0.2 => 7.0.2 
    @testing-library/user-event: ^13.5.0 => 13.5.0 
    aria-query:  4.2.2 
    dom-accessibility-api:  0.5.10 
    jest: ^27.3.1 => 27.3.1 
    jsdom:  16.7.0 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 

Relevant code or config:

On the playground: https://testing-playground.com/gist/f903fd3577b600fa971fa80f3580bad1/8def0ea97e0143cdfb7a57db33ee4bf3d43228a2

The DOM:

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>
</dl>

The query:

// Says "your element isn't named properly":
screen.getByRole('definition')

/*
// Returns undefined:
screen.getByRole('definition', {
  name: "open source"
})
*/

What you did:

Trying to select a <dd> with its accessible name.

What happened:

testing-library says the accessible name is an empty string, even though Firefox's accessibility inspector says the text content is the accessible name:

I saw one early mention of this, but that was just in a comment that wasn't turned into a full issue: #866 (comment)

Reproduction:

https://testing-playground.com/gist/f903fd3577b600fa971fa80f3580bad1/8def0ea97e0143cdfb7a57db33ee4bf3d43228a2

Problem description:

I can't match on a definition list by its accessible name.

Suggested solution:

I think testing-library should recognise the text content as the accessible name? And probably the same holds true for <dt>.

[MatanBobi]

Hi @Vinnl!
Thanks for taking the time to open this issue.
Unfortunately, every browser decides how to compute the accessible name.
In our library, we try to follow the standards and as far as I was able to find, role: definition doesn't support name from content, which means that the accessible name algorithm won't tag the content as the accessible name and therefor lead to you not finding it by the name.
In this case I'd probably suggest to query the item by it's text instead.
Hope this is helpful :)
Have a great year!

[Vinnl]

Thanks. Seems like an oversight in the spec, but understandable that testing-library follows that. Cheers, and happy new year!