columnheader title of nested generic used for accessible name

[eps1lon]

Originally reported in testing-library/dom-testing-library#903 (comment) by @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

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]

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

The order of importance is:

1. screen readers
2. accname spec
3. browsers

It might just be that the browser calculation is wrong.

There are multiple ways you can help resolve this issue:

1. Investigate what screen readers announce
2. Investigate how accname would compute this name
3. add a test to

   dom-accessibility-api/sources/__tests__/accessible-name.js

   Lines 63 to 134 in d5ced52

   	test.each([
   	[
   	"cell",
   	`<div data-test role="cell"><em>greek</em> alpha</div>`,
   	"greek alpha",
   	],
   	[
   	"checkbox",
   	`<div data-test role="checkbox"><em>greek</em> beta</div>`,
   	"greek beta",
   	],
   	[
   	"columnheader",
   	`<div data-test role="columnheader"><em>greek</em> gamma</div>`,
   	"greek gamma",
   	],
   	[
   	"gridcell",
   	`<div data-test role="gridcell"><em>greek</em> delta</div>`,
   	"greek delta",
   	],
   	[
   	"legend",
   	`<fieldset><legend data-test><em>greek</em> zeta</legend></fieldset>`,
   	"greek zeta",
   	],
   	[
   	"menuitem",
   	`<li data-test role="menuitem"><em>greek</em> eta</li>`,
   	"greek eta",
   	],
   	[
   	"menuitemradio",
   	`<li data-test role="menuitemradio"><em>greek</em> theta</li>`,
   	"greek theta",
   	],
   	[
   	"menuitemcheckbox",
   	`<li data-test role="menuitemcheckbox"><em>greek</em> iota</li>`,
   	"greek iota",
   	],
   	[
   	"radio",
   	`<div data-test role="radio"><em>greek</em> kappa</div>`,
   	"greek kappa",
   	],
   	[
   	"row",
   	`<table><tbody><tr data-test><td>greek</td><td>lambda</td></tr></tbody></table>`,
   	"greek lambda",
   	],
   	[
   	"rowheader",
   	`<table><tbody><tr data-test><td data-test role="rowheader"><em>greek</em> mu</td></tr></tbody></table>`,
   	"greek mu",
   	],
   	[
   	"switch",
   	`<div data-test role="switch"><em>greek</em> nu</div>`,
   	"greek nu",
   	],
   	["tab", `<div data-test role="tab"><em>greek</em> xi</div>`, "greek xi"],
   	[
   	"tooltip",
   	`<div data-test role="tooltip"><em>greek</em> omicron</div>`,
   	"greek omicron",
   	],
   	[
   	"treeitem",
   	`<li data-test role="treeitem"><em>greek</em> pi</li>`,
   	"greek pi",
   	],

[nandastone]

• The Chrome Screen Reader extension appears to read the visible text i.e. "Animal".
• VoiceOver reads the title, matching dom-accessibility-api behaviour.

A novice reading of the accname spec appears to support dom-accessibility-api behaviour.

Happy to close this.

[eps1lon]

@nandastone Appreciate the investigation. Will check with NVDA and JAWS to confirm.

[eps1lon]

NVDA+Firefox reads: "Animal"
JAWS+Chrome reads: "Animal"
JAWS+IE11 reads: "Animal"

Will file an issue on accname to see what they say. It makes sense to compute "Animal" since that's the visible text.