`findByRole` does not find accessibility name from `aria-labelledby` if element has hidden children elements.

[hwong0305]

Running Cypress tests with react/carbon buttons, the findByRole feature does not find the name from tooltips without triggering the tooltip. This only works for the item with the tooltip triggered.

Upon further investigation, I am able to determine that it can be reproduced with the code below.

<button type="button" aria-labelled-by="item-id">Some Icon</button>
<span id="item-id" aria-hidden="true">
<span class="display-none">Export</span>

With the following CSS:

.display-none: {
    display: none
}

This is a bug on Cypress Testing Library side since the browser and React Testing Library are able to find the element by the role and accessibility name but Cypress cannot. I have reproduced the issue in this repository.

You can start the app with npm run dev and npm run test to run vitest with react testing library and npm run cy:open to run the cypress version.

[hwong0305]

I updated the repo to offer more clarity.