Что такое правильная HTML и ARIA конструкция меню с флажками, который работает с J AWS?

Question

У меня есть меню, которое состоит из флажков, где пользователь выбирает одну или несколько вещей для отображения на экране. Моя HTML (Angular - директива *ngFor генерирует несколько блоков <li>) выглядит следующим образом:

<ul role="menu" [id]="'topic-menu' + i" [attr.aria-labelledby]="'topic-menu' + i + 'label'">
  <li
    [id]="'topic-option' + i + j"
    *ngFor="let measure of group.measures; let j = index"
    class="topic-option"
    role="none"
  >
    <input
      class="checkbox-input"
      type="checkbox"
      role="menuitemcheckbox"
      [attr.aria-labelledby]="'topic-select-input-label' + i + j"
      [name]="'group' + i + '-topic-menu'"
      [checked]="measure.selected"
      [id]="'topic-select-input' + i + j"
      (click)="onSelectCheckboxMultiple(measure, group.measures)"
    >
    <label
      [for]="'topic-select-input' + i + j"
      [id]="'topic-select-input-label' + i + j"
      class="topic-select-label"
    >
      {{ measure.measureName }}
    </label>
  </li>
</ul>

Когда я слушаю это, J AWS объявляет меню, списки количество предметов, и говорит «чтобы перемещаться по предметам, нажмите стрелку вверх или вниз». Однако пользователь не может использовать стрелки вверх или вниз, а вместо этого должен переключаться между флажками. Насколько я могу судить, это ожидаемое поведение флажков - см. Здесь: https://w3c.github.io/aria-practices/examples/checkbox/checkbox-1/checkbox-1.html).

Я не совсем понимаю, как мне следует изменить HTML на сделай J AWS и поведение попадет на ту же страницу. Вот пример меню, которое использует role = "menuitemcheckbox", и действительно, вы можете перемещаться по этим параметрам с помощью клавиш вверх / вниз, как указано в J AWS, но вы можете видеть, что они на самом деле не используют элементы input , https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html

Кажется, мне нужно выбрать между использованием role="menu" и использованием <input type="checkbox">, но я понятия не имею, какая стратегия является правильной. Обратите внимание, что я на самом деле не использую <form>, поэтому возможна опция <input>.

Кто-нибудь может предложить здесь руководство?