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

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"
         >

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'

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"

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;

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')}
       >

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}

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)}

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}
       >

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}

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"
       >

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"

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"