fix(web): require button type (#9786)

2024-12-28 11:15:54 +02:00 · 2024-05-27 09:06:15 +02:00 · 2024-05-27 09:06:15 +02:00 · 38f4a02a14
commit 38f4a02a14
parent fc5615eff6
41 changed files with 113 additions and 59 deletions
--- a/web/.eslintrc.cjs
+++ b/web/.eslintrc.cjs
@ -51,6 +51,7 @@ module.exports = {
    'unicorn/consistent-function-scoping': 'off',
    'unicorn/prefer-top-level-await': 'off',
    'unicorn/import-style': 'off',
+    'svelte/button-has-type': 'error',
    // TODO: set recommended-type-checked and remove these rules
    '@typescript-eslint/await-thenable': 'error',
    '@typescript-eslint/no-floating-promises': 'error',
--- a/web/src/lib/components/admin-page/jobs/job-tile-button.svelte
+++ b/web/src/lib/components/admin-page/jobs/job-tile-button.svelte
@ -17,6 +17,7 @@
 </script>

 <button
+  type="button"
  {disabled}
  class="flex h-full w-full flex-col place-content-center place-items-center gap-2 px-8 py-2 text-xs text-gray-600 transition-colors dark:text-gray-200 {colorClasses[
    color
--- a/web/src/lib/components/album-page/album-card-group.svelte
+++ b/web/src/lib/components/album-page/album-card-group.svelte
@ -30,6 +30,7 @@
 {#if group}
  <div class="grid">
    <button
+      type="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}
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@ -75,7 +75,7 @@
    <div class="py-2">
      <div class="text-gray text-sm mb-3">PEOPLE</div>
      <div class="p-2">
-        <button class="flex items-center gap-2" on:click={() => dispatch('showSelectSharedUser')}>
+        <button type="button" class="flex items-center gap-2" on:click={() => dispatch('showSelectSharedUser')}>
          <div class="rounded-full w-10 h-10 border border-gray-500 flex items-center justify-center">
            <div><Icon path={mdiPlus} size="25" /></div>
          </div>
--- a/web/src/lib/components/album-page/albums-table-header.svelte
+++ b/web/src/lib/components/album-page/albums-table-header.svelte
@ -16,6 +16,7 @@

 <th class="text-sm font-medium {option.columnStyle}">
  <button
+    type="button"
    class="rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
    on:click={handleSort}
  >
--- a/web/src/lib/components/album-page/albums-table.svelte
+++ b/web/src/lib/components/album-page/albums-table.svelte
@ -41,6 +41,7 @@
      {@const isCollapsed = isAlbumGroupCollapsed($albumViewSettings, albumGroup.id)}
      {@const iconRotation = isCollapsed ? 'rotate-0' : 'rotate-90'}
      <button
+        type="button"
        on:click={() => toggleAlbumGroupCollapsing(albumGroup.id)}
        class="flex w-full mt-4 rounded-md"
        aria-expanded={!isCollapsed}
--- a/web/src/lib/components/album-page/share-info-modal.svelte
+++ b/web/src/lib/components/album-page/share-info-modal.svelte
@ -141,6 +141,7 @@
              </div>
            {:else if user.id == currentUser?.id}
              <button
+                type="button"
                on:click={() => (selectedRemoveUser = user)}
                class="text-sm font-medium text-immich-primary transition-colors hover:text-immich-primary/75 dark:text-immich-dark-primary"
                >Leave</button
--- a/web/src/lib/components/album-page/user-selection-modal.svelte
+++ b/web/src/lib/components/album-page/user-selection-modal.svelte
@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
  import Dropdown from '$lib/components/elements/dropdown.svelte';
  import Icon from '$lib/components/elements/icon.svelte';
  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
@ -122,7 +121,11 @@
        {#each users as user}
          {#if !Object.keys(selectedUsers).includes(user.id)}
            <div class="flex place-items-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl">
-              <button on:click={() => handleToggle(user)} class="flex w-full place-items-center gap-4 p-4">
+              <button
+                type="button"
+                on:click={() => handleToggle(user)}
+                class="flex w-full place-items-center gap-4 p-4"
+              >
                <UserAvatar {user} size="md" />
                <div class="text-left flex-grow">
                  <p class="text-immich-fg dark:text-immich-dark-fg">
@ -160,6 +163,7 @@

  <div id="shared-buttons" class="mt-4 flex place-content-center place-items-center justify-around">
    <button
+      type="button"
      class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
      on:click={() => dispatch('share')}
    >
@ -168,13 +172,13 @@
    </button>

    {#if sharedLinks.length}
-      <button
+      <a
+        href={AppRoute.SHARED_LINKS}
        class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
-        on:click={() => goto(AppRoute.SHARED_LINKS)}
      >
        <Icon path={mdiShareCircle} size={24} />
        <p class="text-sm">View links</p>
-      </button>
+      </a>
    {/if}
  </div>
 </FullScreenModal>
--- a/web/src/lib/components/asset-viewer/activity-status.svelte
+++ b/web/src/lib/components/asset-viewer/activity-status.svelte
@ -18,12 +18,12 @@
 <div
  class="w-full h-14 flex p-4 text-white items-center justify-center rounded-full gap-4 bg-immich-dark-bg bg-opacity-60"
 >
-  <button class={disabled ? 'cursor-not-allowed' : ''} on:click={() => dispatch('favorite')} {disabled}>
+  <button type="button" class={disabled ? 'cursor-not-allowed' : ''} on:click={() => dispatch('favorite')} {disabled}>
    <div class="items-center justify-center">
      <Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} />
    </div>
  </button>
-  <button on:click={() => dispatch('openActivityTab')}>
+  <button type="button" on:click={() => dispatch('openActivityTab')}>
    <div class="flex gap-2 items-center justify-center">
      <Icon path={mdiCommentOutline} class="scale-x-[-1]" size={24} />
      {#if numberOfComments}
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@ -200,6 +200,7 @@
              <div>
                {#if showDeleteReaction[index]}
                  <button
+                    type="button"
                    class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
                    use:clickOutside
                    on:outclick={() => (showDeleteReaction[index] = false)}
@ -252,6 +253,7 @@
                <div>
                  {#if showDeleteReaction[index]}
                    <button
+                      type="button"
                      class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
                      use:clickOutside
                      on:outclick={() => (showDeleteReaction[index] = false)}
--- a/web/src/lib/components/asset-viewer/album-list-item.svelte
+++ b/web/src/lib/components/asset-viewer/album-list-item.svelte
@ -28,6 +28,7 @@
 </script>

 <button
+  type="button"
  on:click={() => dispatch('album')}
  class="flex w-full gap-4 px-6 py-2 text-left transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
 >
--- a/web/src/lib/components/asset-viewer/navigation-area.svelte
+++ b/web/src/lib/components/asset-viewer/navigation-area.svelte
@ -3,13 +3,11 @@
  export let label: string;
 </script>

-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="my-auto group 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>
+<button
+  type="button"
+  class="my-auto mx-4 rounded-full p-3 text-gray-500 transition hover:bg-gray-500 hover:text-white"
+  aria-label={label}
+  on:click={onClick}
+>
+  <slot />
+</button>
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@ -106,6 +106,7 @@
        <!-- Select asset button  -->
        {#if !readonly && (mouseOver || selected || selectionCandidate)}
          <button
+            type="button"
            on:click={onIconClickedHandler}
            class="absolute p-2 focus:outline-none"
            class:cursor-not-allowed={disabled}
--- a/web/src/lib/components/elements/dropdown.svelte
+++ b/web/src/lib/components/elements/dropdown.svelte
@ -93,6 +93,7 @@
        {@const renderedOption = renderOption(option)}
        {@const buttonStyle = renderedOption.disabled ? '' : 'transition-all hover:bg-gray-300 dark:hover:bg-gray-800'}
        <button
+          type="button"
          class="grid grid-cols-[36px,1fr] place-items-center p-2 disabled:opacity-40 {buttonStyle}"
          disabled={renderedOption.disabled}
          on:click={() => !renderedOption.disabled && handleSelectOption(option)}
--- a/web/src/lib/components/elements/group-tab.svelte
+++ b/web/src/lib/components/elements/group-tab.svelte
@ -7,6 +7,7 @@
 <div class="flex bg-gray-200 dark:bg-immich-dark-gray rounded-2xl h-full">
  {#each filters as filter, index}
    <button
+      type="button"
      class="text-sm px-4 {filter === selected
        ? 'dark:bg-gray-700 bg-gray-300'
        : 'dark:hover:bg-gray-800 hover:bg-gray-300'}  {index === 0 ? 'rounded-l-2xl' : ''} {index ===
--- a/web/src/lib/components/faces-page/assign-face-side-panel.svelte
+++ b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
@ -162,7 +162,7 @@
      {#each showPeople as person (person.id)}
        {#if person.id !== editedPerson.id}
          <div class="w-fit">
-            <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
+            <button type="button" class="w-[90px]" on:click={() => dispatch('reassign', person)}>
              <div class="relative">
                <ImageThumbnail
                  curve
--- a/web/src/lib/components/faces-page/face-thumbnail.svelte
+++ b/web/src/lib/components/faces-page/face-thumbnail.svelte
@ -21,6 +21,7 @@
 </script>

 <button
+  type="button"
  class="relative rounded-lg transition-all"
  on:click={handleOnClicked}
  disabled={!selectable}
--- a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
+++ b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
@ -51,6 +51,7 @@
      </div>

      <button
+        type="button"
        disabled={potentialMergePeople.length === 0}
        class="flex h-28 w-28 items-center rounded-full border-2 border-immich-primary px-1 dark:border-immich-dark-primary md:h-32 md:w-32 md:px-2"
        on:click={() => {
@ -71,13 +72,13 @@
    {:else}
      <div class="grid w-full grid-cols-1 gap-2">
        <div class="px-2">
-          <button on:click={() => (choosePersonToMerge = false)}> <Icon path={mdiArrowLeft} /></button>
+          <button type="button" on:click={() => (choosePersonToMerge = false)}> <Icon path={mdiArrowLeft} /></button>
        </div>
        <div class="flex items-center justify-center">
          <div class="flex flex-wrap justify-center md:grid md:grid-cols-{potentialMergePeople.length}">
            {#each potentialMergePeople as person (person.id)}
              <div class="h-24 w-24 md:h-28 md:w-28">
-                <button class="p-2 w-full" on:click={() => changePersonToMerge(person)}>
+                <button type="button" class="p-2 w-full" on:click={() => changePersonToMerge(person)}>
                  <ImageThumbnail
                    border={true}
                    circle
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/web/src/lib/components/faces-page/person-side-panel.svelte
@ -189,6 +189,7 @@
    </div>
    {#if !isShowLoadingDone}
      <button
+        type="button"
        class="justify-self-end rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
        on:click={() => handleEditFaces()}
      >
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@ -182,10 +182,9 @@
          />

          {#each currentMemory.assets as _, index}
-            <button
+            <a
              class="relative w-full py-2"
-              on:click={() =>
-                goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex}&${QueryParameter.ASSET_INDEX}=${index}`)}
+              href="?{QueryParameter.MEMORY_INDEX}={memoryIndex}&{QueryParameter.ASSET_INDEX}={index}"
            >
              <span class="absolute left-0 h-[2px] w-full bg-gray-500" />
              {#await resetPromise}
@ -196,7 +195,7 @@
                  style:width={`${index < assetIndex ? 100 : index > assetIndex ? 0 : $progress * 100}%`}
                />
              {/await}
-            </button>
+            </a>
          {/each}

          <div>
@ -214,7 +213,11 @@
        class:opacity-0={!galleryInView}
        class:opacity-100={galleryInView}
      >
-        <button on:click={() => memoryWrapper.scrollIntoView({ behavior: 'smooth' })} disabled={!galleryInView}>
+        <button
+          type="button"
+          on:click={() => memoryWrapper.scrollIntoView({ behavior: 'smooth' })}
+          disabled={!galleryInView}
+        >
          <CircleIconButton title="Hide gallery" icon={mdiChevronUp} color="light" />
        </button>
      </div>
@ -231,7 +234,12 @@
          class:opacity-0={!previousMemory}
          class:hover:opacity-70={previousMemory}
        >
-          <button class="relative h-full w-full rounded-2xl" disabled={!previousMemory} on:click={toPreviousMemory}>
+          <button
+            type="button"
+            class="relative h-full w-full rounded-2xl"
+            disabled={!previousMemory}
+            on:click={toPreviousMemory}
+          >
            {#if previousMemory}
              <img
                class="h-full w-full rounded-2xl object-cover"
@ -304,7 +312,12 @@
          class:opacity-0={!nextMemory}
          class:hover:opacity-70={nextMemory}
        >
-          <button class="relative h-full w-full rounded-2xl" on:click={toNextMemory} disabled={!nextMemory}>
+          <button
+            type="button"
+            class="relative h-full w-full rounded-2xl"
+            on:click={toNextMemory}
+            disabled={!nextMemory}
+          >
            {#if nextMemory}
              <img
                class="h-full w-full rounded-2xl object-cover"
--- a/web/src/lib/components/onboarding-page/onboarding-theme.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-theme.svelte
@ -23,6 +23,7 @@

  <div class="flex gap-4 mb-6">
    <button
+      type="button"
      class="w-1/2 aspect-square bg-immich-bg rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-dark-primary/80 border-immich-primary dark:border dark:border-transparent"
      on:click={() => ($colorTheme.value = Theme.LIGHT)}
    >
@ -34,6 +35,7 @@
      </div>
    </button>
    <button
+      type="button"
      class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl dark:border-[3px] dark:border-immich-dark-primary/80 dark:border-immich-dark-primary border border-transparent"
      on:click={() => ($colorTheme.value = Theme.DARK)}
    >
--- a/web/src/lib/components/photos-page/memory-lane.svelte
+++ b/web/src/lib/components/photos-page/memory-lane.svelte
@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
  import Icon from '$lib/components/elements/icon.svelte';
  import { AppRoute, QueryParameter } from '$lib/constants';
  import { memoryStore } from '$lib/stores/memory.store';
@ -46,6 +45,7 @@
        {#if canScrollLeft}
          <div class="absolute left-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
            <button
+              type="button"
              class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
              on:click={scrollLeft}
            >
@ -56,6 +56,7 @@
        {#if canScrollRight}
          <div class="absolute right-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
            <button
+              type="button"
              class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
              on:click={scrollRight}
            >
@ -68,9 +69,9 @@
    <div class="inline-block" bind:offsetWidth={innerWidth}>
      {#each $memoryStore as memory, index (memory.yearsAgo)}
        {#if memory.assets.length > 0}
-          <button
+          <a
            class="memory-card relative mr-8 inline-block aspect-video h-[215px] rounded-xl"
-            on:click={() => goto(`${AppRoute.MEMORY}?${QueryParameter.MEMORY_INDEX}=${index}`)}
+            href="{AppRoute.MEMORY}?{QueryParameter.MEMORY_INDEX}={index}"
          >
            <img
              class="h-full w-full rounded-xl object-cover"
@ -84,7 +85,7 @@
            <div
              class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
            />
-          </button>
+          </a>
        {/if}
      {/each}
    </div>
--- a/web/src/lib/components/shared-components/album-selection-modal.svelte
+++ b/web/src/lib/components/shared-components/album-selection-modal.svelte
@ -77,6 +77,7 @@
      />
      <div class="immich-scrollbar overflow-y-auto">
        <button
+          type="button"
          on:click={handleNew}
          class="flex w-full items-center gap-4 px-6 py-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
        >
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@ -117,7 +117,7 @@
      use:clickOutside={{ onOutclick: () => (hideSuggestion = true) }}
      use:listNavigation={suggestionContainer}
    >
-      <button class="w-full" on:click={() => (hideSuggestion = false)}>
+      <button type="button" class="w-full" on:click={() => (hideSuggestion = false)}>
        <SearchBar
          placeholder="Search places"
          bind:name={searchWord}
@ -133,6 +133,7 @@
        {#if !hideSuggestion}
          {#each suggestedPlaces as place, index}
            <button
+              type="button"
              class=" flex w-full border-t border-gray-400 dark:border-immich-dark-gray h-14 place-items-center bg-gray-200 p-2 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-[#232932] focus:bg-gray-300 focus:dark:bg-[#232932] {index ===
              suggestedPlaces.length - 1
                ? 'rounded-b-lg border-b'
--- a/web/src/lib/components/shared-components/context-menu/menu-option.svelte
+++ b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
@ -7,6 +7,7 @@
 </script>

 <button
+  type="button"
  on:click
  class="w-full bg-slate-100 p-4 text-left text-sm font-medium text-immich-fg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg"
  role="menuitem"
--- a/web/src/lib/components/shared-components/dropdown-button.svelte
+++ b/web/src/lib/components/shared-components/dropdown-button.svelte
@ -22,6 +22,7 @@

 <div id="immich-dropdown" class="relative">
  <button
+    type="button"
    {disabled}
    on:click={toggle}
    aria-expanded={isOpen}
@ -52,6 +53,7 @@
    <div class="absolute mt-2 flex w-full flex-col">
      {#each options.options as option}
        <button
+          type="button"
          on:click={() => {
            selected = option;
            isOpen = false;
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@ -92,6 +92,7 @@

    <div class="mb-4 flex flex-col">
      <button
+        type="button"
        class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
        on:click={() => dispatch('logout')}
      >
--- a/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
@ -17,7 +17,7 @@
  <div class="flex items-center justify-center mt-4">
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
      {#each colors as color}
-        <button on:click={() => dispatch('choose', color)}>
+        <button type="button" on:click={() => dispatch('choose', color)}>
          <UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
        </button>
      {/each}
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@ -119,6 +119,7 @@
          on:escape={() => (shouldShowAccountInfoPanel = false)}
        >
          <button
+            type="button"
            class="flex"
            on:mouseover={() => (shouldShowAccountInfo = true)}
            on:focus={() => (shouldShowAccountInfo = true)}
--- a/web/src/lib/components/shared-components/notification/notification-card.svelte
+++ b/web/src/lib/components/shared-components/notification/notification-card.svelte
@ -101,6 +101,7 @@
  {#if notification.button}
    <p class="pl-[28px] mt-2.5 text-sm">
      <button
+        type="button"
        class="{buttonStyle[notification.type]} rounded px-3 pt-1.5 pb-1 transition-all duration-200"
        on:click={handleButtonClick}
      >
--- a/web/src/lib/components/shared-components/settings/setting-accordion.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-accordion.svelte
@ -27,7 +27,12 @@
 </script>

 <div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700">
-  <button on:click={() => (isOpen = !isOpen)} class="flex w-full place-items-center justify-between text-left">
+  <button
+    type="button"
+    aria-expanded={isOpen}
+    on:click={() => (isOpen = !isOpen)}
+    class="flex w-full place-items-center justify-between text-left"
+  >
    <div>
      <h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
        {title}
@ -38,8 +43,7 @@
      </slot>
    </div>

-    <button
-      aria-expanded={isOpen}
+    <div
      class="immich-circle-icon-button flex place-content-center place-items-center rounded-full p-3 transition-all hover:bg-immich-primary/10 dark:text-immich-dark-fg hover:dark:bg-immich-dark-primary/20"
    >
      <svg
@ -55,7 +59,7 @@
      >
        <path d="M19 9l-7 7-7-7" />
      </svg>
-    </button>
+    </div>
  </button>

  {#if isOpen}
--- a/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
@ -16,6 +16,7 @@
  <div class="left">
    {#if showResetToDefault}
      <button
+        type="button"
        on:click={() => dispatch('reset', { default: true })}
        class="bg-none text-sm font-medium text-immich-primary hover:text-immich-primary/75 dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75"
      >
--- a/web/src/lib/components/shared-components/upload-asset-preview.svelte
+++ b/web/src/lib/components/shared-components/upload-asset-preview.svelte
@ -84,10 +84,11 @@
    </div>
    {#if uploadAsset.state === UploadState.ERROR}
      <div class="flex h-full flex-col place-content-evenly place-items-center justify-items-center pr-2">
-        <button on:click={() => handleRetry(uploadAsset)} title="Retry upload" class="flex text-sm">
+        <button type="button" on:click={() => handleRetry(uploadAsset)} title="Retry upload" class="flex text-sm">
          <span class="text-immich-dark-gray dark:text-immich-dark-fg"><Icon path={mdiRefresh} size="20" /></span>
        </button>
        <button
+          type="button"
          on:click={() => uploadAssetsStore.removeUploadAsset(uploadAsset.id)}
          title="Dismiss error"
          class="flex text-sm"
--- a/web/src/lib/components/shared-components/upload-panel.svelte
+++ b/web/src/lib/components/shared-components/upload-panel.svelte
@ -128,6 +128,7 @@
    {:else}
      <div class="rounded-full">
        <button
+          type="button"
          in:scale={{ duration: 250, easing: quartInOut }}
          on:click={() => (showDetail = true)}
          class="absolute -left-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-immich-primary p-5 text-xs text-gray-200"
@ -136,6 +137,7 @@
        </button>
        {#if $hasError}
          <button
+            type="button"
            in:scale={{ duration: 250, easing: quartInOut }}
            on:click={() => (showDetail = true)}
            class="absolute -right-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-immich-error p-5 text-xs text-gray-200"
@ -144,6 +146,7 @@
          </button>
        {/if}
        <button
+          type="button"
          in:scale={{ duration: 250, easing: quartInOut }}
          on:click={() => (showDetail = true)}
          class="flex h-16 w-16 place-content-center place-items-center rounded-full bg-gray-200 p-5 text-sm text-immich-primary shadow-lg dark:bg-gray-600 dark:text-immich-gray"
--- a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
+++ b/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
@ -37,6 +37,7 @@
    {#if availableUsers.length > 0}
      {#each availableUsers as user}
        <button
+          type="button"
          on:click={() => selectUser(user)}
          class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
        >
--- a/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
@ -53,7 +53,7 @@
      {@const assetData = JSON.stringify(asset, null, 2)}

      <div class="relative">
-        <button on:click={() => onSelectAsset(asset)} class="block relative">
+        <button type="button" on:click={() => onSelectAsset(asset)} class="block relative">
          <!-- THUMBNAIL-->
          <img
            src={getAssetThumbnailUrl(asset.id, ThumbnailFormat.Webp)}
--- a/web/src/lib/components/utilities-page/utilities-menu.svelte
+++ b/web/src/lib/components/utilities-page/utilities-menu.svelte
@ -4,15 +4,13 @@
  import { AppRoute } from '$lib/constants';
 </script>

-<a href={AppRoute.DUPLICATES}>
-  <div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
-    <p class="text-xs font-medium p-4">ORGANIZE YOUR LIBRARY</p>
+<div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
+  <p class="text-xs font-medium p-4">ORGANIZE YOUR LIBRARY</p>

-    <button class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex gap-4 p-4">
-      <span
-        ><Icon path={mdiContentDuplicate} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
-      </span>
-      Review duplicates
-    </button>
-  </div>
-</a>
+  <a href={AppRoute.DUPLICATES} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex gap-4 p-4">
+    <span
+      ><Icon path={mdiContentDuplicate} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
+    </span>
+    Review duplicates
+  </a>
+</div>
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -510,6 +510,7 @@

          <svelte:fragment slot="trailing">
            <button
+              type="button"
              on:click={handleSelectFromComputer}
              class="rounded-lg px-6 py-2 text-sm font-medium text-immich-primary transition-all hover:bg-immich-primary/10 dark:text-immich-dark-primary dark:hover:bg-immich-dark-primary/25"
            >
@ -577,13 +578,13 @@
                    {/if}

                    <!-- owner -->
-                    <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
+                    <button type="button" on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
                      <UserAvatar user={album.owner} size="md" />
                    </button>

                    <!-- users with write access (collaborators) -->
                    {#each album.albumUsers.filter(({ role }) => role === AlbumUserRole.Editor) as { user } (user.id)}
-                      <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
+                      <button type="button" on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
                        <UserAvatar {user} size="md" />
                      </button>
                    {/each}
@ -620,6 +621,7 @@
                <div class="w-[300px]">
                  <p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
                  <button
+                    type="button"
                    on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
                    class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
                  >
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@ -502,6 +502,7 @@
    <div class="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
      {#each people as person, index (person.id)}
        <button
+          type="button"
          class="relative"
          on:click={() => (person.isHidden = !person.isHidden)}
          on:mouseenter={() => (eyeColorMap[person.id] = 'black')}
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -464,6 +464,7 @@
            {:else}
              <div class="relative">
                <button
+                  type="button"
                  class="flex items-center justify-center"
                  title="Edit name"
                  on:click={() => (isEditingName = true)}
@ -507,6 +508,7 @@
                <div bind:this={suggestionContainer}>
                  {#each suggestedPeople as person, index (person.id)}
                    <button
+                      type="button"
                      class="flex w-full border-t border-gray-400 dark:border-immich-dark-gray h-14 place-items-center bg-gray-200 p-2 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-[#232932] focus:bg-gray-300 focus:dark:bg-[#232932] {index ===
                      suggestedPeople.length - 1
                        ? 'rounded-b-lg border-b'
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@ -68,10 +68,10 @@
              rel="noopener noreferrer"
              class="flex grow basis-0 justify-center p-4"
            >
-              <button class="flex flex-col place-content-center place-items-center gap-2">
+              <div class="flex flex-col place-content-center place-items-center gap-2">
                <Icon path={mdiMessage} size={24} />
                <p class="text-sm">Get Help</p>
-              </button>
+              </div>
            </a>

            <a
@ -80,10 +80,10 @@
              rel="noopener noreferrer"
              class="flex grow basis-0 justify-center p-4"
            >
-              <button class="flex flex-col place-content-center place-items-center gap-2">
+              <div class="flex flex-col place-content-center place-items-center gap-2">
                <Icon path={mdiPartyPopper} size={24} />
                <p class="text-sm">Read Changelog</p>
-              </button>
+              </div>
            </a>

            <a
@ -92,10 +92,10 @@
              rel="noopener noreferrer"
              class="flex grow basis-0 justify-center p-4"
            >
-              <button class="flex flex-col place-content-center place-items-center gap-2">
+              <div class="flex flex-col place-content-center place-items-center gap-2">
                <Icon path={mdiCodeTags} size={24} />
                <p class="text-sm">Check Logs</p>
-              </button>
+              </div>
            </a>
          </div>
        </div>