getByRole doesn't work for menu with aria-label

• @testing-library/dom version: 4.1.0
• Testing Framework and version: Jest (The same as in the codesandbox below)

Relevant code or config:

    <ul role="menu" aria-label="actions">
      <li role="menuitem">copy</li>
      <li role="menuitem">paste</li>
      <li role="menuitem">cut</li>
    </ul>
    
    <ul role="menu" aria-label="share">
      <li role="menuitem">copy link</li>
      <li role="menuitem">report bug</li>
    </ul>

What you did:

screen.getByRole('menu', { name: 'actions' }) 

What happened:

The element was not found.

Unable to find an accessible element with the role “menu” and name “actions”

I was expecting to be found because, according to the Chrome’s Accessibility Tree, the role and name are set correctly:

Reproduction:

• Condesabox: https://codesandbox.io/s/react-testing-library-menu-name-6ir07
• Testing Playground: https://testing-playground.com/gist/ba36265b023b1e0bb5dbe513cceb84f1/d07dc90240b88c2c71ad7c1478a7e40ba800778d

References:

This was originally discovered at Discord KCD by Thomas.

[thomasmery]

thanks!

test is passing now

I had to upgrade to:

   @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
   dom-accessibility-api: ^0.5.10 => 0.5.10 

[eps1lon]

@thomasmery Could you post the result of npx testing-library-envinfo react? You might have an older version of dom-accessibility-api that was fixed in https://github.com/testing-library/dom-testing-library/issues/1059