Как перемещаться между кнопками с помощью клавиш со стрелками на клавиатуре? - PullRequest
Новая
       47

Как перемещаться между кнопками с помощью клавиш со стрелками на клавиатуре?

1 голос
/ 26 марта 2020

У меня есть html структура, подобная этой 

<div class="my-class" role="tablist" aria-label="upcoming week">
  <button id="Thu" class="title-box" role="tab" aria-controls="Thu-tab" aria-selected="false">Thu </button>
  <button id="Fri" class="title-box selected" role="tab" tabindex="0" aria-controls="Fri-tab" aria-selected="true">Fri</button>
  <button id="Sat" class="title-box" role="tab" tabindex="0" aria-controls="Sat-tab" aria-selected="false">Sat</button>
  <button id="Sun" class="title-box" role="tab" tabindex="0" aria-controls="Sun-tab" aria-selected="false">Sun</button>
  <button id="Mon" class="title-box" role="tab" tabindex="0" aria-controls="Mon-tab" aria-selected="false">Mon</button>
  <button id="Tue" class="title-box" role="tab" tabindex="0" aria-controls="Tue-tab" aria-selected="false">Tue</button>
  <button id="Wed" class="title-box" role="tab" tabindex="0" aria-controls="Wed-tab" aria-selected="false">Wed</button>
</div>

С помощью клавиши на клавиатуре я могу перейти к следующей кнопке. Но с клавишами со стрелками на клавиатуре это не работает.

Можно ли перемещаться между этими кнопками с помощью клавиш со стрелками на клавиатуре для перемещения вперед или назад?

Какие атрибуты мне не хватает для клавиш со стрелками на клавиатуре

1 Ответ

0 голосов
/ 26 марта 2020

Вы ничего не забыли. Навигация с помощью клавиш со стрелками не предоставляется автоматически по умолчанию. Вам нужно будет реализовать это самостоятельно.

Примеры и рекомендации вы найдете во многих местах в Интернете, например на этой странице: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

Если вы используете Angular, vueJS, React или другой подобный фреймворк, обратите внимание на поддержку клавиатуры их компонентов. Некоторые из них очень хорошо доступны с клавиатуры, но большинство - нет.

...