From fcc3b81745ab0912968a7761c3de986a9d7d3c82 Mon Sep 17 00:00:00 2001
From: Ben Basten <45583362+ben-basten@users.noreply.github.com>
Date: Fri, 29 Mar 2024 12:48:07 +0000
Subject: [PATCH] feat(web, a11y): add labels! (#8354)

* feat(web, a11y): add labels!

* fix: move required prop to the top of the list
---
 .../album-page/album-options.svelte           |  2 +-
 .../album-page/share-info-modal.svelte        |  1 +
 .../asset-viewer/activity-viewer.svelte       |  8 +++++-
 .../asset-viewer/asset-viewer-nav-bar.svelte  |  2 +-
 .../asset-viewer/download-panel.svelte        |  8 +++++-
 .../buttons/circle-icon-button.svelte         |  4 +--
 .../faces-page/merge-face-selector.svelte     |  7 +++++-
 .../faces-page/merge-suggestion-modal.svelte  |  3 ++-
 .../components/faces-page/show-hide.svelte    |  2 +-
 .../components/forms/edit-user-form.svelte    |  2 +-
 .../memory-page/memory-viewer.svelte          | 25 +++++++++++++++----
 .../shared-components/base-modal.svelte       |  2 +-
 .../context-menu/menu-option.svelte           |  2 +-
 .../shared-components/control-app-bar.svelte  |  1 +
 .../navigation-bar/avatar-selector.svelte     |  4 +--
 .../shared-components/show-shortcuts.svelte   |  2 +-
 .../shared-components/user-avatar.svelte      |  3 ++-
 .../sharedlinks-page/shared-link-card.svelte  |  6 ++---
 .../(user)/albums/[albumId]/+page.svelte      |  1 +
 web/src/routes/admin/repair/+page.svelte      |  4 +--
 20 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/web/src/lib/components/album-page/album-options.svelte b/web/src/lib/components/album-page/album-options.svelte
index d5f816047f..5118daf068 100644
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@@ -61,7 +61,7 @@
         <div class="flex items-center">
           <h1 class="px-4 w-full self-center font-medium text-immich-primary dark:text-immich-dark-primary">Options</h1>
           <div>
-            <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
+            <CircleIconButton icon={mdiClose} title="Close" on:click={() => dispatch('close')} />
           </div>
         </div>
 
diff --git a/web/src/lib/components/album-page/share-info-modal.svelte b/web/src/lib/components/album-page/share-info-modal.svelte
index db227b03ab..5f60d2b404 100644
--- a/web/src/lib/components/album-page/share-info-modal.svelte
+++ b/web/src/lib/components/album-page/share-info-modal.svelte
@@ -97,6 +97,7 @@
             {#if isOwned}
               <div>
                 <CircleIconButton
+                  title="Options"
                   on:click={(event) => showContextMenu(event, user)}
                   icon={mdiDotsVertical}
                   backgroundColor="transparent"
diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/web/src/lib/components/asset-viewer/activity-viewer.svelte
index cf98c527fa..0acfb88dcd 100644
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@@ -305,7 +305,13 @@
             </div>
           {:else if message}
             <div class="flex items-end w-fit ml-0">
-              <CircleIconButton size="15" icon={mdiSend} iconColor={'dark'} hoverColor={'rgb(173,203,250)'} />
+              <CircleIconButton
+                title="Send message"
+                size="15"
+                icon={mdiSend}
+                iconColor={'dark'}
+                hoverColor={'rgb(173,203,250)'}
+              />
             </div>
           {/if}
         </form>
diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index e4deffeef5..1772b8641d 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -102,7 +102,7 @@
   class="z-[1001] flex h-16 place-items-center justify-between bg-gradient-to-b from-black/40 px-3 transition-transform duration-200"
 >
   <div class="text-white">
-    <CircleIconButton isOpacity={true} icon={mdiArrowLeft} on:click={() => dispatch('back')} />
+    <CircleIconButton isOpacity={true} icon={mdiArrowLeft} title="Go back" on:click={() => dispatch('back')} />
   </div>
   <div class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white">
     {#if showShareButton}
diff --git a/web/src/lib/components/asset-viewer/download-panel.svelte b/web/src/lib/components/asset-viewer/download-panel.svelte
index 297d6ead6e..7aac3e69e9 100644
--- a/web/src/lib/components/asset-viewer/download-panel.svelte
+++ b/web/src/lib/components/asset-viewer/download-panel.svelte
@@ -39,7 +39,13 @@
             </div>
           </div>
           <div class="absolute right-2">
-            <CircleIconButton on:click={() => abort(downloadKey, download)} size="20" icon={mdiClose} forceDark />
+            <CircleIconButton
+              title="Close"
+              on:click={() => abort(downloadKey, download)}
+              size="20"
+              icon={mdiClose}
+              forceDark
+            />
           </div>
         </div>
       {/each}
diff --git a/web/src/lib/components/elements/buttons/circle-icon-button.svelte b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
index a2e6dc0c42..809eaa7228 100644
--- a/web/src/lib/components/elements/buttons/circle-icon-button.svelte
+++ b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
@@ -2,11 +2,11 @@
   import Icon from '$lib/components/elements/icon.svelte';
 
   export let icon: string;
+  export let title: string;
   export let backgroundColor = '';
   export let hoverColor = '#e2e7e9';
   export let padding = '3';
   export let size = '24';
-  export let title = '';
   export let isOpacity = false;
   export let forceDark = false;
   export let hideMobile = false;
@@ -27,7 +27,7 @@
   {hideMobile && 'hidden sm:flex'}"
   on:click
 >
-  <Icon path={icon} {size} color={iconColor} />
+  <Icon path={icon} {size} ariaLabel={title} color={iconColor} />
   <slot />
 </button>
 
diff --git a/web/src/lib/components/faces-page/merge-face-selector.svelte b/web/src/lib/components/faces-page/merge-face-selector.svelte
index 9fa8628ddc..312883db5c 100644
--- a/web/src/lib/components/faces-page/merge-face-selector.svelte
+++ b/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>
diff --git a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
index 89c9b6fc12..9b579909d1 100644
--- a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
+++ b/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])}
             />
