Skip to content
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

*ByRole queries don't properly support the banner role #997

Closed
jrnail23 opened this issue Jul 23, 2021 · 4 comments · Fixed by #1058
Closed

*ByRole queries don't properly support the banner role #997

jrnail23 opened this issue Jul 23, 2021 · 4 comments · Fixed by #1058
Labels
bug Something isn't working

Comments

@jrnail23
Copy link

  • @testing-library/dom version: 7.28.1

  • Testing Framework and version: Jest 26.6.3

  • DOM Environment: jsdom 16.6

  • Node: 14.16

What you did:

Given this HTML body:

<body>
  <header>
    <h1>2 Rooms</h1>
  </header>
  <main>
    <header>
      <div>
        <button
          aria-controls="floor-filter-menu"
          aria-expanded="true"
          aria-haspopup="true"
          id="floor-filter-button"
        >
          All Floors
        </button>
      </div>
    </header>
    <nav>
      <ul>
        <li>
          <header>
            <h2>Level 1</h2>
          </header>
          <div>
            <a href="/embed/77/rooms/1001">
              <h3>Ballroom A</h3>
              <p>100 square feet</p>
            </a>
          </div>
        </li>
        <li>
          <header>
            <h2>Level 2</h2>
          </header>
          <div>
            <a href="/embed/77/rooms/2003">
              <h3>Ballroom C</h3>
              <p>250 square feet</p>
            </a>
          </div>
        </li>
      </ul>
    </nav>
  </main>
</body>

What happened:

screen.getByRole('banner') throws TestingLibraryElementError: Found multiple elements with the role "banner"

Reproduction:

https://codesandbox.io/s/react-testing-library-demo-forked-7rp9f?file=/src/__tests__/hello.js

Problem description:

According to WAI-ARIA:

HTML element Implicit ARIA semantics
header If not a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region then role=banner. Otherwise no corresponding role

Suggested solution:

the ByRole queries should adhere to ARIA specs, and only implicitly assume the banner role for <header> elements when they are not descendants of the specified elements
@jacklaurencegaray
Copy link
Contributor

This is the error I get from the sandbox:
TestingLibraryElementError: Unable to find an accessible element with the role "banner". Seems it did not assume banner role for header.

@eps1lon eps1lon added the bug Something isn't working label Oct 18, 2021
@eps1lon eps1lon mentioned this issue Oct 18, 2021
Merged
4 tasks
@eps1lon
Copy link
Member

eps1lon commented Oct 18, 2021

@all-contributors add @jrnail23 for bug

@allcontributors allcontributors bot mentioned this issue Oct 18, 2021
Merged
@allcontributors
Copy link
Contributor

@eps1lon

I've put up a pull request to add @jrnail23! 🎉

@jrnail23
Copy link
Author

Um, this is awkward...

I just ran into the same issue I had when I opened this bug a hundred years ago.
It's definitely not fixed:

Running @testing-library/react@16.2.0, @testing-library/jest-dom@6.6.3

import {render, screen} from '@testing-library/react';
import React from 'react';

test('find by banner role should only return the top-level header', () => {
  render(
    <React.Fragment>
      <header>
        <h1>2 Rooms</h1>
      </header>
      <main>
        <ul>
          <li>
            <header>
              <h2>Level 1</h2>
            </header>

            <h3>Ballroom A</h3>
          </li>
          <li>
            <header>
              <h2>Level 2</h2>
            </header>

            <h3>Ballroom C</h3>
          </li>
        </ul>
      </main>
    </React.Fragment>
  );
  expect(screen.getAllByRole('banner')).toHaveLength(1);
});

still fails like it did back then:


  ✕ find by banner role should only return the top-level header (32 ms)

  ● find by banner role should only return the top-level header

    expect(received).toHaveLength(expected)

    Expected length: 1
    Received length: 3
    Received array:  [<header><h1>2 Rooms</h1></header>, <header><h2>Level 1</h2></header>, <header><h2>Level 2</h2></header>]

      28 |     </React.Fragment>
      29 |   );
    > 30 |   expect(screen.getAllByRole('banner')).toHaveLength(1);
         |                                         ^
      31 | });
      32 |

      at Object.toHaveLength (mytest.test.tsx:30:41)

Please reopen this bug.

@jrnail23 jrnail23 mentioned this issue Feb 13, 2025
Open
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
Development

Successfully merging a pull request may close this issue.

feat: Use ARIA 1.2 for role queries IanVS/dom-testing-library
3 participants
@jrnail23 @eps1lon @jacklaurencegaray