feat(web, a11y): add labels! (#8354)

* feat(web, a11y): add labels!

* fix: move required prop to the top of the list

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -135,7 +135,12 @@
                 </div>
                 {#if selectedPeople.length === 1}
                   <div class="absolute bottom-2">
-                    <CircleIconButton icon={mdiSwapHorizontal} size="24" on:click={handleSwapPeople} />
+                    <CircleIconButton
+                      title="Swap merge direction"
+                      icon={mdiSwapHorizontal}
+                      size="24"
+                      on:click={handleSwapPeople}
+                    />
                   </div>
                 {/if}
               </div>

web/src/lib/components/faces-page/merge-suggestion-modal.svelte

@@ -40,7 +40,7 @@
           Merge People - {title}
         </h1>
         <div class="p-2">
-          <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
+          <CircleIconButton title="Close" icon={mdiClose} on:click={() => dispatch('close')} />
         </div>
       </div>
 
@@ -57,6 +57,7 @@
           </div>
           <div class="mx-0.5 flex md:mx-2">
             <CircleIconButton
+              title="Swap merge direction"
               icon={mdiMerge}
               on:click={() => ([personMerge1, personMerge2] = [personMerge2, personMerge1])}
             />

web/src/lib/components/faces-page/show-hide.svelte

@@ -29,7 +29,7 @@
     class="fixed top-0 z-10 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
   >
     <div class="flex items-center">
-      <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
+      <CircleIconButton title="Close" icon={mdiClose} on:click={() => dispatch('close')} />
       <div class="flex gap-2 items-center">
         <p class="ml-2">Show & hide people</p>
         <p class="text-sm text-gray-400 dark:text-gray-600">({countTotalPeople.toLocaleString($locale)})</p>