Невозможно использовать getByRole для элемента списка с определенным именем - RTL

Question

Мои извинения, если это повторяющийся вопрос. Больше нигде я не нашел ответа.

Составная часть:

<ul>
  <li>Pending tasks</li>
</ul>

Код теста:

expect(getByRole("listitem", { name: "Pending tasks" })).toBeInTheDocument();

Ошибка:

TestingLibraryElementError: Unable to find an accessible element with the role "listitem" and name "Pending tasks"

Вот ссылка на codeandbox, чтобы воспроизвести это:https://codesandbox.io/s/wandering-browser-mrf78?file=/src/App.test.js

Несмотря на то, что отображается сообщение об ошибке "Невозможно найти", он по-прежнему предлагает мне теги li и ul в качестве доступных ролей.

Here are the accessible roles:
 --------------------------------------------------
  list:

  Name "":
  <ul />

  --------------------------------------------------
  listitem:

  Name "":
  <li />

Может кто-нибудь объяснить, что мне здесь не хватает? Я пробовал использовать сопоставители регулярных выражений, но не повезло.

Answer 1

А listitemназван Автором по спецификации (https://www.w3.org/TR/wai-aria-1.2/).

Имя автора определяется как

author: name происходит из значений, предоставленных автором в явных функциях разметки, таких как атрибут aria-label, атрибут aria-labelledby, или механизм маркировки основного языка, например атрибуты alt или title в HTML, с атрибутом заголовка HTML, имеющим самый низкий приоритет для указания альтернативного текста.

- https://www.w3.org/TR/wai-aria-1.2/

Это не значит, что вы должны присвоить ему ярлык "ария". Атрибуты aria следует добавлять только в том случае, если вы обнаружили проблему со вспомогательными технологиями.

Для вашего конкретного запроса я бы предложил getAllByRole('listitem').filter(listitem => listitem.textContent === 'Pending task').