Можно ли и правильно ли будет указывать в атрибуте role несколько значений?

Question

[Drovosek01]

Есть веб-приложение на Angular 11. Возникли вопросы по поводу доступности.

Есть список элементов. На каждом элементе действует прослушка клика и по клику происходят разные проверки и в зависимости от условий идет роутинг на разную часть приложения.

<ol>
  <li *ngFor="let item of list$ | async" (click)="doSomething(basis)">
    {{ item }}
  </li>
</ol>

Пытаюсь сделать это более доступным как с точки зрения семантики, так и для удобного доступа с клавиатуры.
Я пробовал {{ item }} обернуть в тег "a", с атрибутом "href" без значения или просто с решеткой или без этого атрибута вообще, но этот вариант не подходит, потому что при достижении такого элемента с помощью кнопки Tab и по нажатию Enter выполняется не эмуляция клика, а именно переход по ссылке, которая указана в href, а если этого атрибута нет, то вообще ссылка не ловит фокус табом.

Решил на тег "li" Добавить эти атрибуты tabindex="0" role="link listitem", но я нигде не видел примеров, что в атрибуте "role" можно указывать несколько значений.
Можно ли так делать? Какие есть альтернативы?

Answer 1

[WapSter]

Можно, screen reader прочтет все, что там написано вот и все.

Comments

[Drovosek01]

А значения в role указывать через пробел или через запятую?

[WapSter]

Drovosek01, как захочешь, это просто строка

[Drovosek01]

Mellorn, если есть вариант лучше, я бы с удовольствием на него посмотрел...

[Drovosek01]

Mellorn, спасибо за развернутый ответ, я как раз так и сделал, + добавил выполнение того же метода на событие "(keyup.enter)", чтобы с клавиатуры можно было активировать эту функцию.