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

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

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