Skip to content

fix(vscode): improve screen reader model navigation - #11352

Merged
marius-kilocode merged 1 commit into
mainfrom
fix-a11y-model-navigation
Jun 17, 2026
Merged

fix(vscode): improve screen reader model navigation#11352
marius-kilocode merged 1 commit into
mainfrom
fix-a11y-model-navigation

Conversation

@marius-kilocode

@marius-kilocode marius-kilocode commented Jun 17, 2026

Copy link
Copy Markdown
Collaborator

PR #10688 established the initial combobox and listbox semantics for the VS Code model picker. Follow-up accessibility testing by a blind user found that two essential workflows were still blocked:

  • Entering a provider initial, such as N for NVIDIA, updated the rendered results but did not move virtual screen-reader focus. The screen reader continued announcing the previously active option instead of a matching result.
  • Provider headings were pointer-operated controls outside the listbox navigation sequence. They could not be reached and collapsed with standard arrow-key navigation, so reaching the next provider could require traversing hundreds of models.

A grouped listbox cannot coherently represent provider headings that are both navigable parents and expandable controls. This change uses the ARIA editable-combobox-with-tree pattern instead. Provider headings are tree items with announced expanded or collapsed state, while models and the clear or default entry are child tree items. Navigation is derived from the currently visible tree, so aria-activedescendant always references a rendered node after filtering, collapsing, favorite changes, or provider updates.

The keyboard behavior follows tree conventions: Up and Down traverse visible items, Left moves to a parent or collapses it, Right expands a provider or enters its first model, Home and End move to the visible edges, Enter toggles a provider or commits a model, and Escape cancels without changing the selection. Filtering moves virtual focus to a visible matching model. Native text editing remains intact until tree navigation begins, so Left, Right, Home, End, Backspace, and Delete continue to work normally in the editable search field.

Favorites, duplicate favorite rows, clear or default selection, expanded preview behavior, pointer selection, and /model focus restoration remain predictable under the same interaction model. No Agent Manager-specific UI components are changed.

Follow-up to #10688.

@kilo-code-bot

kilo-code-bot Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (5 files)
  • .changeset/fix-model-picker-navigation.md
  • packages/kilo-vscode/tests/model-selector-accessibility.spec.ts
  • packages/kilo-vscode/webview-ui/src/components/shared/ModelSelector.tsx
  • packages/kilo-vscode/webview-ui/src/stories/shared.stories.tsx
  • packages/kilo-vscode/webview-ui/src/styles/model-selector.css

Reviewed by deepseek-v4-pro-20260423 · 257,026 tokens

Review guidance: REVIEW.md from base branch main

@marius-kilocode
marius-kilocode merged commit 97f115d into main Jun 17, 2026
23 checks passed
@marius-kilocode
marius-kilocode deleted the fix-a11y-model-navigation branch June 17, 2026 13:42
t7tran pushed a commit to t7tran/kilocode that referenced this pull request Aug 14, 2026
…tion

fix(vscode): improve screen reader model navigation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants