`ByRole` query gets empty accessible name for `li` elements

• @testing-library/dom version: 8.1.0
• Testing Framework and version: jest v26.6.0
• DOM Environment: jsdom v26.6.2
• Node version: 14.15.4

Relevant code or config:

import { getByRole } from '@testing-library/dom';

function getExampleDOM() {
  const root = document.createElement('div');

  root.innerHTML = `
    <ul>
      <li>Item A</li>
      <li>Item B</li>
    </ul>
  `;

  return root;
}

test('should render list items', () => {
  const container = getExampleDOM();
  getByRole(container, 'list');

  // the following query fails since it can't find a listitem element with provided accessible name
  getByRole(container, 'listitem', { name: /item a/i });
});

What you did:

I’m trying to query a specific li element using ByRole query + accessible name.

What happened:

DOM Testing Library returns 0 elements matching the query since it can’t find any accessible name for the li elements:

Reproduction:

I forked dom-testing-library-template and reproduced the issue. You can find it here: https://github.com/Belco90/dom-testing-library-template/blob/main/src/__tests__/index.test.js

Problem description:

Correct me if I’m wrong, but li child should be its accessible name if it is a static text:

Suggested solution:

Not really sure where the problem is located, to be honest.

[eps1lon]

Also see https://github.com/w3c/aria/issues/1117 where it’s explained in more detail why naming of listitem requires a lot of nuance (e.g. listitems containing lots of text).

[silvenon]

Just wanted to say thanks for this great explanation @eps1lon! 🥇