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
2024-04-29 21:17:22 +07:00 · 2024-04-29 21:17:22 +07:00 · 72ce81f0c2
parent 0c9bf2835d
commit 72ce81f0c2
11 changed files with 85 additions and 112 deletions
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/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}>
-        <Icon path={mdiDotsVertical} size="20" class="icon-white-drop-shadow text-white" />
-      </IconButton>
+      <CircleIconButton
+        color="light"
+        title="Show album options"
+        icon={mdiDotsVertical}
+        size="20"
+        padding="2"
+        class="icon-white-drop-shadow"
+        on:click={showAlbumContextMenu}
+      />
    </div>
  {/if}

--- a/web/src/lib/components/elements/buttons/circle-icon-button.svelte
+++ b/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>
--- a/web/src/lib/components/elements/buttons/icon-button.svelte
+++ b/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>
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/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
-    class="absolute right-2 top-2"
-    on:click|stopPropagation|preventDefault={showMenu}
-    class:hidden={!showVerticalDots}
-    data-testid="context-button-parent"
-    id={`icon-${person.id}`}
-  >
-    <IconButton color="transparent-primary">
-      <Icon path={mdiDotsVertical} size="20" class="icon-white-drop-shadow text-white" />
-    </IconButton>
-  </button>
+  <div class="absolute right-2 top-2" class:hidden={!showVerticalDots}>
+    <CircleIconButton
+      color="light"
+      icon={mdiDotsVertical}
+      title="Show person options"
+      size="20"
+      padding="2"
+      class="icon-white-drop-shadow"
+      on:click={showMenu}
+    />
+  </div>
 </div>

 {#if showContextMenu}
--- a/web/src/lib/components/faces-page/show-hide.svelte
+++ b/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}
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/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}
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/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}

--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/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 {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 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-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}

--- a/web/src/lib/components/shared-components/theme-button.svelte
+++ b/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}
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/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>
--- a/web/src/routes/(user)/user-settings/+page.svelte
+++ b/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)}>
-      <Icon path={mdiKeyboard} />
-    </IconButton>
+    <CircleIconButton
+      icon={mdiKeyboard}
+      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">