feat(web,a11y): standardize base modal (#8388)

* consistent headings
* remove escape key handler
* add aria attributes

web/src/lib/components/shared-components/album-selection-modal.svelte

@@ -43,17 +43,16 @@
   const handleNew = () => {
     dispatch('newAlbum', search.length > 0 ? search : '');
   };
+
+  const getTitle = () => {
+    if (shared) {
+      return 'Add to shared album';
+    }
+    return 'Add to album';
+  };
 </script>
 
-<BaseModal on:close on:escape>
-  <svelte:fragment slot="title">
-    <span class="flex place-items-center gap-2">
-      <p class="font-medium">
-        Add to {shared ? 'Shared ' : ''}Album
-      </p>
-    </span>
-  </svelte:fragment>
-
+<BaseModal id="album-selection-modal" title={getTitle()} on:close>
   <div class="mb-2 flex max-h-[400px] flex-col">
     {#if loading}
       {#each { length: 3 } as _}
@@ -69,11 +68,9 @@
         </div>
       {/each}
     {:else}
-      <!-- svelte-ignore a11y-autofocus -->
       <input
         class="border-b-4 border-immich-bg bg-immich-bg px-6 py-2 text-2xl focus:border-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:focus:border-immich-dark-primary"
         placeholder="Search"
-        autofocus
         bind:value={search}
       />
       <div class="immich-scrollbar overflow-y-auto">

web/src/lib/components/shared-components/base-modal.svelte

@@ -7,12 +7,26 @@
   import { clickOutside } from '$lib/utils/click-outside';
   import { mdiClose } from '@mdi/js';
   import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
 
   const dispatch = createEventDispatcher<{
-    escape: void;
     close: void;
   }>();
+  /**
+   * Unique identifier for the modal.
+   */
+  export let id: string;
+  export let title: string;
   export let zIndex = 9999;
+  /**
+   * If true, the logo will be displayed next to the modal title.
+   */
+  export let showLogo = false;
+  /**
+   * Optional icon to display next to the modal title, if `showLogo` is false.
+   */
+  export let icon: string | undefined = undefined;
 
   onMount(() => {
     if (browser) {
@@ -36,7 +50,8 @@
 
 <FocusTrap>
   <div
-    id="immich-modal"
+    aria-modal="true"
+    aria-labelledby={`${id}-title`}
     style:z-index={zIndex}
     transition:fade={{ duration: 100, easing: quintOut }}
     class="fixed left-0 top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50"
@@ -44,16 +59,23 @@
     <div
       use:clickOutside={{
         onOutclick: () => dispatch('close'),
-        onEscape: () => dispatch('escape'),
+        onEscape: () => dispatch('close'),
       }}
       class="max-h-[800px] min-h-[200px] w-[450px] overflow-y-auto rounded-lg bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
       tabindex="-1"
     >
       <div class="flex place-items-center justify-between px-5 py-3">
-        <div>
-          <slot name="title">
-            <p>Modal Title</p>
-          </slot>
+        <div class="flex items-center">
+          {#if showLogo}
+            <ImmichLogo noText={true} width={24} />
+            <div class="w-2" />
+          {:else if icon}
+            <Icon path={icon} size={24} ariaHidden={true} class="text-immich-primary dark:text-immich-dark-primary" />
+            <div class="w-2" />
+          {/if}
+          <h1 id={`${id}-title`} class="text-xl font-medium text-immich-primary dark:text-immich-dark-primary mt-1">
+            {title}
+          </h1>
         </div>
 
         <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} title="Close" />

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -143,20 +143,16 @@
       handleError(error, 'Failed to edit shared link');
     }
   };
+
+  const getTitle = () => {
+    if (editingLink) {
+      return 'Edit link';
+    }
+    return 'Create link to share';
+  };
 </script>
 
-<BaseModal on:close={() => dispatch('close')} on:escape={() => dispatch('escape')}>
-  <svelte:fragment slot="title">
-    <span class="flex place-items-center gap-2">
-      <Icon path={mdiLink} size={24} />
-      {#if editingLink}
-        <p class="font-medium text-immich-fg dark:text-immich-dark-fg">Edit link</p>
-      {:else}
-        <p class="font-medium text-immich-fg dark:text-immich-dark-fg">Create link to share</p>
-      {/if}
-    </span>
-  </svelte:fragment>
-
+<BaseModal id="create-shared-link-modal" title={getTitle()} icon={mdiLink} on:close>
   <section class="mx-6 mb-6">
     {#if shareType === SharedLinkType.Album}
       {#if !editingLink}

web/src/lib/components/shared-components/profile-image-cropper.svelte

@@ -71,12 +71,7 @@
   };
 </script>
 
-<BaseModal on:close on:escape>
-  <svelte:fragment slot="title">
-    <span class="flex place-items-center gap-2">
-      <p class="font-medium">Set profile picture</p>
-    </span>
-  </svelte:fragment>
+<BaseModal id="profile-image-cropper" title="Set profile picture" on:close>
   <div class="flex place-items-center items-center justify-center">
     <div
       class="relative flex aspect-square w-1/2 overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"