feat(app): UX - session dock keyboard nav#16753
feat(app): UX - session dock keyboard nav#16753neriousy wants to merge 6 commits intoanomalyco:devfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds full keyboard navigation support to the question dock component in the desktop app. Users can now navigate options, select answers, and move between questions entirely using the keyboard, addressing issue #16752.
Changes:
- Adds keyboard event handling (
handleKeyDown) to the question dock supporting arrow keys (up/down for options, left/right for questions), Enter/Space for selection, and Home/End for jumping to first/last option - Adds keyboard shortcut hints UI in the dock footer, with translations across all 17 locale files
- Adds focus management (
focusOption,focusFirstOption) with retry logic,focus-visibleCSS styles, andcreateEffectto auto-focus the first option on tab change
Reviewed changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
packages/app/src/pages/session/composer/session-question-dock.tsx |
Core keyboard navigation logic: keydown handler, focus management, auto-focus effect, keyboard hint data, and type="button" additions |
packages/ui/src/components/message-part.css |
Focus-visible styles for question options, keyboard hints styling, and footer layout adjustments (gap, flex-wrap) |
packages/app/e2e/session/question-dock-keyboard.spec.ts |
New e2e test suite covering arrow navigation, Enter/Space selection, Home/End, multi-select toggling, and cross-question navigation |
packages/ui/src/i18n/*.ts (17 files) |
New translation keys for keyboard hint labels (move, select, prev, next, submit, save, newline, cancel, submit all, jump to question) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@neriousy Let's not put any keyboard hints at the bottom and also the selected state should look like other list selection states throughout the app (no blue outline) |
|
@adamdotdevin removed the outline & removed the hints. Updated also the showcase video I also noticed that on hard page refresh the answers are not persisted. Should I add it in a different pr? |
Issue for this PR
Closes #16752
Type of change
What does this PR do?
Adds keyboard navigation to question dock
If you paste a large clearly AI generated description here your PR may be IGNORED or CLOSED!
How did you verify your code works?
Screenshots / recordings
2026-03-09.16-22-39.mp4
Checklist
If you do not follow this template your PR will be automatically rejected.