feat(web): combobox accessibility improvements (#8007)

* bump skip link z index, to prevent overlap with the search box

* combobox refactor initial commit

* pull label into the combobox component

* feat(web): combobox accessibility improvements

* fix: replace crypto.randomUUID, fix border UI bug, simpler focus handling (#2)

* fix: handle changes in the selected option

* fix: better escape key handling in search bar

* fix: remove broken tailwind classes

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* fix: remove custom "outclick" handler logic

* fix: use focusout instead of custom key handlers to detect focus change

* fix: move escape key handling to the window

Also add escape key handling to the input box, to make sure that the "recent searches" dropdown gets closed too.

* fix: better input event handling

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* fix: highlighting selected dropdown element

---------

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -11,6 +11,7 @@
   import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   import { handlePromiseError } from '$lib/utils';
+  import { shortcut } from '$lib/utils/shortcut';
 
   export let value = '';
   export let grayTheme: boolean;
@@ -84,7 +85,16 @@
   };
 </script>
 
-<div class="w-full relative" use:clickOutside on:outclick={onFocusOut} on:escape={onFocusOut}>
+<svelte:window
+  use:shortcut={{
+    shortcut: { key: 'Escape' },
+    onShortcut: () => {
+      onFocusOut();
+    },
+  }}
+/>
+
+<div class="w-full relative" use:clickOutside={{ onOutclick: onFocusOut }}>
   <form
     draggable="false"
     autocomplete="off"
@@ -118,6 +128,12 @@
         bind:this={input}
         on:click={onFocusIn}
         disabled={showFilter}
+        use:shortcut={{
+          shortcut: { key: 'Escape' },
+          onShortcut: () => {
+            onFocusOut();
+          },
+        }}
       />
 
       <div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-5'} flex items-center pl-6 transition-all">