From da2780b2400c53cb038f426dba18c797f3a80bab Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Wed, 21 Oct 2026 18:25:28 -0400
Subject: [PATCH] fix(a11y): screen readers read the model the arrow keys are
 on in the model picker (#32886)

---
 src/lib/components/chat/ModelSelector/ModelItem.svelte |  1 +
 src/lib/components/chat/ModelSelector/Selector.svelte  | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/src/lib/components/chat/ModelSelector/ModelItem.svelte b/src/lib/components/chat/ModelSelector/ModelItem.svelte
index 569a2a3218..a8ab4355cb 100644
--- a/src/lib/components/chat/ModelSelector/ModelItem.svelte
+++ b/src/lib/components/chat/ModelSelector/ModelItem.svelte
@@ -55,6 +55,7 @@
 </script>
 
 <button
+	id="model-option-{index}"
 	role="option"
 	aria-selected={isSelected}
 	aria-label={$i18n.t('Select {{modelName}} model', { modelName: item.label })}
diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index ad8c1ba8fa..92a7b792d7 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -944,6 +944,13 @@
 								placeholder={searchPlaceholder ?? $i18n.t('Search a model')}
 								autocomplete="off"
 								aria-label={$i18n.t('Search In Models')}
+								role="combobox"
+								aria-autocomplete="list"
+								aria-expanded={filteredItems.length + downloadTargets.length > 0}
+								aria-controls="model-selector-list"
+								aria-activedescendant={filteredItems.length + downloadTargets.length > 0
+									? `model-option-${selectedModelIdx}`
+									: undefined}
 								on:keydown={(e) => {
 									if (e.code === 'Enter') {
 										if (selectedModelIdx >= filteredItems.length) {
@@ -1064,6 +1071,7 @@
 							<div
 								class="min-h-0 flex-1 overflow-y-auto"
 								style="max-height: 18rem;"
+								id="model-selector-list"
 								role="listbox"
 								aria-label={$i18n.t('Available models')}
 								bind:this={listContainer}
@@ -1107,6 +1115,7 @@
 									placement="top-start"
 								>
 									<div
+										id="model-option-{filteredItems.length + targetIndex}"
 										role="option"
 										aria-selected={selectedModelIdx === filteredItems.length + targetIndex}
 										data-arrow-selected={selectedModelIdx === filteredItems.length + targetIndex}
@@ -1159,6 +1168,7 @@
 								<Tooltip content={target.actionLabel} placement="top-start">
 									<button
 										type="button"
+										id="model-option-{filteredItems.length + targetIndex}"
 										role="option"
 										aria-selected={selectedModelIdx === filteredItems.length + targetIndex}
 										data-arrow-selected={selectedModelIdx === filteredItems.length + targetIndex}