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

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

web/src/lib/components/album-page/share-info-modal.svelte

@@ -66,13 +66,7 @@
 </script>
 
 {#if !selectedRemoveUser}
-  <BaseModal on:close={() => dispatch('close')}>
+  <BaseModal id="share-info-modal" title="Options" on:close>
-    <svelte:fragment slot="title">
-      <span class="flex place-items-center gap-2">
-        <p class="font-medium text-immich-fg dark:text-immich-dark-fg">Options</p>
-      </span>
-    </svelte:fragment>
-
     <section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
       <div class="flex w-full place-items-center justify-between gap-4 p-5">
         <div class="flex place-items-center gap-4">

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -13,7 +13,6 @@
   import { createEventDispatcher, onMount } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import BaseModal from '../shared-components/base-modal.svelte';
-  import ImmichLogo from '../shared-components/immich-logo.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
 
   export let album: AlbumResponseDto;
@@ -55,14 +54,7 @@
   };
 </script>
 
-<BaseModal on:close={() => dispatch('close')}>
+<BaseModal id="user-selection-modal" title="Invite to album" showLogo on:close>
-  <svelte:fragment slot="title">
-    <span class="flex place-items-center gap-2">
-      <ImmichLogo noText={true} width={36} />
-      <p class="font-medium">Invite to album</p>
-    </span>
-  </svelte:fragment>
-
   {#if selectedUsers.length > 0}
     <div class="mb-2 flex flex-wrap place-items-center gap-4 overflow-x-auto px-5 py-2 sticky">
       <p class="font-medium">To</p>

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -737,7 +737,6 @@
         on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
         on:album={({ detail }) => handleAddToAlbum(detail)}
         on:close={() => (isShowAlbumPicker = false)}
-        on:escape={() => (isShowAlbumPicker = false)}
       />
     {/if}
 
@@ -751,19 +750,11 @@
     {/if}
 
     {#if isShowProfileImageCrop}
-      <ProfileImageCropper
+      <ProfileImageCropper {asset} on:close={() => (isShowProfileImageCrop = false)} />
-        {asset}
-        on:close={() => (isShowProfileImageCrop = false)}
-        on:escape={() => (isShowProfileImageCrop = false)}
-      />
     {/if}
 
     {#if isShowShareModal}
-      <CreateSharedLinkModal
+      <CreateSharedLinkModal assetIds={[asset.id]} on:close={() => (isShowShareModal = false)} />
-        assetIds={[asset.id]}
-        on:close={() => (isShowShareModal = false)}
-        on:escape={() => (isShowShareModal = false)}
-      />
     {/if}
   </section>
 </FocusTrap>

web/src/lib/components/photos-page/actions/create-shared-link.svelte

@@ -2,26 +2,14 @@
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
   import { mdiShareVariantOutline } from '@mdi/js';
-  import { createEventDispatcher } from 'svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   let showModal = false;
-  const dispatch = createEventDispatcher<{
-    escape: void;
-  }>();
   const { getAssets } = getAssetControlContext();
-  const escape = () => {
-    dispatch('escape');
-    showModal = false;
-  };
 </script>
 
 <CircleIconButton title="Share" icon={mdiShareVariantOutline} on:click={() => (showModal = true)} />
 
 {#if showModal}
-  <CreateSharedLinkModal
+  <CreateSharedLinkModal assetIds={[...getAssets()].map(({ id }) => id)} on:close={() => (showModal = false)} />
-    assetIds={[...getAssets()].map(({ id }) => id)}
-    on:close={() => (showModal = false)}
-    on:escape={escape}
-  />
 {/if}

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>
+<BaseModal id="album-selection-modal" title={getTitle()} on:close>
-  <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>
-
   <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>
+        <div class="flex items-center">
-          <slot name="title">
+          {#if showLogo}
-            <p>Modal Title</p>
+            <ImmichLogo noText={true} width={24} />
-          </slot>
+            <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')}>
+<BaseModal id="create-shared-link-modal" title={getTitle()} icon={mdiLink} on:close>
-  <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>
-
   <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>
+<BaseModal id="profile-image-cropper" title="Set profile picture" on:close>
-  <svelte:fragment slot="title">
-    <span class="flex place-items-center gap-2">
-      <p class="font-medium">Set profile picture</p>
-    </span>
-  </svelte:fragment>
   <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"

web/src/lib/components/user-settings-page/partner-selection-modal.svelte

@@ -3,7 +3,6 @@
   import { createEventDispatcher, onMount } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import BaseModal from '../shared-components/base-modal.svelte';
-  import ImmichLogo from '../shared-components/immich-logo.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
 
   export let user: UserResponseDto;
@@ -33,14 +32,7 @@
   };
 </script>
 
-<BaseModal on:close={() => dispatch('close')}>
+<BaseModal id="partner-selection-modal" title="Add partner" showLogo on:close>
-  <svelte:fragment slot="title">
-    <span class="flex place-items-center gap-2">
-      <ImmichLogo noText width={36} />
-      <p class="font-medium">Add partner</p>
-    </span>
-  </svelte:fragment>
-
   <div class="immich-scrollbar max-h-[300px] overflow-y-auto">
     {#if availableUsers.length > 0}
       {#each availableUsers as user}

web/src/routes/(user)/photos/+page.svelte

@@ -53,7 +53,7 @@
     assets={$selectedAssets}
     clearSelect={() => assetInteractionStore.clearMultiselect()}
   >
-    <CreateSharedLink on:escape={() => (handleEscapeKey = true)} />
+    <CreateSharedLink />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
     <AssetSelectContextMenu icon={mdiPlus} title="Add to...">
       <AddToAlbum />