Skip to content

*ByRole doesn't work for the menu role #1059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
trurl-master opened this issue Oct 17, 2021 · 3 comments · Fixed by eps1lon/dom-accessibility-api#762 or #1063
Closed

*ByRole doesn't work for the menu role #1059

trurl-master opened this issue Oct 17, 2021 · 3 comments · Fixed by eps1lon/dom-accessibility-api#762 or #1063
Labels
bug Something isn't working

Comments

@trurl-master
Copy link

trurl-master commented Oct 17, 2021 •
edited
Loading

  • @testing-library/dom version: 8.9.1
  • Testing Framework and version: jest 27.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.
@eps1lon
Copy link
Member

eps1lon commented Oct 18, 2021

Does the problem also reproduce locally? We've had some problems with the testing environment of codesandbox in the past.

@trurl-master
Copy link
Author

@eps1lon Yes, sorry for not specifying that. The versions at the beginning of the issue correspond to a local reproduction. I updated the issue.

@eps1lon
Copy link
Member

eps1lon commented Oct 18, 2021 •
edited
Loading

Thanks for the repro.

The implementation for the accessible name of menu is currently broken to pass web-platform-tests:
https://github.com/eps1lon/dom-accessibility-api/blob/26ee73de9ad6fce27cde0d5ec53a2bc4a12bd879/sources/accessible-name-and-description.ts#L546-L551

Will work on a fix that hopefully keeps WPT conformity. ACCNAME and ARIA are currently just not really consistent. ARIA reads like "name from author" should only consider "name from author" but ACCNAME makes no such prescriptions.

@eps1lon eps1lon added bug Something isn't working and removed needs more information labels Oct 18, 2021
@eps1lon eps1lon mentioned this issue Oct 18, 2021
Merged
@eps1lon eps1lon reopened this Oct 18, 2021
@eps1lon eps1lon mentioned this issue Oct 18, 2021
Merged
2 tasks
@eps1lon eps1lon mentioned this issue Dec 13, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
2 participants
@trurl-master @eps1lon