feat(web, a11y): focus management for modals and popups (#8298)

* feat(web, a11y): focus management for modals and popups

* feat: hide asset options dropdown on escape key

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

@@ -45,7 +45,7 @@
   };
 </script>
 
-<BaseModal on:close={() => dispatch('close')}>
+<BaseModal on:close on:escape>
   <svelte:fragment slot="title">
     <span class="flex place-items-center gap-2">
       <p class="font-medium">

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

@@ -6,13 +6,13 @@
   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';
 
   const dispatch = createEventDispatcher<{
     escape: void;
     close: void;
   }>();
   export let zIndex = 9999;
-  export let ignoreClickOutside = false;
 
   onMount(() => {
     if (browser) {
@@ -34,36 +34,40 @@
   });
 </script>
 
-<div
-  id="immich-modal"
-  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"
->
+<FocusTrap>
   <div
-    use:clickOutside
-    on:outclick={() => !ignoreClickOutside && dispatch('close')}
-    on:escape={() => dispatch('escape')}
-    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"
+    id="immich-modal"
+    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"
   >
-    <div class="flex place-items-center justify-between px-5 py-3">
+    <div
+      use:clickOutside={{
+        onOutclick: () => dispatch('close'),
+        onEscape: () => dispatch('escape'),
+      }}
+      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>
+
+        <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} />
+      </div>
+
       <div>
-        <slot name="title">
-          <p>Modal Title</p>
-        </slot>
+        <slot />
       </div>
 
-      <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} />
+      {#if $$slots['sticky-bottom']}
+        <div class="sticky bottom-0 bg-immich-bg px-5 pb-5 pt-3 dark:bg-immich-dark-gray">
+          <slot name="sticky-bottom" />
+        </div>
+      {/if}
     </div>
-
-    <div>
-      <slot />
-    </div>
-
-    {#if $$slots['sticky-bottom']}
-      <div class="sticky bottom-0 bg-immich-bg px-5 pb-5 pt-3 dark:bg-immich-dark-gray">
-        <slot name="sticky-bottom" />
-      </div>
-    {/if}
   </div>
-</div>
+</FocusTrap>

web/src/lib/components/shared-components/combobox.svelte

@@ -185,7 +185,8 @@
         },
         {
           shortcut: { key: 'Escape' },
-          onShortcut: () => {
+          onShortcut: (event) => {
+            event.stopPropagation();
             closeDropdown();
           },
         },

web/src/lib/components/shared-components/focus-trap.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { shortcuts } from '$lib/utils/shortcut';
+  import { onMount, onDestroy } from 'svelte';
+
+  let container: HTMLElement;
+  let triggerElement: HTMLElement;
+
+  onMount(() => {
+    triggerElement = document.activeElement as HTMLElement;
+    const focusableElements = getFocusableElements();
+    focusableElements[0]?.focus();
+  });
+
+  onDestroy(() => {
+    triggerElement?.focus();
+  });
+
+  const getFocusableElements = () => {
+    return Array.from(
+      container.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
+    ) as HTMLElement[];
+  };
+
+  const trapFocus = (direction: 'forward' | 'backward', event: KeyboardEvent) => {
+    const focusableElements = getFocusableElements();
+    const elementCount = focusableElements.length;
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements.at(elementCount - 1);
+
+    if (document.activeElement === lastElement && direction === 'forward') {
+      event.preventDefault();
+      firstElement?.focus();
+    } else if (document.activeElement === firstElement && direction === 'backward') {
+      event.preventDefault();
+      lastElement?.focus();
+    }
+  };
+</script>
+
+<div
+  bind:this={container}
+  use:shortcuts={[
+    {
+      ignoreInputFields: false,
+      shortcut: { key: 'Tab' },
+      onShortcut: (event) => {
+        trapFocus('forward', event);
+      },
+      preventDefault: false,
+    },
+    {
+      ignoreInputFields: false,
+      shortcut: { key: 'Tab', shift: true },
+      onShortcut: (event) => {
+        trapFocus('backward', event);
+      },
+      preventDefault: false,
+    },
+  ]}
+>
+  <slot />
+</div>

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

@@ -1,16 +1,19 @@
 <script lang="ts">
   import { clickOutside } from '../../utils/click-outside';
   import { fade } from 'svelte/transition';
+  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
 
   export let onClose: (() => void) | undefined = undefined;
 </script>
 
-<section
-  in:fade={{ duration: 100 }}
-  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 }}>
-    <slot />
-  </div>
-</section>
+<FocusTrap>
+  <section
+    in:fade={{ duration: 100 }}
+    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>
+  </section>
+</FocusTrap>

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -11,6 +11,7 @@
   import { notificationController, NotificationType } from '../notification/notification';
   import UserAvatar from '../user-avatar.svelte';
   import AvatarSelector from './avatar-selector.svelte';
+  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
 
   let isShowSelectAvatar = false;
 
@@ -46,19 +47,20 @@
   };
 </script>
 
-<div
-  in:fade={{ duration: 100 }}
-  out:fade={{ duration: 100 }}
-  id="account-info-panel"
-  class="absolute right-[25px] top-[75px] z-[100] w-[360px] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
->
+<FocusTrap>
   <div
-    class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
+    in:fade={{ duration: 100 }}
+    out:fade={{ duration: 100 }}
+    id="account-info-panel"
+    class="absolute right-[25px] top-[75px] z-[100] w-[360px] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
   >
-    <div class="relative">
-      {#key $user}
-        <UserAvatar user={$user} size="xl" />
-
+    <div
+      class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
+    >
+      <div class="relative">
+        {#key $user}
+          <UserAvatar user={$user} size="xl" />
+        {/key}
         <div
           class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6 border dark:border-immich-dark-primary bg-immich-primary"
         >
@@ -69,35 +71,35 @@
             <Icon path={mdiPencil} />
           </button>
         </div>
-      {/key}
-    </div>
-    <div>
-      <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
-        {$user.name}
-      </p>
-      <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
+      </div>
+      <div>
+        <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
+          {$user.name}
+        </p>
+        <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
+      </div>
+
+      <a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
+        <Button color="dark-gray" size="sm" shadow={false} border>
+          <div class="flex place-content-center place-items-center gap-2 px-2">
+            <Icon path={mdiCog} size="18" />
+            Account Settings
+          </div>
+        </Button>
+      </a>
     </div>
 
-    <a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
-      <Button color="dark-gray" size="sm" shadow={false} border>
-        <div class="flex place-content-center place-items-center gap-2 px-2">
-          <Icon path={mdiCog} size="18" />
-          Account Settings
-        </div>
-      </Button>
-    </a>
+    <div class="mb-4 flex flex-col">
+      <button
+        class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
+        on:click={() => dispatch('logout')}
+      >
+        <Icon path={mdiLogout} size={24} />
+        Sign Out</button
+      >
+    </div>
   </div>
-
-  <div class="mb-4 flex flex-col">
-    <button
-      class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
-      on:click={() => dispatch('logout')}
-    >
-      <Icon path={mdiLogout} size={24} />
-      Sign Out</button
-    >
-  </div>
-</div>
+</FocusTrap>
 {#if isShowSelectAvatar}
   <AvatarSelector
     user={$user}

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

@@ -71,7 +71,7 @@
   };
 </script>
 
-<BaseModal on:close>
+<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>