feat(web,a11y): replace IconButton with CircleIconButton (#9153)

* feat(web,a11y): replace IconButton with CircleIconButton

* wip: cleanup

* wip: bring back viewbox

* fix: add label to search bar

web/src/lib/components/album-page/album-card.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
   import type { AlbumResponseDto } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { getContextMenuPosition, type ContextMenuPosition } from '$lib/utils/context-menu';
   import { getShortDateRange } from '$lib/utils/date-time';
-  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
   import AlbumCover from '$lib/components/album-page/album-cover.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let album: AlbumResponseDto;
   export let showOwner = false;
@@ -33,9 +32,15 @@
       class="absolute right-6 top-6 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
       data-testid="context-button-parent"
     >
-      <IconButton color="transparent-primary" title="Show album options" on:click={showAlbumContextMenu}>
+      <CircleIconButton
-        <Icon path={mdiDotsVertical} size="20" class="icon-white-drop-shadow text-white" />
+        color="light"
-      </IconButton>
+        title="Show album options"
+        icon={mdiDotsVertical}
+        size="20"
+        padding="2"
+        class="icon-white-drop-shadow"
+        on:click={showAlbumContextMenu}
+      />
     </div>
   {/if}
 

web/src/lib/components/elements/buttons/circle-icon-button.svelte

@@ -2,6 +2,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   type Color = 'transparent' | 'light' | 'dark' | 'gray' | 'primary' | 'opaque';
 
+  export let type: 'button' | 'submit' | 'reset' = 'button';
   export let icon: string;
   export let color: Color = 'transparent';
   export let title: string;
@@ -9,6 +10,10 @@
   export let size = '24';
   export let hideMobile = false;
   export let buttonSize: string | undefined = undefined;
+  /**
+   * viewBox attribute for the SVG icon.
+   */
+  export let viewBox: string | undefined = undefined;
 
   /**
    * Override the default styling of the button for specific use cases, such as the icon color.
@@ -32,10 +37,11 @@
 
 <button
   {title}
+  {type}
   style:width={buttonSize ? buttonSize + 'px' : ''}
   style:height={buttonSize ? buttonSize + 'px' : ''}
   class="flex place-content-center place-items-center rounded-full {colorClass} p-{padding} transition-all hover:dark:text-immich-dark-gray {className} {mobileClass}"
   on:click
 >
-  <Icon path={icon} {size} ariaLabel={title} color="currentColor" />
+  <Icon path={icon} {size} ariaLabel={title} {viewBox} color="currentColor" />
 </button>

web/src/lib/components/elements/buttons/icon-button.svelte

@@ -1,14 +0,0 @@
-<script lang="ts" context="module">
-  export type Color = 'transparent-primary' | 'transparent-gray' | 'overlay-primary';
-</script>
-
-<script lang="ts">
-  import Button from './button.svelte';
-
-  export let color: Color = 'transparent-primary';
-  export let title: string | undefined = undefined;
-</script>
-
-<Button size="icon" {color} {title} shadow={false} rounded="full" on:click>
-  <slot />
-</Button>

web/src/lib/components/faces-page/people-card.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
@@ -13,10 +12,10 @@
   } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import IconButton from '../elements/buttons/icon-button.svelte';
   import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
   import Portal from '../shared-components/portal/portal.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let person: PersonResponseDto;
   export let preload = false;
@@ -73,17 +72,17 @@
     {/if}
   </a>
 
-  <button
+  <div class="absolute right-2 top-2" class:hidden={!showVerticalDots}>
-    class="absolute right-2 top-2"
+    <CircleIconButton
-    on:click|stopPropagation|preventDefault={showMenu}
+      color="light"
-    class:hidden={!showVerticalDots}
+      icon={mdiDotsVertical}
-    data-testid="context-button-parent"
+      title="Show person options"
-    id={`icon-${person.id}`}
+      size="20"
-  >
+      padding="2"
-    <IconButton color="transparent-primary">
+      class="icon-white-drop-shadow"
-      <Icon path={mdiDotsVertical} size="20" class="icon-white-drop-shadow text-white" />
+      on:click={showMenu}
-    </IconButton>
+    />
-  </button>
+  </div>
 </div>
 
 {#if showContextMenu}

web/src/lib/components/faces-page/show-hide.svelte

@@ -2,11 +2,11 @@
   import { fly } from 'svelte/transition';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { quintOut } from 'svelte/easing';
-  import IconButton from '../elements/buttons/icon-button.svelte';
   import { createEventDispatcher } from 'svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { mdiClose, mdiEye, mdiEyeOff, mdiRestart } from '@mdi/js';
   import { locale } from '$lib/stores/preferences.store';
+  import Button from '$lib/components/elements/buttons/button.svelte';
 
   const dispatch = createEventDispatcher<{
     close: void;
@@ -45,7 +45,7 @@
         />
       </div>
       {#if !showLoadingSpinner}
-        <IconButton on:click={() => dispatch('done')}>Done</IconButton>
+        <Button on:click={() => dispatch('done')} size="sm" rounded="lg">Done</Button>
       {:else}
         <LoadingSpinner />
       {/if}

web/src/lib/components/shared-components/combobox.svelte

@@ -14,11 +14,11 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiMagnify, mdiUnfoldMoreHorizontal, mdiClose } from '@mdi/js';
   import { createEventDispatcher, tick } from 'svelte';
-  import IconButton from '../elements/buttons/icon-button.svelte';
   import type { FormEventHandler } from 'svelte/elements';
   import { shortcuts } from '$lib/utils/shortcut';
   import { clickOutside } from '$lib/utils/click-outside';
   import { focusOutside } from '$lib/utils/focus-outside';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   /**
    * Unique identifier for the combobox.
@@ -199,9 +199,7 @@
       class:pointer-events-none={!selectedOption}
     >
       {#if selectedOption}
-        <IconButton color="transparent-gray" on:click={onClear} title="Clear value">
+        <CircleIconButton on:click={onClear} title="Clear value" icon={mdiClose} size="16" padding="2" />
-          <Icon path={mdiClose} ariaLabel="Clear value" />
-        </IconButton>
       {:else if !isOpen}
         <Icon path={mdiUnfoldMoreHorizontal} ariaHidden={true} />
       {/if}

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
@@ -18,6 +17,7 @@
   import ThemeButton from '../theme-button.svelte';
   import UserAvatar from '../user-avatar.svelte';
   import AccountInfoPanel from './account-info-panel.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let showUploadButton = true;
 
@@ -58,12 +58,8 @@
 
       <section class="flex place-items-center justify-end gap-4 max-sm:w-full">
         {#if $featureFlags.search}
-          <a href={AppRoute.SEARCH} id="search-button" class="pl-4 sm:hidden">
+          <a href={AppRoute.SEARCH} id="search-button" class="ml-4 sm:hidden">
-            <IconButton title="Search">
+            <CircleIconButton title="Go to search" icon={mdiMagnify} />
-              <div class="flex gap-2">
-                <Icon path={mdiMagnify} size="1.5em" />
-              </div>
-            </IconButton>
           </a>
         {/if}
 

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
   import { AppRoute } from '$lib/constants';
-  import Icon from '$lib/components/elements/icon.svelte';
   import { goto } from '$app/navigation';
   import { isSearchEnabled, preventRaceConditionSearchBar, savedSearchTerms } from '$lib/stores/search.store';
   import { clickOutside } from '$lib/utils/click-outside';
   import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
-  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
   import SearchHistoryBox from './search-history-box.svelte';
   import SearchFilterBox from './search-filter-box.svelte';
   import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
@@ -13,6 +11,7 @@
   import { handlePromiseError } from '$lib/utils';
   import { shortcuts } from '$lib/utils/shortcut';
   import { focusOutside } from '$lib/utils/focus-outside';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let value = '';
   export let grayTheme: boolean;
@@ -103,17 +102,14 @@
     on:reset={() => (value = '')}
     on:submit|preventDefault={onSubmit}
   >
-    <label>
+    <div class="absolute inset-y-0 left-0 flex items-center pl-2">
-      <div class="absolute inset-y-0 left-0 flex items-center pl-6">
+      <CircleIconButton type="submit" title="Search" icon={mdiMagnify} size="20" />
-        <div class="dark:text-immich-dark-fg/75">
-          <button class="flex items-center">
-            <Icon ariaLabel="search" path={mdiMagnify} size="1.5em" />
-          </button>
-        </div>
     </div>
+    <label for="main-search-bar" class="sr-only">Search your photos</label>
     <input
       type="text"
       name="q"
+      id="main-search-bar"
       class="w-full {grayTheme
         ? 'dark:bg-immich-dark-gray'
         : 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {(showHistory &&
@@ -135,22 +131,12 @@
       ]}
     />
 
-      <div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-5'} flex items-center pl-6 transition-all">
+    <div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-2'} flex items-center pl-6 transition-all">
-        <div class="dark:text-immich-dark-fg/75">
+      <CircleIconButton title="Show search options" icon={mdiTune} on:click={onFilterClick} size="20" />
-          <IconButton on:click={onFilterClick} title="Show search options">
-            <Icon path={mdiTune} size="1.5em" />
-          </IconButton>
     </div>
-      </div>
-    </label>
     {#if showClearIcon}
-      <div class="absolute inset-y-0 right-0 flex items-center pr-4">
+      <div class="absolute inset-y-0 right-0 flex items-center pr-2">
-        <button
+        <CircleIconButton type="reset" icon={mdiClose} title="Clear" size="20" />
-          type="reset"
-          class="rounded-full p-2 hover:bg-immich-primary/5 active:bg-immich-primary/10 dark:text-immich-dark-fg/75 dark:hover:bg-immich-dark-primary/25 dark:active:bg-immich-dark-primary/[.35]"
-        >
-          <Icon ariaLabel="clear" path={mdiClose} size="1.5em" />
-        </button>
       </div>
     {/if}
 

web/src/lib/components/shared-components/theme-button.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
   import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { Theme } from '$lib/constants';
   import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
-  import IconButton from '../elements/buttons/icon-button.svelte';
+
-  import Icon from '../elements/icon.svelte';
+  $: icon = $colorTheme.value === Theme.LIGHT ? moonPath : sunPath;
+  $: viewBox = $colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox;
 </script>
 
 {#if !$colorTheme.system}
-  <IconButton on:click={handleToggleTheme} title="Toggle theme">
+  <CircleIconButton title="Toggle theme" {icon} {viewBox} on:click={handleToggleTheme} />
-    {#if $colorTheme.value === Theme.LIGHT}
-      <Icon path={moonPath} viewBox={sunViewBox} class="h-6 w-6" />
-    {:else}
-      <Icon path={sunPath} viewBox={moonViewBox} class="h-6 w-6" />
-    {/if}
-  </IconButton>
 {/if}

web/src/routes/(user)/people/+page.svelte

@@ -3,7 +3,6 @@
   import { page } from '$app/stores';
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
-  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
   import PeopleCard from '$lib/components/faces-page/people-card.svelte';
@@ -41,6 +40,7 @@
   import type { PageData } from './$types';
   import { locale } from '$lib/stores/preferences.store';
   import { clearQueryParam } from '$lib/utils/navigation';
+  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
 
   export let data: PageData;
 
@@ -429,12 +429,12 @@
             />
           </div>
         </div>
-        <IconButton on:click={() => (selectHidden = !selectHidden)}>
+        <LinkButton on:click={() => (selectHidden = !selectHidden)}>
           <div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
             <Icon path={mdiEyeOutline} size="18" />
             <p class="ml-2">Show & hide people</p>
           </div>
-        </IconButton>
+        </LinkButton>
       </div>
     {/if}
   </svelte:fragment>

web/src/routes/(user)/user-settings/+page.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
   import { mdiKeyboard } from '@mdi/js';
   import type { PageData } from './$types';
-  import Icon from '$lib/components/elements/icon.svelte';
   import ShowShortcuts from '$lib/components/shared-components/show-shortcuts.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let data: PageData;
   export let isShowKeyboardShortcut = false;
@@ -13,9 +12,11 @@
 
 <UserPageLayout title={data.meta.title}>
   <svelte:fragment slot="buttons">
-    <IconButton on:click={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}>
+    <CircleIconButton
-      <Icon path={mdiKeyboard} />
+      icon={mdiKeyboard}
-    </IconButton>
+      title="Show keyboard shortcuts"
+      on:click={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}
+    />
   </svelte:fragment>
   <section class="mx-4 flex place-content-center">
     <div class="w-full max-w-3xl">