diff --git a/web/src/lib/components/faces-page/show-hide.svelte b/web/src/lib/components/faces-page/show-hide.svelte
index bee1e98fb7..b7ab80f3f1 100644
--- a/web/src/lib/components/faces-page/show-hide.svelte
+++ b/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>
diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte
index beb3f43053..6ec86a1b80 100644
--- a/web/src/lib/components/forms/edit-user-form.svelte
+++ b/web/src/lib/components/forms/edit-user-form.svelte
@@ -96,7 +96,7 @@
     class="relative max-h-screen w-[500px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
   >
     <div class="absolute top-0 right-0 px-2 py-2 h-fit">
-      <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
+      <CircleIconButton title="Close" icon={mdiClose} on:click={() => dispatch('close')} />
     </div>
 
     <div
diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index cc002897a2..c0db8bde1a 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -108,7 +108,12 @@
 
       {#if canGoForward}
         <div class="flex place-content-center place-items-center gap-2 overflow-hidden">
-          <CircleIconButton icon={paused ? mdiPlay : mdiPause} forceDark on:click={() => (paused = !paused)} />
+          <CircleIconButton
+            title={paused ? 'Play memories' : 'Pause memories'}
+            icon={paused ? mdiPlay : mdiPause}
+            forceDark
+            on:click={() => (paused = !paused)}
+          />
 
           {#each currentMemory.assets as _, index}
             <button
@@ -144,7 +149,7 @@
         class:opacity-100={galleryInView}
       >
         <button on:click={() => memoryWrapper.scrollIntoView({ behavior: 'smooth' })} disabled={!galleryInView}>
-          <CircleIconButton icon={mdiChevronUp} backgroundColor="white" forceDark />
+          <CircleIconButton title="Hide gallery" icon={mdiChevronUp} backgroundColor="white" forceDark />
         </button>
       </div>
     {/if}
@@ -204,13 +209,23 @@
             <!-- CONTROL BUTTONS -->
             {#if canGoBack}
               <div class="absolute top-1/2 left-0 ml-4">
-                <CircleIconButton icon={mdiChevronLeft} backgroundColor="#202123" on:click={toPrevious} />
+                <CircleIconButton
+                  title="Previous memory"
+                  icon={mdiChevronLeft}
+                  backgroundColor="#202123"
+                  on:click={toPrevious}
+                />
               </div>
             {/if}
 
             {#if canGoForward}
               <div class="absolute top-1/2 right-0 mr-4">
-                <CircleIconButton icon={mdiChevronRight} backgroundColor="#202123" on:click={toNext} />
+                <CircleIconButton
+                  title="Next memory"
+                  icon={mdiChevronRight}
+                  backgroundColor="#202123"
+                  on:click={toNext}
+                />
               </div>
             {/if}
 
@@ -271,7 +286,7 @@
         class:opacity-100={!galleryInView}
       >
         <button on:click={() => memoryGallery.scrollIntoView({ behavior: 'smooth' })}>
-          <CircleIconButton icon={mdiChevronDown} backgroundColor="white" forceDark />
+          <CircleIconButton title="Show gallery" icon={mdiChevronDown} backgroundColor="white" forceDark />
         </button>
       </div>
 
diff --git a/web/src/lib/components/shared-components/base-modal.svelte b/web/src/lib/components/shared-components/base-modal.svelte
index 234933b9b1..c5bf5380af 100644
--- a/web/src/lib/components/shared-components/base-modal.svelte
+++ b/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>
diff --git a/web/src/lib/components/shared-components/context-menu/menu-option.svelte b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
index 6d5adc4197..28c29c74ad 100644
--- a/web/src/lib/components/shared-components/context-menu/menu-option.svelte
+++ b/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}
diff --git a/web/src/lib/components/shared-components/control-app-bar.svelte b/web/src/lib/components/shared-components/control-app-bar.svelte
index 095b12d274..10f1965a7e 100644
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/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'}
diff --git a/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte b/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
index c6b00adc4d..ec84d44830 100644
--- a/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
+++ b/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>
diff --git a/web/src/lib/components/shared-components/show-shortcuts.svelte b/web/src/lib/components/shared-components/show-shortcuts.svelte
index 7a660de1b2..cfa3768bb5 100644
--- a/web/src/lib/components/shared-components/show-shortcuts.svelte
+++ b/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>
 
diff --git a/web/src/lib/components/shared-components/user-avatar.svelte b/web/src/lib/components/shared-components/user-avatar.svelte
index e07a55f867..fac7890d74 100644
--- a/web/src/lib/components/shared-components/user-avatar.svelte
+++ b/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'
     : '';
diff --git a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
index 993a052bf6..e71e62e40f 100644
--- a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
+++ b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
@@ -168,9 +168,9 @@
 
   <div class="flex flex-auto flex-col place-content-center place-items-end text-right">
     <div class="flex">
-      <CircleIconButton icon={mdiDelete} on:click={() => dispatch('delete')} />
-      <CircleIconButton icon={mdiCircleEditOutline} on:click={() => dispatch('edit')} />
-      <CircleIconButton icon={mdiContentCopy} on:click={() => dispatch('copy')} />
+      <CircleIconButton title="Delete link" icon={mdiDelete} on:click={() => dispatch('delete')} />
+      <CircleIconButton title="Edit link" icon={mdiCircleEditOutline} on:click={() => dispatch('edit')} />
+      <CircleIconButton title="Copy link" icon={mdiContentCopy} on:click={() => dispatch('copy')} />
     </div>
   </div>
 </div>
diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte
index 23e6a1b2ee..d4b665bc0a 100644
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@@ -545,6 +545,7 @@
                     <!-- link -->
                     {#if album.hasSharedLink && isOwned}
                       <CircleIconButton
+                        title="Create link to share "
                         backgroundColor="#d3d3d3"
                         forceDark
                         size="20"
diff --git a/web/src/routes/admin/repair/+page.svelte b/web/src/routes/admin/repair/+page.svelte
index abe12d8dc5..50ffeb581b 100644
--- a/web/src/routes/admin/repair/+page.svelte
+++ b/web/src/routes/admin/repair/+page.svelte
@@ -266,7 +266,7 @@
                   title={orphan.pathValue}
                 >
                   <td on:click={() => copyToClipboard(orphan.pathValue)}>
-                    <CircleIconButton icon={mdiContentCopy} size="18" />
+                    <CircleIconButton title="Copy file path" icon={mdiContentCopy} size="18" />
                   </td>
                   <td class="truncate text-sm font-mono text-left" title={orphan.pathValue}>
                     {orphan.pathValue}
@@ -306,7 +306,7 @@
                   title={extra.filename}
                 >
                   <td on:click={() => copyToClipboard(extra.filename)}>
-                    <CircleIconButton icon={mdiContentCopy} size="18" />
+                    <CircleIconButton title="Copy file path" icon={mdiContentCopy} size="18" />
                   </td>
                   <td class="w-full text-md text-ellipsis flex justify-between pr-5">
                     <span class="text-ellipsis grow truncate font-mono text-sm pr-5" title={extra.filename}