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/photos-page/delete-asset-dialog.svelte

@@ -2,6 +2,7 @@
   import { createEventDispatcher } from 'svelte';
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
+  import Checkbox from '$lib/components/elements/checkbox.svelte';
 
   export let size: number;
 
@@ -12,10 +13,6 @@
     cancel: void;
   }>();
 
-  const onToggle = () => {
-    checked = !checked;
-  };
-
   const handleConfirm = () => {
     if (checked) {
       $showDeleteModal = false;
@@ -42,16 +39,8 @@
     </p>
     <p><b>You cannot undo this action!</b></p>
 
-    <div class="flex gap-2 items-center justify-center pt-4">
-      <label id="confirm-label" for="confirm-input">Do not show this message again</label>
-      <input
-        id="confirm-input"
-        aria-labelledby="confirm-input"
-        class="disabled::cursor-not-allowed h-3 w-3 opacity-1"
-        type="checkbox"
-        bind:checked
-        on:click={onToggle}
-      />
+    <div class="pt-4 flex justify-center items-center">
+      <Checkbox id="confirm-deletion-input" label="Do not show this message again" bind:checked />
     </div>
   </svelte:fragment>
 </ConfirmDialogue>