Merge pull request #14832 from itk-dev/feature/high-contrast-mode-and-label-menu-search-bar

FEAT: high contrast mode and label menu search bar

src/lib/components/chat/SettingsModal.svelte

@@ -566,11 +566,17 @@
 			>
 				<div class="hidden md:flex w-full rounded-xl -mb-1 px-0.5 gap-2" id="settings-search">
 					<div class="self-center rounded-l-xl bg-transparent">
-						<Search className="size-3.5" />
+						<Search
+							className="size-3.5"
+							strokeWidth={($settings.highContrastMode ?? false) ? '3' : '1.5'}
+						/>
 					</div>
+					<label class="sr-only" for="search-input-settings-modal">{$i18n.t('Search')}</label>
 					<input
-						class="w-full py-1.5 text-sm bg-transparent dark:text-gray-300 outline-hidden"
+						class={`w-full py-1.5 text-sm bg-transparent dark:text-gray-300 outline-hidden
+								${($settings.highContrastMode ?? false) ? 'placeholder-gray-800' : ''}`}
 						bind:value={search}
+						id="search-input-settings-modal"
 						on:input={searchDebounceHandler}
 						placeholder={$i18n.t('Search')}
 					/>