feat(web,a11y): standardize the FullScreenModal UI (#8566)

* feat(web,a11y): standardize the FullScreenModal look

* consistent header, padding, close button, and radius as BaseModal
* vertically stacking ConfirmDialogue CTA buttons in narrow screens
* adding aria-modal tags for screen reader
* add viewport-specific height limits on modals, to enable scrolling
* prevent focus from being hidden under sticky content in modals
* standardize FullScreenModal widths using a Prop

* wip: consistent padding with header

* fix: alignment on "create user" and "edit user" modals

* fix: horizontal modal content alignment

* fix: create user CTA buttons

* chore: remove unnecessary warning

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

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

@@ -3,12 +3,9 @@
   import { quintOut } from 'svelte/easing';
   import { createEventDispatcher, onMount, onDestroy } from 'svelte';
   import { browser } from '$app/environment';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   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';
+  import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
 
   const dispatch = createEventDispatcher<{
     close: void;
@@ -28,6 +25,8 @@
    */
   export let icon: string | undefined = undefined;
 
+  $: titleId = `${id}-title`;
+
   onMount(() => {
     if (browser) {
       const scrollTop = document.documentElement.scrollTop;
@@ -51,7 +50,7 @@
 <FocusTrap>
   <div
     aria-modal="true"
-    aria-labelledby={`${id}-title`}
+    aria-labelledby={titleId}
     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"
@@ -61,23 +60,11 @@
         onOutclick: () => dispatch('close'),
         onEscape: () => dispatch('close'),
       }}
-      class="max-h-[800px] min-h-[200px] w-[450px] overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
+      class="min-h-[200px] w-[450px] overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar scroll-pb-20"
+      style="max-height: min(95vh, 800px);"
       tabindex="-1"
     >
-      <div class="flex place-items-center justify-between px-5 py-3">
-        <div class="flex gap-2 place-items-center">
-          {#if showLogo}
-            <ImmichLogo noText={true} width={32} />
-          {:else if icon}
-            <Icon path={icon} size={32} ariaHidden={true} class="text-immich-primary dark:text-immich-dark-primary" />
-          {/if}
-          <h1 id={`${id}-title`}>
-            {title}
-          </h1>
-        </div>
-
-        <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} title="Close" />
-      </div>
+      <ModalHeader id={titleId} {title} {showLogo} {icon} on:close />
 
       <div>
         <slot />

web/src/lib/components/shared-components/change-date.svelte

@@ -63,16 +63,16 @@
 
 <div role="presentation" on:keydown={handleKeydown}>
   <ConfirmDialogue
+    id="edit-date-time-modal"
     confirmColor="primary"
     cancelColor="secondary"
-    title="Edit date & time"
+    title="Edit date and time"
     prompt="Please select a new date:"
     disabled={!date.isValid}
     onConfirm={handleConfirm}
     onClose={handleCancel}
   >
     <div class="flex flex-col text-md px-4 text-center gap-2" slot="prompt">
-      <div class="mt-2" />
       <div class="flex flex-col">
         <label for="datetime">Date and Time</label>
         <DateInput

web/src/lib/components/shared-components/change-location.svelte

@@ -12,7 +12,6 @@
   import SearchBar from '../elements/search-bar.svelte';
   import { listNavigation } from '$lib/utils/list-navigation';
 
-  export const title = 'Change Location';
   export let asset: AssetResponseDto | undefined = undefined;
 
   interface Point {
@@ -95,10 +94,11 @@
 </script>
 
 <ConfirmDialogue
+  id="change-location-modal"
   confirmColor="primary"
   cancelColor="secondary"
-  title="Change Location"
-  width={800}
+  title="Change location"
+  width="wide"
   onConfirm={handleConfirm}
   onClose={handleCancel}
 >

web/src/lib/components/shared-components/confirm-dialogue.svelte

@@ -3,6 +3,7 @@
   import Button from '../elements/buttons/button.svelte';
   import type { Color } from '$lib/components/elements/buttons/button.svelte';
 
+  export let id: string;
   export let title = 'Confirm';
   export let prompt = 'Are you sure you want to do this?';
   export let confirmText = 'Confirm';
@@ -11,7 +12,7 @@
   export let cancelColor: Color = 'primary';
   export let hideCancelButton = false;
   export let disabled = false;
-  export let width = 500;
+  export let width: 'wide' | 'narrow' = 'narrow';
   export let onClose: () => void;
   export let onConfirm: () => void;
 
@@ -23,35 +24,21 @@
   };
 </script>
 
-<FullScreenModal {onClose}>
-  <div
-    class="max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-    style="width: {width}px"
-  >
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <h1 class="pb-2 text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
-        {title}
-      </h1>
-    </div>
-    <div>
-      <div class="text-md px-4 py-5 text-center">
-        <slot name="prompt">
-          <p>{prompt}</p>
-        </slot>
-      </div>
+<FullScreenModal {title} {id} {onClose} {width}>
+  <div class="text-md py-5 text-center">
+    <slot name="prompt">
+      <p>{prompt}</p>
+    </slot>
+  </div>
 
-      <div class="mt-4 flex w-full gap-4 px-4">
-        {#if !hideCancelButton}
-          <Button color={cancelColor} fullwidth on:click={onClose}>
-            {cancelText}
-          </Button>
-        {/if}
-        <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={disabled || isConfirmButtonDisabled}>
-          {confirmText}
-        </Button>
-      </div>
-    </div>
+  <div class="mt-4 flex flex-col sm:flex-row w-full gap-4">
+    {#if !hideCancelButton}
+      <Button color={cancelColor} fullwidth on:click={onClose}>
+        {cancelText}
+      </Button>
+    {/if}
+    <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={disabled || isConfirmButtonDisabled}>
+      {confirmText}
+    </Button>
   </div>
 </FullScreenModal>

web/src/lib/components/shared-components/full-screen-modal.svelte

@@ -2,8 +2,44 @@
   import { clickOutside } from '../../utils/click-outside';
   import { fade } from 'svelte/transition';
   import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
+  import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
 
-  export let onClose: (() => void) | undefined = undefined;
+  export let onClose: () => void;
+
+  /**
+   * Unique identifier for the modal.
+   */
+  export let id: string;
+  export let title: string;
+  /**
+   * 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;
+  /**
+   * Sets the width of the modal.
+   *
+   * - `wide`: 750px
+   * - `narrow`: 450px
+   * - `auto`: fits the width of the modal content, up to a maximum of 550px
+   */
+  export let width: 'wide' | 'narrow' | 'auto' = 'narrow';
+
+  $: titleId = `${id}-title`;
+
+  let modalWidth: string;
+  $: {
+    if (width === 'wide') {
+      modalWidth = 'w-[750px]';
+    } else if (width === 'narrow') {
+      modalWidth = 'w-[450px]';
+    } else {
+      modalWidth = 'sm:max-w-[550px]';
+    }
+  }
 </script>
 
 <FocusTrap>
@@ -12,8 +48,17 @@
     out:fade={{ duration: 100 }}
     class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
   >
-    <div class="z-[9999]" use:clickOutside={{ onOutclick: onClose, onEscape: onClose }} tabindex="-1">
-      <slot />
+    <div
+      class="z-[9999] max-w-[95vw] max-h-[95vh] {modalWidth} overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
+      use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
+      tabindex="-1"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <ModalHeader id={titleId} {title} {showLogo} {icon} on:close={() => onClose?.()} />
+      <div class="p-5 pt-0">
+        <slot />
+      </div>
     </div>
   </section>
 </FocusTrap>

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { mdiClose } from '@mdi/js';
+
+  const dispatch = createEventDispatcher<{
+    close: void;
+  }>();
+
+  /**
+   * Unique identifier for the header text.
+   */
+  export let id: string;
+  export let title: string;
+  /**
+   * 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;
+</script>
+
+<div class="flex place-items-center justify-between px-5 py-3">
+  <div class="flex gap-2 place-items-center">
+    {#if showLogo}
+      <ImmichLogo noText={true} width={32} />
+    {:else if icon}
+      <Icon path={icon} size={32} ariaHidden={true} class="text-immich-primary dark:text-immich-dark-primary" />
+    {/if}
+    <h1 {id}>
+      {title}
+    </h1>
+  </div>
+
+  <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} title="Close" />
+</div>

web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { UserAvatarColor, type UserResponseDto } from '@immich/sdk';
-  import { mdiClose } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import FullScreenModal from '../full-screen-modal.svelte';
   import UserAvatar from '../user-avatar.svelte';
@@ -15,28 +13,14 @@
   const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
 </script>
 
-<FullScreenModal onClose={() => dispatch('close')}>
-  <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
-    <div
-      class=" rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg p-4"
-    >
-      <div class="flex items-center">
-        <h1 class="px-4 w-full self-center font-medium text-immich-primary dark:text-immich-dark-primary text-sm">
-          SELECT AVATAR COLOR
-        </h1>
-        <div>
-          <CircleIconButton icon={mdiClose} title="Close" on:click={() => dispatch('close')} />
-        </div>
-      </div>
-      <div class="flex items-center justify-center p-4 mt-4">
-        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
-          {#each colors as color}
-            <button on:click={() => dispatch('choose', color)}>
-              <UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
-            </button>
-          {/each}
-        </div>
-      </div>
+<FullScreenModal id="avatar-selector-modal" title="Select avatar color" width="auto" onClose={() => dispatch('close')}>
+  <div class="flex items-center justify-center mt-4">
+    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
+      {#each colors as color}
+        <button on:click={() => dispatch('choose', color)}>
+          <UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
+        </button>
+      {/each}
     </div>
   </div>
 </FullScreenModal>

web/src/lib/components/shared-components/show-shortcuts.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { createEventDispatcher } from 'svelte';
   import FullScreenModal from './full-screen-modal.svelte';
-  import { mdiClose, mdiInformationOutline } from '@mdi/js';
+  import { mdiInformationOutline } from '@mdi/js';
   import Icon from '../elements/icon.svelte';
 
   interface Shortcuts {
@@ -38,63 +37,51 @@
   }>();
 </script>
 
-<FullScreenModal onClose={() => dispatch('close')}>
-  <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
-    <div
-      class="rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-    >
-      <div class="relative px-4 pt-4">
-        <h1 class="px-4 py-4 font-medium text-immich-primary dark:text-immich-dark-primary">Keyboard Shortcuts</h1>
-        <div class="absolute inset-y-0 right-0 px-4 py-4">
-          <CircleIconButton title="Close" icon={mdiClose} on:click={() => dispatch('close')} />
-        </div>
+<FullScreenModal
+  id="keyboard-shortcuts-modal"
+  title="Keyboard shortcuts"
+  width="auto"
+  onClose={() => dispatch('close')}
+>
+  <div class="grid grid-cols-1 gap-4 px-4 pb-4 md:grid-cols-2">
+    <div class="p-4">
+      <h2>General</h2>
+      <div class="text-sm">
+        {#each shortcuts.general as shortcut}
+          <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
+            <div class="flex justify-self-end">
+              {#each shortcut.key as key}
+                <p class="mr-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2">
+                  {key}
+                </p>
+              {/each}
+            </div>
+            <p class="mb-1 mt-1 flex">{shortcut.action}</p>
+          </div>
+        {/each}
       </div>
+    </div>
 
-      <div class="grid grid-cols-1 gap-4 px-4 pb-4 md:grid-cols-2">
-        <div class="px-4 py-4">
-          <h2>General</h2>
-          <div class="text-sm">
-            {#each shortcuts.general as shortcut}
-              <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
-                <div class="flex justify-self-end">
-                  {#each shortcut.key as key}
-                    <p
-                      class="mr-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2"
-                    >
-                      {key}
-                    </p>
-                  {/each}
-                </div>
-                <p class="mb-1 mt-1 flex">{shortcut.action}</p>
-              </div>
-            {/each}
+    <div class="p-4">
+      <h2>Actions</h2>
+      <div class="text-sm">
+        {#each shortcuts.actions as shortcut}
+          <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
+            <div class="flex justify-self-end">
+              {#each shortcut.key as key}
+                <p class="mr-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2">
+                  {key}
+                </p>
+              {/each}
+            </div>
+            <div class="flex items-center gap-2">
+              <p class="mb-1 mt-1 flex">{shortcut.action}</p>
+              {#if shortcut.info}
+                <Icon path={mdiInformationOutline} title={shortcut.info} />
+              {/if}
+            </div>
           </div>
-        </div>
-
-        <div class="px-4 py-4">
-          <h2>Actions</h2>
-          <div class="text-sm">
-            {#each shortcuts.actions as shortcut}
-              <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
-                <div class="flex justify-self-end">
-                  {#each shortcut.key as key}
-                    <p
-                      class="mr-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2"
-                    >
-                      {key}
-                    </p>
-                  {/each}
-                </div>
-                <div class="flex items-center gap-2">
-                  <p class="mb-1 mt-1 flex">{shortcut.action}</p>
-                  {#if shortcut.info}
-                    <Icon path={mdiInformationOutline} title={shortcut.info} />
-                  {/if}
-                </div>
-              </div>
-            {/each}
-          </div>
-        </div>
+        {/each}
       </div>
     </div>
   </div>

web/src/lib/components/shared-components/version-announcement-box.svelte

@@ -33,34 +33,28 @@
 </script>
 
 {#if showModal}
-  <FullScreenModal onClose={() => (showModal = false)}>
-    <div
-      class="max-w-lg rounded-3xl border bg-immich-bg px-8 py-10 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-    >
-      <p class="mb-4 text-2xl">🎉 NEW VERSION AVAILABLE 🎉</p>
+  <FullScreenModal id="new-version-modal" title="🎉 NEW VERSION AVAILABLE" onClose={() => (showModal = false)}>
+    <div>
+      Hi friend, there is a new version of the application please take your time to visit the
+      <span class="font-medium underline"
+        ><a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer"
+          >release notes</a
+        ></span
+      >
+      and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent any misconfigurations,
+      especially if you use WatchTower or any mechanism that handles updating your application automatically.
+    </div>
 
-      <div>
-        Hi friend, there is a new version of the application please take your time to visit the
-        <span class="font-medium underline"
-          ><a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer"
-            >release notes</a
-          ></span
-        >
-        and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent any misconfigurations,
-        especially if you use WatchTower or any mechanism that handles updating your application automatically.
-      </div>
+    <div class="mt-4 font-medium">Your friend, Alex</div>
 
-      <div class="mt-4 font-medium">Your friend, Alex</div>
+    <div class="font-sm mt-8">
+      <code>Server Version: {serverVersion}</code>
+      <br />
+      <code>Latest Version: {releaseVersion}</code>
+    </div>
 
-      <div class="font-sm mt-8">
-        <code>Server Version: {serverVersion}</code>
-        <br />
-        <code>Latest Version: {releaseVersion}</code>
-      </div>
-
-      <div class="mt-8 text-right">
-        <Button fullwidth on:click={onAcknowledge}>Acknowledge</Button>
-      </div>
+    <div class="mt-8 text-right">
+      <Button fullwidth on:click={onAcknowledge}>Acknowledge</Button>
     </div>
   </FullScreenModal>
 {/if}