Feature Request
Add comprehensive keyboard navigation support to the Thread component's message list, enabling users to navigate through messages without a mouse.
Background
The packages/react/src/primitives/thread/ components currently render a scrollable list of messages via ThreadMessages.tsx and ThreadViewport.tsx. This feature adds accessibility-focused keyboard navigation.
Requirements
1. Navigation Keys
- Arrow Up/Down: Move focus to previous/next message
- Home: Jump to first message
- End: Jump to last message
- Page Up/Page Down: Move focus by ~5 messages (or viewport height)
2. Focus Management
- Add
tabIndex and focus handling to MessageRoot.tsx
- Visual focus indicator (ring/outline) when message is focused
- Focus should follow scroll (auto-scroll to focused message)
- Initial focus should be on the most recent message when entering the list
3. Accessibility (ARIA)
role="listbox" on the message container
role="option" on individual messages
aria-activedescendant for current focus
aria-label for screen reader context
4. Integration Points
Files likely to be modified:
packages/react/src/primitives/thread/ThreadMessages.tsx
packages/react/src/primitives/thread/ThreadViewport.tsx
packages/react/src/primitives/message/MessageRoot.tsx
- Possibly create a new hook:
useThreadKeyboardNavigation.tsx
Acceptance Criteria
Non-Goals
- This PR does NOT implement:
- Message content editing via keyboard
- Keyboard shortcuts for actions (copy, delete, etc.)
- Vim-style navigation (j/k)
Example Usage
// Should work automatically when using Thread.Viewport
<Thread.Root>
<Thread.Viewport>
<Thread.Messages /> {/* Now keyboard navigable */}
</Thread.Viewport>
<Composer />
</Thread.Root>
Testing Notes
Test keyboard navigation:
- Tab into the message list
- Press Down Arrow - should focus first/next message
- Press Up Arrow - should focus previous message
- Press Home - should focus first message
- Press End - should focus last message
- Verify screen reader announces "Message X of Y"
Feature Request
Add comprehensive keyboard navigation support to the Thread component's message list, enabling users to navigate through messages without a mouse.
Background
The
packages/react/src/primitives/thread/components currently render a scrollable list of messages viaThreadMessages.tsxandThreadViewport.tsx. This feature adds accessibility-focused keyboard navigation.Requirements
1. Navigation Keys
2. Focus Management
tabIndexand focus handling toMessageRoot.tsx3. Accessibility (ARIA)
role="listbox"on the message containerrole="option"on individual messagesaria-activedescendantfor current focusaria-labelfor screen reader context4. Integration Points
Files likely to be modified:
packages/react/src/primitives/thread/ThreadMessages.tsxpackages/react/src/primitives/thread/ThreadViewport.tsxpackages/react/src/primitives/message/MessageRoot.tsxuseThreadKeyboardNavigation.tsxAcceptance Criteria
Non-Goals
Example Usage
Testing Notes
Test keyboard navigation: