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

* consistent headings * remove escape key handler * add aria attributes
2024-11-21 18:16:55 +02:00 · 2024-04-02 15:05:02 +00:00 · 2024-04-02 15:05:02 +00:00 · f7afc0334e
commit f7afc0334e
parent 28e8e539f6
10 changed files with 53 additions and 86 deletions
--- a/web/src/lib/components/album-page/share-info-modal.svelte
+++ b/web/src/lib/components/album-page/share-info-modal.svelte
@ -66,13 +66,7 @@
 </script>

 {#if !selectedRemoveUser}
-  <BaseModal on:close={() => dispatch('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>
-
+  <BaseModal id="share-info-modal" title="Options" on:close>
    <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">
--- a/web/src/lib/components/album-page/user-selection-modal.svelte
+++ b/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')}>
-  <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>
-
+<BaseModal id="user-selection-modal" title="Invite to album" showLogo on:close>
  {#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>
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/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
-        {asset}
-        on:close={() => (isShowProfileImageCrop = false)}
-        on:escape={() => (isShowProfileImageCrop = false)}
-      />
+      <ProfileImageCropper {asset} on:close={() => (isShowProfileImageCrop = false)} />
    {/if}

    {#if isShowShareModal}
-      <CreateSharedLinkModal
-        assetIds={[asset.id]}
-        on:close={() => (isShowShareModal = false)}
-        on:escape={() => (isShowShareModal = false)}
-      />
+      <CreateSharedLinkModal assetIds={[asset.id]} on:close={() => (isShowShareModal = false)} />
    {/if}
  </section>
 </FocusTrap>
--- a/web/src/lib/components/photos-page/actions/create-shared-link.svelte
+++ b/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
-    assetIds={[...getAssets()].map(({ id }) => id)}
-    on:close={() => (showModal = false)}
-    on:escape={escape}
-  />
+  <CreateSharedLinkModal assetIds={[...getAssets()].map(({ id }) => id)} on:close={() => (showModal = false)} />
 {/if}
--- a/web/src/lib/components/shared-components/album-selection-modal.svelte
+++ b/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">
--- a/web/src/lib/components/shared-components/base-modal.svelte
+++ b/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" />
--- a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
+++ b/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}
--- a/web/src/lib/components/shared-components/profile-image-cropper.svelte
+++ b/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"
--- a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
+++ b/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')}>
-  <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>
-
+<BaseModal id="partner-selection-modal" title="Add partner" showLogo on:close>
  <div class="immich-scrollbar max-h-[300px] overflow-y-auto">
    {#if availableUsers.length > 0}
      {#each availableUsers as user}
--- a/web/src/routes/(user)/photos/+page.svelte
+++ b/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 />