Skip to content

Conversation

@planger
Copy link
Contributor

@planger planger commented Jan 15, 2026

What it does

This PR enhances the accessibility of the AI Chat UI by implementing keyboard navigation and ARIA attributes:

Focus Navigation Commands:

  • Adds ai-chat.focus-input command (Ctrl/Cmd+Down) to move focus from the chat responses to the input
  • Adds ai-chat.focus-response command (Ctrl/Cmd+Up) to move focus from the input to the chat responses
  • Commands are scoped via context keys (chatInputFocus, chatResponseFocus) to only activate when relevant

ARIA Improvements:

  • Adds aria-label to the chat input editor ("Type your message here")
  • Adds aria-label to the chat response tree widget ("Chat responses")
  • Adds aria-label to individual chat nodes ("Your message" / "Response from {agent}")
  • Adds role="article" to chat message nodes
  • Adds role="status" and aria-live="polite" to progress indicators ("Generating", "Waiting for input")
  • Adds role="button", aria-label, and tabIndex to toolbar actions and input option buttons

Keyboard Accessibility:

  • Chat input option buttons (attach context, send, cancel) now respond to Enter and Space keys
  • Toolbar action buttons in chat responses now respond to Enter key
  • DOM order adjusted for logical tab sequence (send button first when enabled), with CSS order for visual positioning

How to test

  1. Open the AI Chat view
  2. Test keyboard navigation:
    • Focus the chat input, type a message, and press Enter to send
    • With focus in the input, press Ctrl+Up (Cmd+Up on Mac) → focus should move to the response area
    • With focus in the response area, press Ctrl+Down (Cmd+Down on Mac) → focus should return to input
  3. Test button keyboard accessibility:
    • Write a message and push Tab-Enter to send → focus should to to send button, execute it and then go back to chat input
    • Tab to the "Attach elements to context" button (+) and press Enter or Space → context picker should open
    • Tab to the Send button and press Enter or Space → message should send (if input is not empty)

Follow-ups

Breaking changes

  • This PR introduces breaking changes and requires careful review. If yes, the breaking changes section in the changelog has been updated.

Attribution

Review checklist

Reminder for reviewers

@github-project-automation github-project-automation bot moved this to Waiting on reviewers in PR Backlog Jan 15, 2026
@planger planger requested a review from ndoschek January 15, 2026 12:48
Copy link
Member

@ndoschek ndoschek left a comment

Choose a reason for hiding this comment

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

Thank you Philip for this improvement! I tested the accessibility via keyboard and this works very well for me! 👍

I observed a few minor things, but it would also be fine be me to merge this as is and address them in a follow up if needed/reasonable:

  • Some selections (e.g. the user input using the @AskAndContinue agent or the Jump to latest message arrow button) can be selected via tab, but do not accept enter to trigger, Space works though, but I would expect Enter to work as well.
  • The toolbar actions (e.g. retry on a failed request or edit message) on a chat message cannot be selected via Tab when they are hidden which is the default, if the mouse cursor is hovering the message for example it can be selected
  • When I tab backwards and up in the chat thread I would expect after reaching the first message (or the entire response area) that I can also select the toolbar buttons in the title (e.g. to start a new Chat or access the history).

Comment on lines +521 to +522
? nls.localize('theia/ai/chat-ui/yourMessage', 'Your message')
: nls.localize('theia/ai/chat-ui/responseFrom', 'Response from {0}', this.getAgentLabel(node));
Copy link
Member

Choose a reason for hiding this comment

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

Just a question: I am not too familiar with screen readers, but would it be beneficial to number the messages in some way to be able to reference specific messages?
E.g. "Message 3, Your message", or "Message 4, Response from {0}"

@github-project-automation github-project-automation bot moved this from Waiting on reviewers to Needs merge in PR Backlog Jan 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Needs merge

Development

Successfully merging this pull request may close these issues.

3 participants