Вкладки с клавиатурой
Условие
Вкладки из массива tabs: [{ id, label, content }]. Требования: · каждая вкладка - <button role="tab" data-id={id}> внутри <div role="tablist">; · активная имеет aria-selected="true", остальные "false"; · содержимое активной вкладки - в <div role="tabpanel">; · стрелки ← и → на tablist переключают вкладку по кругу; · первая вкладка активна по умолчанию.
Что проверяют тесты
первая активна
клик переключает
стрелка вправо переключает
стрелки ходят по кругу
панель одна
Как подойти
Индекс вместо id удобнее, потому что навигация стрелками - арифметика. Формула (i + delta + n) % n закрывает оба края разом. Доступность здесь не украшение, а часть задания: role, aria-selected и roving tabindex (активная вкладка tabIndex 0, остальные −1) - ровно то, чего ждут от senior.
Подсказки: 3
- Храни индекс активной вкладки - по нему удобно считать соседа.
- Круг получается остатком от деления: (i + delta + n) % n.
- Отрицательный остаток в JS отрицательный - поэтому и прибавляют длину.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.