fix(web): correctly use button and link elements (#7907)

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -258,18 +258,15 @@
       <div class="mt-2 flex flex-wrap gap-2">
         {#each people as person, index (person.id)}
           {#if showingHiddenPeople || !person.isHidden}
-            <div
-              class="w-[90px]"
-              role="button"
-              tabindex={index}
-              on:focus={() => ($boundingBoxesArray = people[index].faces)}
-              on:mouseover={() => ($boundingBoxesArray = people[index].faces)}
-              on:mouseleave={() => ($boundingBoxesArray = [])}
-            >
             <a
+              class="w-[90px]"
               href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={currentAlbum?.id
                 ? `${AppRoute.ALBUMS}/${currentAlbum?.id}`
                 : AppRoute.PHOTOS}"
+              on:focus={() => ($boundingBoxesArray = people[index].faces)}
+              on:blur={() => ($boundingBoxesArray = [])}
+              on:mouseover={() => ($boundingBoxesArray = people[index].faces)}
+              on:mouseleave={() => ($boundingBoxesArray = [])}
               on:click={() => dispatch('closeViewer')}
             >
               <div class="relative">
@@ -313,7 +310,6 @@
                 {/if}
               {/if}
             </a>
-            </div>
           {/if}
         {/each}
       </div>
@@ -341,12 +337,10 @@
       {@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
         zone: asset.exifInfo.timeZone ?? undefined,
       })}
-      <div
+      <button
-        class="flex justify-between place-items-start gap-4 py-4"
+        type="button"
-        tabindex="0"
+        class="flex w-full text-left justify-between place-items-start gap-4 py-4"
-        role="button"
         on:click={() => (isOwner ? (isShowChangeDate = true) : null)}
-        on:keydown={(event) => (isOwner ? event.key === 'Enter' && (isShowChangeDate = true) : null)}
         title={isOwner ? 'Edit date' : ''}
         class:hover:dark:text-immich-dark-primary={isOwner}
         class:hover:text-immich-primary={isOwner}
@@ -384,11 +378,11 @@
         </div>
 
         {#if isOwner}
-          <button class="focus:outline-none p-1">
+          <div class="p-1">
             <Icon path={mdiPencil} size="20" />
-          </button>
-        {/if}
           </div>
+        {/if}
+      </button>
     {:else if !asset.exifInfo?.dateTimeOriginal && !asset.isReadOnly && isOwner}
       <div class="flex justify-between place-items-start gap-4 py-4">
         <div class="flex gap-4">
@@ -396,9 +390,9 @@
             <Icon path={mdiCalendar} size="24" />
           </div>
         </div>
-        <button class="focus:outline-none p-1">
+        <div class="p-1">
           <Icon path={mdiPencil} size="20" />
-        </button>
+        </div>
       </div>
     {:else if asset.exifInfo?.dateTimeOriginal && asset.isReadOnly}
       {@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
@@ -517,13 +511,11 @@
     {/if}
 
     {#if asset.exifInfo?.city && !asset.isReadOnly}
-      <div
+      <button
-        class="flex justify-between place-items-start gap-4 py-4"
+        type="button"
+        class="flex w-full text-left justify-between place-items-start gap-4 py-4"
         on:click={() => (isOwner ? (isShowChangeLocation = true) : null)}
-        on:keydown={(event) => (isOwner ? event.key === 'Enter' && (isShowChangeLocation = true) : null)}
-        tabindex="0"
         title={isOwner ? 'Edit location' : ''}
-        role="button"
         class:hover:dark:text-immich-dark-primary={isOwner}
         class:hover:text-immich-primary={isOwner}
       >
@@ -550,14 +542,12 @@
             <Icon path={mdiPencil} size="20" />
           </div>
         {/if}
-      </div>
+      </button>
     {:else if !asset.exifInfo?.city && !asset.isReadOnly && isOwner}
-      <div
+      <button
-        class="flex justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
+        type="button"
+        class="flex w-full text-left justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
         on:click={() => (isShowChangeLocation = true)}
-        on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)}
-        tabindex="0"
-        role="button"
         title="Add location"
       >
         <div class="flex gap-4">
@@ -570,7 +560,7 @@
         <div class="focus:outline-none p-1">
           <Icon path={mdiPencil} size="20" />
         </div>
-      </div>
+      </button>
     {:else if asset.exifInfo?.city && asset.isReadOnly}
       <div class="flex justify-between place-items-start gap-4 py-4">
         <div class="flex gap-4">

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute } from '$lib/constants';
   import { getAssetThumbnailUrl } from '$lib/utils';
@@ -122,15 +121,9 @@
           {/if}
 
           {#if !link.expiresAt || !isExpired(link.expiresAt)}
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <a href="{AppRoute.SHARE}/{link.key}" title="Go to share page">
-            <div
-              class="hover:cursor-pointer"
-              title="Go to share page"
-              on:click={() => goto(`${AppRoute.SHARE}/${link.key}`)}
-              on:keydown={() => goto(`${AppRoute.SHARE}/${link.key}`)}
-            >
               <Icon path={mdiOpenInNew} />
-            </div>
+            </a>
           {/if}
         </div>