Description
@testing-library/domversion: 8.9.1- Testing Framework and version:
jest27.3.0 - DOM Environment: 16.7.0
Relevant code or config:
An example with getByRole (the same is true for queryByRole and findByRole as well as with aria-label directly on the ul, see codesandbox)
test("Menu labbelled by button", () => {
render(
<>
<button id="trigger">Test</button>
<ul role="menu" aria-labelledby="trigger">
<li role="menuitem">Item 1</li>
<li role="menuitem">Item 2</li>
</ul>
</>
);
expect(screen.getByRole("menu", { name: "Test" })).toBeInTheDocument();
});What happens:
TestingLibraryElementError: Unable to find an accessible element with the role "menu" and name "Test"
Here are the accessible roles:
button:
Name "Test":
<button
id="trigger"
/>
--------------------------------------------------
menu:
Name "":
<div
aria-labelledby="trigger"
role="menu"
/>
--------------------------------------------------
menuitem:
Name "Item 1":
<button
role="menuitem"
/>
Name "Item 2":
<button
role="menuitem"
/>
--------------------------------------------------
Ignored nodes: comments, <script />, <style />
<body>
<div>
<button
id="trigger"
>
Test
</button>
<div
aria-labelledby="trigger"
role="menu"
>
<button
role="menuitem"
>
Item 1
</button>
<button
role="menuitem"
>
Item 2
</button>
</div>
</div>
</body>
Reproduction:
The issue reproduces locally (in the environment described at the beginning of the issue), also in codesandbox
Problem description:
Even though we can always test for the presence of menu items, it's important to test that the list with the menu role also exists (otherwise VoiceOver for example doesn't recognize the list as a menu and it's impossible to navigate inside)
Suggested solution:
Don't really have one. Probably it's an issue with aria-query because there's this issue - A11yance/aria-query#150, but I'm not sure because I see the description for the menu role in their code.