*ByRole() accessible name is incorrect for nested element with a title attribute

[nandastone]

• @testing-library/react version: 9.2.0
• Testing Framework and version: codesandbox.io Jest
• DOM Environment:

Relevant code or config:

<th>
  <span title="Test title">Animal</span>
</th>

const columnHeader = screen.getByRole("columnheader", {
  name: /Animal/i
});

Test output:

Unable to find an accessible element with the role "columnheader" and name `/Animal/i`

Here are the accessible roles:
--------------------------------------------------
  columnheader:

  Name "Test title":
  <th />

What you did:

Attempt to select a column heading by role, using the element text as the accessible name.

What happened:

react-testing-library determines the accessible name as the title attribute of the <span /> element wrapping the element text. Testing across various browsers determines the accessible name should in fact be the element text.

Reproduction:

https://codesandbox.io/s/react-testing-library-demo-forked-1xe1w?file=/src/__tests__/hello.js

Problem description:

I wrap my column headings in <span title="" /> to provide tooltips. Instead of selecting the column heading by the text visible to the end user, I need to use tooltip text which is not yet visible.

Suggested solution:

Mirror browser calculation of the accessible name, or at least provide a way to configure how the name is matched in byRole().

[eps1lon]

Transferring to eps1lon/dom-accessibility-api#554 since that package is responsible for the calculation