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/asset-viewer/asset-viewer-nav-bar.svelte

@@ -182,7 +182,12 @@
       {#if !asset.isReadOnly || !asset.isExternal}
         <CircleIconButton isOpacity={true} icon={mdiDeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
       {/if}
-      <div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}>
+      <div
+        use:clickOutside={{
+          onOutclick: () => (isShowAssetOptions = false),
+          onEscape: () => (isShowAssetOptions = false),
+        }}
+      >
         <CircleIconButton isOpacity={true} icon={mdiDotsVertical} on:click={showOptionsMenu} title="More" />
         {#if isShowAssetOptions}
           <ContextMenu {...contextMenuPosition} direction="left">

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

@@ -50,6 +50,7 @@
   import SlideshowBar from './slideshow-bar.svelte';
   import VideoViewer from './video-viewer.svelte';
   import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
@@ -514,10 +515,11 @@
 
 <svelte:document bind:fullscreenElement />
 
-<section
+<FocusTrap>
+  <section
     id="immich-asset-viewer"
     class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
->
+  >
     <!-- Top navigation bar -->
     {#if $slideshowState === SlideshowState.None}
       <div class="z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
@@ -576,7 +578,12 @@
       {#if previewStackedAsset}
         {#key previewStackedAsset.id}
           {#if previewStackedAsset.type === AssetTypeEnum.Image}
-          <PhotoViewer asset={previewStackedAsset} {preloadAssets} on:close={closeViewer} haveFadeTransition={false} />
+            <PhotoViewer
+              asset={previewStackedAsset}
+              {preloadAssets}
+              on:close={closeViewer}
+              haveFadeTransition={false}
+            />
           {:else}
             <VideoViewer
               assetId={previewStackedAsset.id}
@@ -727,6 +734,7 @@
         on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
         on:album={({ detail }) => handleAddToAlbum(detail)}
         on:close={() => (isShowAlbumPicker = false)}
+        on:escape={() => (isShowAlbumPicker = false)}
       />
     {/if}
 
@@ -740,13 +748,22 @@
     {/if}
 
     {#if isShowProfileImageCrop}
-    <ProfileImageCropper {asset} on:close={() => (isShowProfileImageCrop = false)} />
+      <ProfileImageCropper
+        {asset}
+        on:close={() => (isShowProfileImageCrop = false)}
+        on:escape={() => (isShowProfileImageCrop = false)}
+      />
     {/if}
 
     {#if isShowShareModal}
-    <CreateSharedLinkModal assetIds={[asset.id]} on:close={() => (isShowShareModal = false)} />
+      <CreateSharedLinkModal
+        assetIds={[asset.id]}
+        on:close={() => (isShowShareModal = false)}
+        on:escape={() => (isShowShareModal = false)}
+      />
     {/if}
-</section>
+  </section>
+</FocusTrap>
 
 <style>
   #immich-asset-viewer {

web/src/lib/components/forms/edit-user-form.svelte

@@ -10,6 +10,7 @@
   import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
 
   export let user: UserResponseDto;
   export let canResetPassword = true;
@@ -90,9 +91,10 @@
   }
 </script>
 
-<div
+<FocusTrap>
+  <div
     class="relative max-h-screen w-[500px] max-w-[95vw] overflow-y-auto 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"
->
+  >
     <div class="absolute top-0 right-0 px-2 py-2 h-fit">
       <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
     </div>
@@ -159,7 +161,8 @@
         <Button type="submit" fullwidth>Confirm</Button>
       </div>
     </form>
-</div>
+  </div>
+</FocusTrap>
 
 {#if isShowResetPasswordConfirmation}
   <ConfirmDialogue

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,17 +34,20 @@
   });
 </script>
 
-<div
+<FocusTrap>
+  <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"
->
+  >
     <div
-    use:clickOutside
+      use:clickOutside={{
-    on:outclick={() => !ignoreClickOutside && dispatch('close')}
+        onOutclick: () => dispatch('close'),
-    on:escape={() => dispatch('escape')}
+        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>
@@ -66,4 +69,5 @@
         </div>
       {/if}
     </div>
-</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
+<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 }}>
+    <div class="z-[9999]" use:clickOutside={{ onOutclick: onClose, onEscape: onClose }} tabindex="-1">
       <slot />
     </div>
-</section>
+  </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
+<FocusTrap>
+  <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"
->
+  >
     <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,7 +71,6 @@
             <Icon path={mdiPencil} />
           </button>
         </div>
-      {/key}
       </div>
       <div>
         <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
@@ -97,7 +98,8 @@
         Sign Out</button
       >
     </div>
-</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>

web/src/lib/utils/click-outside.ts

@@ -43,12 +43,12 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
   };
 
   document.addEventListener('click', handleClick, true);
-  document.addEventListener('keydown', handleKey, true);
+  node.addEventListener('keydown', handleKey, false);
 
   return {
     destroy() {
       document.removeEventListener('click', handleClick, true);
-      document.removeEventListener('keydown', handleKey, true);
+      node.removeEventListener('keydown', handleKey, false);
     },
   };
 }

web/src/lib/utils/shortcut.ts

@@ -12,6 +12,7 @@ export type ShortcutOptions<T = HTMLElement> = {
   shortcut: Shortcut;
   ignoreInputFields?: boolean;
   onShortcut: (event: KeyboardEvent & { currentTarget: T }) => unknown;
+  preventDefault?: boolean;
 };
 
 export const shouldIgnoreShortcut = (event: KeyboardEvent): boolean => {
@@ -53,13 +54,15 @@ export const shortcuts = <T extends HTMLElement>(
   function onKeydown(event: KeyboardEvent) {
     const ignoreShortcut = shouldIgnoreShortcut(event);
 
-    for (const { shortcut, onShortcut, ignoreInputFields = true } of options) {
+    for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true } of options) {
       if (ignoreInputFields && ignoreShortcut) {
         continue;
       }
 
       if (matchesShortcut(event, shortcut)) {
+        if (preventDefault) {
           event.preventDefault();
+        }
         onShortcut(event as KeyboardEvent & { currentTarget: T });
         return;
       }