• @testing-library/dom version: 8.13.0
• @testing-library/jest-dom version: 5.16.4
• @testing-library/react version: 13.2.0

Relevant code or config:

I have an Option component that simply wraps its children in a <div role="option">:

const Option = (props) => { return <div id="..." role="option" aria-selected="...">{props.children}</div> } // DOM <div id="..." role="option" aria-selected="...">Dog</div>

What you did:

I've been trying to query for a specific option via getByRole in my unit tests:

getByRole("option", { name: "Dog" })

What happened:

I receive the following error:

TestingLibraryElementError: Unable to find an element with the role "option" and name "Dog" Here are the available roles: ... -------------------------------------------------- option: Name "": <div aria-selected="false" id=":r3l:" role="option" /> 

Despite the element's accessible name being "Dog" as demonstrated by inspecting the accessibility tree:

Reproduction:

Problem description:

getByRole does not seem to respect an element's accessible name when not explicitly defined via a method like aria-label or aria-labelledby.

Suggested solution:

I would expect the name option to respect an element's accessible name regardless of how it was constructed.

Please let me know if I'm totally overlooking something!