fix(vscode): make model selection accessible to screen readers

[marius-kilocode]

Screen reader users cannot reliably choose models in the VS Code webview because the searchable selector retains focus in an input while moving only a visual option highlight. Model selectors in settings also expose a chosen value without reliably identifying which setting is being changed.

This change makes the shared model selector a labelled searchable combobox/listbox interaction with stable active-option announcements during keyboard navigation. Enter and Escape retain predictable select and dismiss behavior, empty/default states and preview controls are exposed to assistive technology, favorite actions no longer conflict with option semantics, and settings or mode-override selectors identify their specific purpose and description.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Overview

All three issues from the CHANGES_REQUESTED review have been addressed in the new commits (fix(vscode): preserve model preview interactions + baseline update):

1. aria-hidden + focusable content — Resolved. The preview is now wrapped in <Show when={expanded()}>, so ModelPreview is unmounted (not just hidden) when collapsed. No focusable children exist in the hidden preview region.

2. Single-click preview-before-select in expanded mode — Resolved. The onClick handler in expanded mode now only calls setRow/setPreviewKey (preview), not selectRow. Selection requires either double-click or the explicit Select: <name> button (shown when expanded() && preActive() && !isActive(model)). The test "expanded preview waits for explicit pointer selection" covers this path.

3. Group separator CSS regression — Resolved. The selector was updated from .model-selector-group-label:not(:first-child) to .model-selector-group:not(:first-child) > .model-selector-group-label, which correctly applies to the new role="group" wrapper structure.

Files Reviewed (11 files)

• .changeset/clear-model-navigation.md
• packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/settings/models-accessible-labels-chromium-linux.png
• packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/shared/model-selector-accessible-chromium-linux.png
• packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/shared/model-selector-selected-favorite-chromium-linux.png
• packages/kilo-vscode/tests/model-selector-accessibility.spec.ts
• packages/kilo-vscode/webview-ui/src/components/settings/ModeEditView.tsx
• packages/kilo-vscode/webview-ui/src/components/settings/ModelsTab.tsx
• packages/kilo-vscode/webview-ui/src/components/shared/ModelSelector.tsx — all prior issues resolved
• packages/kilo-vscode/webview-ui/src/stories/settings.stories.tsx
• packages/kilo-vscode/webview-ui/src/stories/shared.stories.tsx
• packages/kilo-vscode/webview-ui/src/styles/model-selector.css

---

_{Reviewed by claude-sonnet-4.6 · 828,753 tokens}

_{Review guidance: REVIEW.md from base branch main}

[kilo-code-bot]

Regression-focused subagent review: please address these confirmed selector regressions before merge.

1. packages/kilo-vscode/webview-ui/src/components/shared/ModelSelector.tsx now sets aria-hidden={!expanded()} on the always-mounted preview. ModelPreview contains focusable favorite controls and can include links; when collapsed those controls can still receive keyboard focus while being removed from the accessibility tree. Do not render them while collapsed or make the hidden subtree inert/non-focusable, and add a collapsed-tab-order test.

2. The same file replaces expanded-mode preview behavior with onClick={() => selectRow(row)} for every model option and removes the explicit select affordance. A pointer user expanding the picker to inspect model details now applies a model and closes on one click instead of previewing before committing. Preserve a preview-before-select path in expanded mode and test it.

3. The new role=\"group\" wrapper makes every .model-selector-group-label its container's first child, so existing .model-selector-group-label:not(:first-child) separators no longer render. Update the group separator selector/layout to preserve visual grouping.

Findings were addressed in the follow-up commit and the updated bot review reports no issues found.