`getByRole("option", { name: "..." })` does not match element contents

[TrevorRice]

• @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!

[github-actions[bot]]

Uh oh! @TrevorRice, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[TrevorRice]

Apologies, this turned out to an issue with how we were using a Floating UI hook.