From e5435c648088fdf807ff506f922f48f37d16ffd4 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 2 Jul 2025 08:46:32 +0200
Subject: [PATCH 1/5] high contrast mode on model selector to enhance
 accessibility

---
 src/lib/components/chat/ModelSelector/Selector.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index 98e039e9e4..d3f18dff56 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -346,12 +346,17 @@
 	closeFocus={false}
 >
 	<DropdownMenu.Trigger
-		class="relative w-full font-primary"
+		class="relative w-full font-primary {($settings?.highContrastMode ?? false)
+			? ''
+			: 'outline-hidden focus:outline-hidden'}"
 		aria-label={placeholder}
 		id="model-selector-{id}-button"
 	>
 		<button
-			class="flex w-full text-left px-0.5 outline-hidden bg-transparent truncate {triggerClassName} justify-between font-medium placeholder-gray-400 focus:outline-hidden"
+			class="flex w-full text-left px-0.5 bg-transparent truncate {triggerClassName} justify-between font-medium {($settings?.highContrastMode ??
+			false)
+				? 'dark:placeholder-gray-100 placeholder-gray-800'
+				: 'placeholder-gray-400'}"
 			on:mouseenter={async () => {
 				models.set(
 					await getModels(

From bed2c7e34f5988bb4646f6a81190596fd154bb35 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 2 Jul 2025 08:56:17 +0200
Subject: [PATCH 2/5] remove nested buttons, as this is not valid html

---
 src/lib/components/chat/ModelSelector/Selector.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index d3f18dff56..c721d4c444 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -352,7 +352,7 @@
 		aria-label={placeholder}
 		id="model-selector-{id}-button"
 	>
-		<button
+		<div
 			class="flex w-full text-left px-0.5 bg-transparent truncate {triggerClassName} justify-between font-medium {($settings?.highContrastMode ??
 			false)
 				? 'dark:placeholder-gray-100 placeholder-gray-800'
@@ -365,7 +365,6 @@
 					)
 				);
 			}}
-			type="button"
 		>
 			{#if selectedModel}
 				{selectedModel.label}
@@ -373,7 +372,7 @@
 				{placeholder}
 			{/if}
 			<ChevronDown className=" self-center ml-2 size-3" strokeWidth="2.5" />
-		</button>
+		</div>
 	</DropdownMenu.Trigger>
 
 	<DropdownMenu.Content

From 64b583dc290ad7a2d742584f377f41f05d67dbb3 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 2 Jul 2025 08:56:56 +0200
Subject: [PATCH 3/5] add margin to make outline visible

---
 src/lib/components/chat/ModelSelector.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
index 3c10c267c4..f46b05dffc 100644
--- a/src/lib/components/chat/ModelSelector.svelte
+++ b/src/lib/components/chat/ModelSelector.svelte
@@ -49,7 +49,7 @@
 	{#each selectedModels as selectedModel, selectedModelIdx}
 		<div class="flex w-full max-w-fit">
 			<div class="overflow-hidden w-full">
-				<div class="mr-1 max-w-full">
+				<div class="m-1 max-w-full">
 					<Selector
 						id={`${selectedModelIdx}`}
 						placeholder={$i18n.t('Select a model')}

From 6a644cd03a0470e6517bd21599b786c4f7117e37 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 2 Jul 2025 08:57:15 +0200
Subject: [PATCH 4/5] aria hidden on svg, as this is decorative

---
 src/lib/components/icons/ChevronDown.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/icons/ChevronDown.svelte b/src/lib/components/icons/ChevronDown.svelte
index 16686ea3a3..c3d3fd4470 100644
--- a/src/lib/components/icons/ChevronDown.svelte
+++ b/src/lib/components/icons/ChevronDown.svelte
@@ -10,6 +10,7 @@
 	stroke-width={strokeWidth}
 	stroke="currentColor"
 	class={className}
+	aria-hidden="true"
 >
 	<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
 </svg>

From d7f247d7d2e7de5a5a80b3853960b2298f179ed8 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 2 Jul 2025 09:55:47 +0200
Subject: [PATCH 5/5] make margin depend on high contrast mode, based on
 comment on pr

---
 src/lib/components/chat/ModelSelector.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
index f46b05dffc..b215ad5896 100644
--- a/src/lib/components/chat/ModelSelector.svelte
+++ b/src/lib/components/chat/ModelSelector.svelte
@@ -49,7 +49,7 @@
 	{#each selectedModels as selectedModel, selectedModelIdx}
 		<div class="flex w-full max-w-fit">
 			<div class="overflow-hidden w-full">
-				<div class="m-1 max-w-full">
+				<div class="max-w-full {($settings?.highContrastMode ?? false) ? 'm-1' : 'mr-1'}">
 					<Selector
 						id={`${selectedModelIdx}`}
 						placeholder={$i18n.t('Select a model')}