Skip to content

feat(app): UX - session dock keyboard nav#16753

Open
neriousy wants to merge 6 commits intoanomalyco:devfrom
neriousy:feat/question-dock-keyboard-nav
Open

feat(app): UX - session dock keyboard nav#16753
neriousy wants to merge 6 commits intoanomalyco:devfrom
neriousy:feat/question-dock-keyboard-nav

Conversation

@neriousy
Copy link
Contributor

@neriousy neriousy commented Mar 9, 2026

Issue for this PR

Closes #16752

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

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?

  1. Ask agent to ask you a question using question tool
  2. Use keyboard navigation

Screenshots / recordings

2026-03-09.16-22-39.mp4

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

If you do not follow this template your PR will be automatically rejected.

Copilot AI review requested due to automatic review settings March 9, 2026 13:54
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-visible CSS styles, and createEffect to 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.

@adamdotdevin
Copy link
Member

@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)

@neriousy neriousy marked this pull request as draft March 9, 2026 15:15
@neriousy neriousy marked this pull request as ready for review March 9, 2026 15:23
@neriousy
Copy link
Contributor Author

neriousy commented Mar 9, 2026

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE]: question dock - keyboard navigation

3 participants