Навигация по списку стрелками
Условие
Список <div role="listbox"> с элементами <div role="option" data-i>. В табуляцию попадает только активный элемент (tabIndex 0, остальные −1), стрелки ↓↑ двигают активность и переводят фокус, Home и End прыгают на края.
Что проверяют тесты
в табуляции только активный
стрелка вниз двигает активность и фокус
на краях не уходит за границу
Home и End
Как подойти
Стандартный приём доступности для списков, вкладок и меню: пользователь клавиатуры попадает в компонент одним Tab, а внутри ходит стрелками - иначе каждый из тысячи элементов пришлось бы проматывать табуляцией. Три составляющие: tabIndex 0 у активного и −1 у остальных, перевод фокуса при смене, preventDefault чтобы стрелки не прокручивали страницу.
Подсказки: 3
- Roving tabindex: в табуляции ровно один элемент, остальные −1.
- После смены активного элемента фокус надо перевести вручную.
- Ссылки на узлы удобно собирать в массив через колбэк-ref.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.