Shouldn't ByRole query find an element with display: none if I'm using hidden: true?

[felipecesr]

I want to get an element with display: none style using the bellow query:

// Component
 <button style={{ display: 'none' }}>Button</button>

// Testing
screen.getByRole('button', { name: /button/i, hidden: true })

getByRole can't find the element. But it works if I use getByText like that:

screen.getByText(/button/i)

Is this the expected behavior? And why?

[MatanBobi]

Hi @felipecesr, thanks for opening this.
As you can see in the output of the test, hidden attributes have no accessible name:

Here are the available roles:

  button:

  Name "":
  <button
    style="display: none;"
  />

This is following the spec, the problem is browsers sometimes don't follow the spec and that's why you can see an accessible name in Chrome for example.
I'm closing this as works by design since we're spec compliant here.