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/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">
-          <Icon path={mdiClose} ariaLabel="Clear value" />
-        </IconButton>
+        <CircleIconButton on:click={onClear} title="Clear value" icon={mdiClose} size="16" padding="2" />
       {: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">
-            <IconButton title="Search">
-              <div class="flex gap-2">
-                <Icon path={mdiMagnify} size="1.5em" />
-              </div>
-            </IconButton>
+          <a href={AppRoute.SEARCH} id="search-button" class="ml-4 sm:hidden">
+            <CircleIconButton title="Go to search" icon={mdiMagnify} />
           </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,54 +102,41 @@
     on:reset={() => (value = '')}
     on:submit|preventDefault={onSubmit}
   >
-    <label>
-      <div class="absolute inset-y-0 left-0 flex items-center pl-6">
-        <div class="dark:text-immich-dark-fg/75">
-          <button class="flex items-center">
-            <Icon ariaLabel="search" path={mdiMagnify} size="1.5em" />
-          </button>
-        </div>
-      </div>
-      <input
-        type="text"
-        name="q"
-        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 &&
-          $savedSearchTerms.length > 0) ||
-        showFilter
-          ? 'rounded-t-3xl border  border-gray-200 bg-white dark:border-gray-800'
-          : 'rounded-3xl border border-transparent bg-gray-200'}"
-        placeholder="Search your photos"
-        required
-        pattern="^(?!m:$).*$"
-        bind:value
-        bind:this={input}
-        on:click={onFocusIn}
-        on:focus={onFocusIn}
-        disabled={showFilter}
-        use:shortcuts={[
-          { shortcut: { key: 'Escape' }, onShortcut: onFocusOut },
-          { shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
-        ]}
-      />
+    <div class="absolute inset-y-0 left-0 flex items-center pl-2">
+      <CircleIconButton type="submit" title="Search" icon={mdiMagnify} size="20" />
+    </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 &&
+        $savedSearchTerms.length > 0) ||
+      showFilter
+        ? 'rounded-t-3xl border  border-gray-200 bg-white dark:border-gray-800'
+        : 'rounded-3xl border border-transparent bg-gray-200'}"
+      placeholder="Search your photos"
+      required
+      pattern="^(?!m:$).*$"
+      bind:value
+      bind:this={input}
+      on:click={onFocusIn}
+      on:focus={onFocusIn}
+      disabled={showFilter}
+      use:shortcuts={[
+        { shortcut: { key: 'Escape' }, onShortcut: onFocusOut },
+        { shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
+      ]}
+    />
 
-      <div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-5'} flex items-center pl-6 transition-all">
-        <div class="dark:text-immich-dark-fg/75">
-          <IconButton on:click={onFilterClick} title="Show search options">
-            <Icon path={mdiTune} size="1.5em" />
-          </IconButton>
-        </div>
-      </div>
-    </label>
+    <div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-2'} flex items-center pl-6 transition-all">
+      <CircleIconButton title="Show search options" icon={mdiTune} on:click={onFilterClick} size="20" />
+    </div>
     {#if showClearIcon}
-      <div class="absolute inset-y-0 right-0 flex items-center pr-4">
-        <button
-          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 class="absolute inset-y-0 right-0 flex items-center pr-2">
+        <CircleIconButton type="reset" icon={mdiClose} title="Clear" size="20" />
       </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">
-    {#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>
+  <CircleIconButton title="Toggle theme" {icon} {viewBox} on:click={handleToggleTheme} />
 {/if}