From ae217814426119f0089185497f9a3a5bafccafb7 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Wed, 22 May 2024 14:14:53 +0200
Subject: [PATCH] fix(web): albums dark mode contrast + a11y issue (#9662)

---
 .../album-page/album-card-group.svelte        | 12 +++---
 .../components/album-page/album-card.svelte   |  2 +-
 .../components/album-page/albums-table.svelte | 38 +++++++++++--------
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/web/src/lib/components/album-page/album-card-group.svelte b/web/src/lib/components/album-page/album-card-group.svelte
index 4c303caa68..99347b3a02 100644
--- a/web/src/lib/components/album-page/album-card-group.svelte
+++ b/web/src/lib/components/album-page/album-card-group.svelte
@@ -29,17 +29,19 @@
 
 {#if group}
   <div class="grid">
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-    <p on:click={() => toggleAlbumGroupCollapsing(group.id)} class="w-fit mt-2 pt-2 pr-2 mb-2 hover:cursor-pointer">
+    <button
+      on:click={() => toggleAlbumGroupCollapsing(group.id)}
+      class="w-fit mt-2 pt-2 pr-2 mb-2 dark:text-immich-dark-fg"
+      aria-expanded={!isCollapsed}
+    >
       <Icon
         path={mdiChevronRight}
         size="24"
         class="inline-block -mt-2.5 transition-all duration-[250ms] {iconRotation}"
       />
       <span class="font-bold text-3xl text-black dark:text-white">{group.name}</span>
-      <span class="ml-1.5 dark:text-immich-dark-fg">({albums.length} {albums.length > 1 ? 'albums' : 'album'})</span>
-    </p>
+      <span class="ml-1.5">({albums.length} {albums.length > 1 ? 'albums' : 'album'})</span>
+    </button>
     <hr class="dark:border-immich-dark-gray" />
   </div>
 {/if}
diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
index fd0f231316..6bd5f85485 100644
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/web/src/lib/components/album-page/album-card.svelte
@@ -61,7 +61,7 @@
       </p>
     {/if}
 
-    <span class="flex gap-2 text-sm" data-testid="album-details">
+    <span class="flex gap-2 text-sm dark:text-immich-dark-fg" data-testid="album-details">
       {#if showItemCount}
         <p>
           {album.assetCount.toLocaleString($locale)}
diff --git a/web/src/lib/components/album-page/albums-table.svelte b/web/src/lib/components/album-page/albums-table.svelte
index 09d924ca2c..1af4d7629d 100644
--- a/web/src/lib/components/album-page/albums-table.svelte
+++ b/web/src/lib/components/album-page/albums-table.svelte
@@ -40,24 +40,30 @@
     {#each groupedAlbums as albumGroup (albumGroup.id)}
       {@const isCollapsed = isAlbumGroupCollapsed($albumViewSettings, albumGroup.id)}
       {@const iconRotation = isCollapsed ? 'rotate-0' : 'rotate-90'}
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-      <tbody
-        class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg mt-4 hover:cursor-pointer"
+      <button
         on:click={() => toggleAlbumGroupCollapsing(albumGroup.id)}
+        class="flex w-full mt-4 rounded-md"
+        aria-expanded={!isCollapsed}
       >
-        <tr class="flex w-full place-items-center p-2 md:pl-5 md:pr-5 md:pt-3 md:pb-3">
-          <td class="text-md text-left -mb-1">
-            <Icon
-              path={mdiChevronRight}
-              size="20"
-              class="inline-block -mt-2 transition-all duration-[250ms] {iconRotation}"
-            />
-            <span class="font-bold text-2xl">{albumGroup.name}</span>
-            <span class="ml-1.5">({albumGroup.albums.length} {albumGroup.albums.length > 1 ? 'albums' : 'album'})</span>
-          </td>
-        </tr>
-      </tbody>
+        <tbody
+          class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
+        >
+          <tr class="flex w-full place-items-center p-2 md:pl-5 md:pr-5 md:pt-3 md:pb-3">
+            <td class="text-md text-left -mb-1">
+              <Icon
+                path={mdiChevronRight}
+                size="20"
+                class="inline-block -mt-2 transition-all duration-[250ms] {iconRotation}"
+              />
+              <span class="font-bold text-2xl">{albumGroup.name}</span>
+              <span class="ml-1.5">
+                ({albumGroup.albums.length}
+                {albumGroup.albums.length > 1 ? 'albums' : 'album'})
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </button>
       {#if !isCollapsed}
         <tbody
           class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg mt-4"