Skip to content

*ByRole reads hidden element names as "" #846

Open
@tpict

Description

@tpict
  • @testing-library/dom version: 7.28.1
  • Testing Framework and version: Jest 26.6.3
  • DOM Environment: jsdom 16.4.0

Relevant code or config:

import { render } from "@testing-library/react";
import { getByRole } from "@testing-library/dom";

const { container } = render(
  <>
    <input aria-label="Input" style={{ display: "none" }} />
    <button aria-label="Button" style={{ display: "none" }} />
  </>,
);

expect(
  getByRole(container, "textbox", { name: "Input", hidden: true }),
).toBeInTheDocument();
expect(
  getByRole(container, "button", { name: "Button", hidden: true }),
).toBeInTheDocument();

What you did:

Attempted to test the presence of accessible elements with display: none;

What happened:

The Testing Library error reporter claims the name of these elements is "" and fails to match them against the provided name:

    TestingLibraryElementError: Unable to find an element with the role "textbox" and name "Input"

    Here are the available roles:

      textbox:

      Name "":
      <input
        aria-label="Input"
        style="display: none;"
      />

      --------------------------------------------------button:

      Name "":
      <button
        aria-label="Button"
        style="display: none;"
      />

      --------------------------------------------------

Reproduction:

Hopefully the provided code is sufficient, let me know if not

Problem description:

The example I've given is a little simplified–the real code I'm testing contains elements that are visible in desktop-width viewports, and if I understand correctly media query parsing is out-of-scope for Testing Library–but the issue is the same: these elements will become part of the accessibility tree under certain circumstances and I'm ignoring their invisibility in order to check that they have the correct accessible names. I would expect that I'd be able to do that with the hidden: true option set.

Suggested solution:

I don't have the time to spare to figure out the cause of this right now :( it might be related to recent changes around #804 ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions