Files
ridebus-board/artifacts/verification-settings-remote.md
Zakhar Timoshenko 5971da3fc9 feat: implement remote settings navigation and focus management
- Added `useSettingsNavigation.ts` for handling remote control navigation within settings.
- Introduced `arrowDirection` and `directionalFocusIndex` functions in `remote.mjs` to manage directional input and focus transitions.
- Created a new markdown file `verification-settings-remote.md` documenting the changes and testing outcomes.
- Developed comprehensive tests for arrow key functionality and focus behavior in `remote.test.mjs`.
- Ensured compatibility with standard keys and legacy key codes, maintaining expected navigation behavior across different screen resolutions.
2026-10-09 21:54:07 +03:00

3.9 KiB
Raw Blame History

Управление настройками с пульта — 9 октября 2026

Изменены SettingsPanel.tsx и стили; добавлены useSettingsNavigation.ts, геометрический выбор фокуса lib/remote.mjs и три теста. Проверка выполнена на production-сборке в браузере с клавишами направления и Enter. Физический телевизор и конкретная модель пульта не проверялись.

  • npm run build: TypeScript и Vite проходят. npm test: 48/48. Новые тесты проверяют обычные/старые коды стрелок, переходы по строкам и колонкам и границы без циклических скачков.
  • 1280×720: настройки открываются с фокусом на закрытии. Стрелка вниз проходит остановку, фильтр маршрутов, переключатели, тему, палитру и параметры до нижних кнопок. Значения списков при навигации не меняются.
  • При переходе к «Сохранить» прокрутка ≈901,5 px. Кнопка заканчивается на y≈683,2 при нижней границе диалога y=704; она полностью видима и имеет акцентную рамку фокуса.
  • 879×593: тот же сценарий только стрелками достигает «Сохранить», прокрутка ≈1028,5 px. Нижняя граница кнопки y≈556,2, диалога y=577.
  • Enter на остановке включает изменение. Следующая стрелка меняет выбранную остановку и обновляет React-состояние: зависимый фильтр маршрутов отключается. Повторный Enter завершает изменение; навигация пропускает отключённое поле. Escape закрывает меню без сохранения; исходная остановка сохраняется.
  • Числовое поле: Enter, ArrowUp меняет 25 на 26; ArrowDown возвращает 25. Значение обновляется и в DOM, и в контролируемом React-поле. Enter завершает изменение; ArrowRight переводит фокус на соседнее поле интервала.
  • Enter на рекламном переключателе включает его в черновике. Следующая стрелка достигает появившегося поля заголовка. Escape сначала завершает редактирование, второй Escape закрывает меню без сохранения.
  • End достигает «Сохранить». PageUp прокручивает меню с ≈894,5 до 387 px, PageDown — до ≈901,5 px. Enter на сохранении закрывает диалог. Проверенные сохранённые значения остаются исходными: остановка 1, все маршруты, интервалы 25/8, 4 рейса, тёмная тема.
  • Tab возвращает обычное управление: фокус на первом select, режим пульта выключен. Мышь/касание также выключают режим пульта, сохраняя стандартное поведение полей.
  • После проверки тестовые изменения отменены, меню закрыто; обычный цикл табло продолжается. Ошибок браузера при проверке не обнаружено.

Снимки: settings-remote-navigation-1280x720.jpg, settings-remote-navigation-879x593.jpg.