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