ByRole and hidden: true does not consider elements with visibility="hidden"

[JoseLion]

• @testing-library/dom version: 8.2.0
• Testing Framework and version: MochaJS v9.0.3
• DOM Environment: jsdom v17.0.0

Relevant code or config:

const { getByRole } = renderWithProviders(
  <div>
    <section style={{ visibility: "hidden" }}>
      <h1>{"Jane Doe"}</h1>
    </section>
  </div>
);

await waitFor(() => {
  getByRole("heading", { name: "Jane Doe", hidden: true }); // This times out :(
});

What you did:

I'm testing the presence of an element that has a parent with the style visibility: "hidden" using a ByRole query and the hidden option set to true.

Elements, including their descendent elements, that have host language semantics specifying that the element is not displayed, such as CSS display:none, visibility:hidden, or the HTML hidden attribute.

What happened:

The test failed and the element was not found by the byRole query when the parent (or even the specific element) has the visibility: "hidden" style

Reproduction:

I forked the sandbox, but to be honest it was behaving in kind of weird. Anyways, the issue is really easy to reproduce and here's the link:
https://codesandbox.io/s/react-testing-library-demo-forked-1s48z?file=/src/__tests__/hello.js

Problem description:

According to the documentation, the hidden behavior follows https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion, which says that elements are not included in the accessibility tree with CSS such as visibility: "hidden". So in this case, setting hidden to true should work 🙂

Suggested solution:

To be honest, I haven't checked the code or what the issue could be. But I'll be happy to help out and open a PR if someone can point me in the right direction 🙂

[eps1lon]

Duplicate of #846