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/elements/checkbox.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let id: string;
+  export let label: string;
+  export let checked: boolean | undefined = undefined;
+  export let disabled: boolean = false;
+  export let labelClass: string | undefined = undefined;
+  export let name: string | undefined = undefined;
+  export let value: string | undefined = undefined;
+</script>
+
+<div class="flex items-center space-x-2">
+  <input
+    type="checkbox"
+    {name}
+    {id}
+    {value}
+    {disabled}
+    class="size-5 flex-shrink-0 focus-visible:ring"
+    bind:checked
+    on:change
+  />
+  <label class={labelClass} for={id}>{label}</label>
+</div>

web/src/lib/components/elements/radio-button.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let id: string;
+  export let label: string;
+  export let name: string;
+  export let value: string;
+  export let group: string | undefined = undefined;
+</script>
+
+<div class="flex items-center space-x-2">
+  <input type="radio" {name} {id} {value} class="focus-visible:ring" bind:group />
+  <label for={id}>{label}</label>
+</div>