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/shared-components/base-modal.svelte

@@ -56,7 +56,7 @@
           </slot>
         </div>
 
-        <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} />
+        <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} title="Close" />
       </div>
 
       <div>

web/src/lib/components/shared-components/context-menu/menu-option.svelte

@@ -14,7 +14,7 @@
   {#if text}
     {#if icon}
       <p class="flex gap-2">
-        <Icon path={icon} size="18" />
+        <Icon path={icon} ariaHidden={true} size="18" />
         {text}
       </p>
     {:else}

web/src/lib/components/shared-components/control-app-bar.svelte

@@ -58,6 +58,7 @@
     <div class="flex place-items-center gap-6 justify-self-start dark:text-immich-dark-fg">
       {#if showBackButton}
         <CircleIconButton
+          title="Close"
           on:click={handleClose}
           icon={backIcon}
           backgroundColor={'transparent'}

web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte

@@ -25,14 +25,14 @@
           SELECT AVATAR COLOR
         </h1>
         <div>
-          <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
+          <CircleIconButton icon={mdiClose} title="Close" on:click={() => dispatch('close')} />
         </div>
       </div>
       <div class="flex items-center justify-center p-4 mt-4">
         <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
           {#each colors as color}
             <button on:click={() => dispatch('choose', color)}>
-              <UserAvatar {user} {color} size="xl" showProfileImage={false} />
+              <UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
             </button>
           {/each}
         </div>

web/src/lib/components/shared-components/show-shortcuts.svelte

@@ -44,7 +44,7 @@
       <div class="relative px-4 pt-4">
         <h1 class="px-4 py-4 font-medium text-immich-primary dark:text-immich-dark-primary">Keyboard Shortcuts</h1>
         <div class="absolute inset-y-0 right-0 px-4 py-4">
-          <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
+          <CircleIconButton title="Close" icon={mdiClose} on:click={() => dispatch('close')} />
         </div>
       </div>
 

web/src/lib/components/shared-components/user-avatar.svelte

@@ -22,6 +22,7 @@
   export let interactive = false;
   export let showTitle = true;
   export let showProfileImage = true;
+  export let label: string | undefined = undefined;
 
   let img: HTMLImageElement;
   let showFallback = true;
@@ -61,7 +62,7 @@
 
   $: colorClass = colorClasses[color];
   $: sizeClass = sizeClasses[size];
-  $: title = `${user.name} (${user.email})`;
+  $: title = label ?? `${user.name} (${user.email})`;
   $: interactiveClass = interactive
     ? 'border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-colors'
     : '';