GetByRole does not pickup accessibility name correctly from aria-labelledby with hidden children

[hwong0305]

• @testing-library/dom version: 10.0.0
• Testing Framework and version: vitest 0.34.6
• DOM Environment: Brave: 1.86.39 / Chromium: 144.0.7559.59

Relevant code or config:

Two examples of code failing:

<div>
      <button type="button" aria-labelledby="tooltip"><i class="fa-solid fa-file"></i></button>
      <span id="tooltip" role="tooltip" aria-hidden="true">
      <span hidden>Hidden</span>
      </span>
</div>

<div>
      <button type="button" aria-labelledby="tooltip"><i class="fa-solid fa-file"></i></button>
      <span id="tooltip" role="tooltip" aria-hidden="true">
      <span style="display: none">Hidden</span>
      </span>
</div>

What you did:

I was trying to debug why findByRole in Cypress testing library isn't getting a button by Carbon React. While trying to isolate the issue, I noticed that the browser will pick up the accessibility name but the dom-testing-library does not.

Surprisingly, there is a workaround for this in the form of just hiding the items via css as shown below

<div>
      <button type="button" aria-labelledby="tooltip"><i class="fa-solid fa-file"></i></button>
      <span id="tooltip" role="tooltip" aria-hidden="true">
        <span class="display-none">Hidden</span>
      </span>
</div>

.display-none {
    display: none
}

What happened:

I am expecting the test to pass but the test has failed

Reproduction:

https://stackblitz.com/edit/dtl-template-5rtk3g2m?file=src%2Fmain.test.ts

Problem description:

The testing library behavior does not reflect the behavior in the browser.

Suggested solution:

Look into getByRole implementation to reproduce and find a fix.