feat(web,a11y): form and search filter accessibility (#9087)

* feat(web,a11y): search filter accessibility

- visible focus rings
- labels for text search
- responsive buttons / radio buttons / checkboxes
- buttons to lowercase
- add fieldsets to radio buttons and checkboxes, so the screen reader
  announces the label for the group

* feat: extract inputs into reusable components, replace all checkboxes

* chore: revert changes to responsive buttons

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import RadioButton from '$lib/components/elements/radio-button.svelte';
+
   export let filename: string | undefined;
   export let context: string | undefined;
 
@@ -18,40 +20,45 @@
   }
 </script>
 
-<div class="flex gap-5">
-  <label class="immich-form-label" for="context">
-    <input type="radio" name="context" id="context" bind:group={selectedOption} value={TextSearchOptions.Context} />
-    <span>CONTEXT</span>
-  </label>
-
-  <label class="immich-form-label" for="file-name">
-    <input
-      type="radio"
-      name="file-name"
-      id="file-name"
+<fieldset>
+  <legend class="immich-form-label">Search type</legend>
+  <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1 mb-2">
+    <RadioButton
+      name="query-type"
+      id="context-radio"
       bind:group={selectedOption}
+      label="Context"
+      value={TextSearchOptions.Context}
+    />
+    <RadioButton
+      name="query-type"
+      id="file-name-radio"
+      bind:group={selectedOption}
+      label="File name or extension"
       value={TextSearchOptions.Filename}
     />
-    <span>FILE NAME</span>
-  </label>
-</div>
+  </div>
+</fieldset>
 
 {#if selectedOption === TextSearchOptions.Context}
+  <label for="context-input" class="immich-form-label">Search by context</label>
   <input
     class="immich-form-input hover:cursor-text w-full !mt-1"
     type="text"
-    id="context"
+    id="context-input"
     name="context"
     placeholder="Sunrise on the beach"
     bind:value={context}
   />
 {:else}
+  <label for="file-name-input" class="immich-form-label">Search by file name or extension</label>
   <input
     class="immich-form-input hover:cursor-text w-full !mt-1"
     type="text"
-    id="file-name"
+    id="file-name-input"
     name="file-name"
-    placeholder="File name or extension i.e. IMG_1234.JPG or PNG"
+    placeholder="i.e. IMG_1234.JPG or PNG"
     bind:value={filename}
+    aria-labelledby="file-name-label"
   />
 {/if}