From 619de2a5e42096daa43fabeedd965da623a6c394 Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Mon, 3 Nov 2025 08:31:57 -0500
Subject: [PATCH] fix(web): search bar accessibility (#23550)

* fix: always show search type when search bar is focused

* fix: indicate search type to screen reader users
---
 .../shared-components/search-bar/search-bar.svelte  | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
index d0e84fd072..8c1d2c5d08 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -30,10 +30,10 @@
   let showSuggestions = $state(false);
   let isSearchSuggestions = $state(false);
   let selectedId: string | undefined = $state();
-  let isFocus = $state(false);
   let close: (() => Promise<void>) | undefined;
 
   const listboxId = generateId();
+  const searchTypeId = generateId();
 
   onDestroy(() => {
     searchStore.isSearchEnabled = false;
@@ -161,12 +161,10 @@
 
   const openDropdown = () => {
     showSuggestions = true;
-    isFocus = true;
   };
 
   const closeDropdown = () => {
     showSuggestions = false;
-    isFocus = false;
     searchHistoryBox?.clearSelection();
   };
 
@@ -251,6 +249,7 @@
         aria-activedescendant={selectedId ?? ''}
         aria-expanded={showSuggestions && isSearchSuggestions}
         aria-autocomplete="list"
+        aria-describedby={searchTypeId}
         use:shortcuts={[
           { shortcut: { key: 'Escape' }, onShortcut: onEscape },
           { shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
@@ -287,12 +286,12 @@
       />
     </div>
 
-    {#if isFocus}
+    {#if searchStore.isSearchEnabled}
       <div
-        class="absolute inset-y-0 flex items-center"
+        id={searchTypeId}
+        class="absolute inset-y-0 flex items-center end-16"
         class:max-md:hidden={value}
-        class:end-16={isFocus}
-        class:end-28={isFocus && value.length > 0}
+        class:end-28={value.length > 0}
       >
         <p
           class="bg-immich-primary text-white dark:bg-immich-dark-primary/90 dark:text-black/75 rounded-full px-3 py-1 text-xs"