getByRole can't find button by name if title is ""

[EvgenyOrekhov]

• @testing-library/dom version: 7.22.2
• Testing Framework and version: Jest (whatever version comes with CodeSandbox)
• DOM Environment: whatever version comes with CodeSandbox

Relevant code or config:

import React from "react";

export default function App() {
  return <button title="">OK</button>;
}

What you did:

screen.getByRole("button", { name: /ok/i });

What happened:

Unable to find an accessible element with the role "button" and name `/ok/i`

Here are the accessible roles:

  button:

  Name "":
  <button
    title=""
  />

Reproduction:

https://codesandbox.io/s/happy-chandrasekhar-311qt?file=/src/App.js

Problem description:

Chrome reports that the button has a name:

But getByRole says it does not.

JSFiddle: https://jsfiddle.net/91retmv2/

Suggested solution:

[EvgenyOrekhov]

Firefox also reports that the button has a name.

[eps1lon]

Thanks for the report. Will take a look at it over at eps1lon/dom-accessibility-api#393

[kentcdodds]

🎉 This issue has been resolved in version 7.22.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