From 41504b9a2cd2e78a93e02b6f6d88a945d9a71044 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 12 Mar 2024 13:09:11 +0100
Subject: [PATCH] fix(web): asset viewer navigation buttons (#7888)

---
 .../lib/components/asset-viewer/asset-viewer.svelte  | 12 ++++++------
 .../components/asset-viewer/navigation-area.svelte   | 10 ++++++++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 5f32c000c2..b1f70cbeb5 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -592,9 +592,9 @@
 
   {#if $slideshowState === SlideshowState.None && showNavigation}
     <div class="z-[1001] column-span-1 col-start-1 row-span-1 row-start-2 mb-[60px] justify-self-start">
-      <NavigationArea on:click={(e) => navigateAsset('previous', e)}
-        ><Icon path={mdiChevronLeft} size="36" /></NavigationArea
-      >
+      <NavigationArea onClick={(e) => navigateAsset('previous', e)} label="View previous asset">
+        <Icon path={mdiChevronLeft} size="36" ariaHidden />
+      </NavigationArea>
     </div>
   {/if}
 
@@ -708,9 +708,9 @@
 
   {#if $slideshowState === SlideshowState.None && showNavigation}
     <div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 mb-[60px] justify-self-end">
-      <NavigationArea on:click={(e) => navigateAsset('next', e)}
-        ><Icon path={mdiChevronRight} size="36" /></NavigationArea
-      >
+      <NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset">
+        <Icon path={mdiChevronRight} size="36" ariaHidden />
+      </NavigationArea>
     </div>
   {/if}
 
diff --git a/web/src/lib/components/asset-viewer/navigation-area.svelte b/web/src/lib/components/asset-viewer/navigation-area.svelte
index 093f555888..efa2761cb1 100644
--- a/web/src/lib/components/asset-viewer/navigation-area.svelte
+++ b/web/src/lib/components/asset-viewer/navigation-area.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
+  export let onClick: (e: MouseEvent) => void;
+  export let label: string;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="group flex h-full place-items-center" on:click on:keydown>
-  <button class="mx-4 rounded-full p-3 text-gray-500 transition group-hover:bg-gray-500 group-hover:text-white">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="group flex h-full place-items-center hover:cursor-pointer" on:click={onClick}>
+  <button
+    class="mx-4 rounded-full p-3 text-gray-500 transition group-hover:bg-gray-500 group-hover:text-white"
+    aria-label={label}
+  >
     <slot />
   </button>
 </div>