From cb40db955530642a050aa4105281797fe2e831c7 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Mon, 8 Jul 2024 03:33:07 +0200
Subject: [PATCH] refactor(web): focus trap (#10915)

---
 .../actions/__test__/focus-trap-test.svelte   |  18 +
 .../lib/actions/__test__/focus-trap.spec.ts   |  40 ++
 web/src/lib/actions/focus-trap.ts             |  55 +++
 .../asset-viewer/asset-viewer.svelte          | 451 +++++++++---------
 .../shared-components/focus-trap.svelte       |  64 ---
 .../full-screen-modal.svelte                  |  45 +-
 .../navigation-bar/account-info-panel.svelte  |  99 ++--
 7 files changed, 407 insertions(+), 365 deletions(-)
 create mode 100644 web/src/lib/actions/__test__/focus-trap-test.svelte
 create mode 100644 web/src/lib/actions/__test__/focus-trap.spec.ts
 create mode 100644 web/src/lib/actions/focus-trap.ts
 delete mode 100644 web/src/lib/components/shared-components/focus-trap.svelte

diff --git a/web/src/lib/actions/__test__/focus-trap-test.svelte b/web/src/lib/actions/__test__/focus-trap-test.svelte
new file mode 100644
index 0000000000000..207c880cd9d8f
--- /dev/null
+++ b/web/src/lib/actions/__test__/focus-trap-test.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { focusTrap } from '$lib/actions/focus-trap';
+
+  export let show: boolean;
+</script>
+
+<button type="button" on:click={() => (show = true)}>Open</button>
+
+{#if show}
+  <div use:focusTrap>
+    <div>
+      <span>text</span>
+      <button data-testid="one" type="button" on:click={() => (show = false)}>Close</button>
+    </div>
+    <input data-testid="two" disabled />
+    <input data-testid="three" />
+  </div>
+{/if}
diff --git a/web/src/lib/actions/__test__/focus-trap.spec.ts b/web/src/lib/actions/__test__/focus-trap.spec.ts
new file mode 100644
index 0000000000000..be3a97db3f6da
--- /dev/null
+++ b/web/src/lib/actions/__test__/focus-trap.spec.ts
@@ -0,0 +1,40 @@
+import FocusTrapTest from '$lib/actions/__test__/focus-trap-test.svelte';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { tick } from 'svelte';
+
+describe('focusTrap action', () => {
+  const user = userEvent.setup();
+
+  it('sets focus to the first focusable element', () => {
+    render(FocusTrapTest, { show: true });
+    expect(document.activeElement).toEqual(screen.getByTestId('one'));
+  });
+
+  it('supports backward focus wrapping', async () => {
+    render(FocusTrapTest, { show: true });
+    await user.keyboard('{Shift>}{Tab}{/Shift}');
+    expect(document.activeElement).toEqual(screen.getByTestId('three'));
+  });
+
+  it('supports forward focus wrapping', async () => {
+    render(FocusTrapTest, { show: true });
+    screen.getByTestId('three').focus();
+    await user.keyboard('{Tab}');
+    expect(document.activeElement).toEqual(screen.getByTestId('one'));
+  });
+
+  it('restores focus to the triggering element', async () => {
+    render(FocusTrapTest, { show: false });
+    const openButton = screen.getByText('Open');
+
+    openButton.focus();
+    openButton.click();
+    await tick();
+    expect(document.activeElement).toEqual(screen.getByTestId('one'));
+
+    screen.getByText('Close').click();
+    await tick();
+    expect(document.activeElement).toEqual(openButton);
+  });
+});
diff --git a/web/src/lib/actions/focus-trap.ts b/web/src/lib/actions/focus-trap.ts
new file mode 100644
index 0000000000000..c854199600e65
--- /dev/null
+++ b/web/src/lib/actions/focus-trap.ts
@@ -0,0 +1,55 @@
+import { shortcuts } from '$lib/actions/shortcut';
+
+const selectors =
+  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export function focusTrap(container: HTMLElement) {
+  const triggerElement = document.activeElement;
+
+  const focusableElement = container.querySelector<HTMLElement>(selectors);
+  focusableElement?.focus();
+
+  const getFocusableElements = (): [HTMLElement | null, HTMLElement | null] => {
+    const focusableElements = container.querySelectorAll<HTMLElement>(selectors);
+    return [
+      focusableElements.item(0), //
+      focusableElements.item(focusableElements.length - 1),
+    ];
+  };
+
+  const { destroy: destroyShortcuts } = shortcuts(container, [
+    {
+      ignoreInputFields: false,
+      preventDefault: false,
+      shortcut: { key: 'Tab' },
+      onShortcut: (event) => {
+        const [firstElement, lastElement] = getFocusableElements();
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement?.focus();
+        }
+      },
+    },
+    {
+      ignoreInputFields: false,
+      preventDefault: false,
+      shortcut: { key: 'Tab', shift: true },
+      onShortcut: (event) => {
+        const [firstElement, lastElement] = getFocusableElements();
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement?.focus();
+        }
+      },
+    },
+  ]);
+
+  return {
+    destroy() {
+      destroyShortcuts?.();
+      if (triggerElement instanceof HTMLElement) {
+        triggerElement.focus();
+      }
+    },
+  };
+}
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index ce4430edf1bff..f216d73382ae8 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.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';
   import { AssetAction, ProjectionType } from '$lib/constants';
   import { updateNumberOfComments } from '$lib/stores/activity.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -61,6 +60,7 @@
   import { websocketEvents } from '$lib/stores/websocket';
   import { canCopyImagesToClipboard } from 'copy-image-clipboard';
   import { t } from 'svelte-i18n';
+  import { focusTrap } from '$lib/actions/focus-trap';
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
@@ -553,257 +553,252 @@
 
 <svelte:document bind:fullscreenElement />
 
-<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">
-        <AssetViewerNavBar
-          {asset}
-          {album}
-          isMotionPhotoPlaying={shouldPlayMotionPhoto}
-          showCopyButton={canCopyImagesToClipboard() && asset.type === AssetTypeEnum.Image}
-          showZoomButton={asset.type === AssetTypeEnum.Image}
-          showMotionPlayButton={!!asset.livePhotoVideoId}
-          showDownloadButton={shouldShowDownloadButton}
-          showDetailButton={enableDetailPanel}
-          showSlideshow={!!assetStore}
-          hasStackChildren={$stackAssetsStore.length > 0}
-          showShareButton={shouldShowShareModal}
-          onZoomImage={zoomToggle}
-          onCopyImage={copyImage}
-          on:back={closeViewer}
-          on:showDetail={showDetailInfoHandler}
-          on:download={() => downloadFile(asset)}
-          on:delete={() => trashOrDelete()}
-          on:permanentlyDelete={() => trashOrDelete(true)}
-          on:favorite={toggleFavorite}
-          on:addToAlbum={() => openAlbumPicker(false)}
-          on:restoreAsset={() => handleRestoreAsset()}
-          on:addToSharedAlbum={() => openAlbumPicker(true)}
-          on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
-          on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
-          on:toggleArchive={toggleAssetArchive}
-          on:asProfileImage={() => (isShowProfileImageCrop = true)}
-          on:setAsAlbumCover={handleUpdateThumbnail}
-          on:runJob={({ detail: job }) => handleRunJob(job)}
-          on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
-          on:unstack={handleUnstack}
-          on:showShareModal={() => (isShowShareModal = true)}
+<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"
+  use:focusTrap
+>
+  <!-- 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">
+      <AssetViewerNavBar
+        {asset}
+        {album}
+        isMotionPhotoPlaying={shouldPlayMotionPhoto}
+        showCopyButton={canCopyImagesToClipboard() && asset.type === AssetTypeEnum.Image}
+        showZoomButton={asset.type === AssetTypeEnum.Image}
+        showMotionPlayButton={!!asset.livePhotoVideoId}
+        showDownloadButton={shouldShowDownloadButton}
+        showDetailButton={enableDetailPanel}
+        showSlideshow={!!assetStore}
+        hasStackChildren={$stackAssetsStore.length > 0}
+        showShareButton={shouldShowShareModal}
+        onZoomImage={zoomToggle}
+        onCopyImage={copyImage}
+        on:back={closeViewer}
+        on:showDetail={showDetailInfoHandler}
+        on:download={() => downloadFile(asset)}
+        on:delete={() => trashOrDelete()}
+        on:permanentlyDelete={() => trashOrDelete(true)}
+        on:favorite={toggleFavorite}
+        on:addToAlbum={() => openAlbumPicker(false)}
+        on:restoreAsset={() => handleRestoreAsset()}
+        on:addToSharedAlbum={() => openAlbumPicker(true)}
+        on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
+        on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
+        on:toggleArchive={toggleAssetArchive}
+        on:asProfileImage={() => (isShowProfileImageCrop = true)}
+        on:setAsAlbumCover={handleUpdateThumbnail}
+        on:runJob={({ detail: job }) => handleRunJob(job)}
+        on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
+        on:unstack={handleUnstack}
+        on:showShareModal={() => (isShowShareModal = true)}
+      />
+    </div>
+  {/if}
+
+  {#if $slideshowState === SlideshowState.None && showNavigation}
+    <div class="z-[1001] my-auto column-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
+      <NavigationArea onClick={(e) => navigateAsset('previous', e)} label={$t('view_previous_asset')}>
+        <Icon path={mdiChevronLeft} size="36" ariaHidden />
+      </NavigationArea>
+    </div>
+  {/if}
+
+  <!-- Asset Viewer -->
+  <div class="z-[1000] relative col-start-1 col-span-4 row-start-1 row-span-full" bind:this={assetViewerHtmlElement}>
+    {#if $slideshowState != SlideshowState.None}
+      <div class="z-[1000] absolute w-full flex">
+        <SlideshowBar
+          {isFullScreen}
+          onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
+          onPrevious={() => navigateAsset('previous')}
+          onNext={() => navigateAsset('next')}
+          onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
         />
       </div>
     {/if}
 
-    {#if $slideshowState === SlideshowState.None && showNavigation}
-      <div class="z-[1001] my-auto column-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
-        <NavigationArea onClick={(e) => navigateAsset('previous', e)} label={$t('view_previous_asset')}>
-          <Icon path={mdiChevronLeft} size="36" ariaHidden />
-        </NavigationArea>
-      </div>
-    {/if}
-
-    <!-- Asset Viewer -->
-    <div class="z-[1000] relative col-start-1 col-span-4 row-start-1 row-span-full" bind:this={assetViewerHtmlElement}>
-      {#if $slideshowState != SlideshowState.None}
-        <div class="z-[1000] absolute w-full flex">
-          <SlideshowBar
-            {isFullScreen}
-            onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
-            onPrevious={() => navigateAsset('previous')}
-            onNext={() => navigateAsset('next')}
-            onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
+    {#if previewStackedAsset}
+      {#key previewStackedAsset.id}
+        {#if previewStackedAsset.type === AssetTypeEnum.Image}
+          <PhotoViewer
+            bind:zoomToggle
+            bind:copyImage
+            asset={previewStackedAsset}
+            {preloadAssets}
+            on:close={closeViewer}
+            haveFadeTransition={false}
+            {sharedLink}
           />
-        </div>
-      {/if}
-
-      {#if previewStackedAsset}
-        {#key previewStackedAsset.id}
-          {#if previewStackedAsset.type === AssetTypeEnum.Image}
-            <PhotoViewer
-              bind:zoomToggle
-              bind:copyImage
-              asset={previewStackedAsset}
-              {preloadAssets}
-              on:close={closeViewer}
-              haveFadeTransition={false}
-              {sharedLink}
-            />
-          {:else}
-            <VideoViewer
-              assetId={previewStackedAsset.id}
-              checksum={previewStackedAsset.checksum}
-              projectionType={previewStackedAsset.exifInfo?.projectionType}
-              loopVideo={true}
-              on:close={closeViewer}
-              on:onVideoEnded={() => navigateAsset()}
-              on:onVideoStarted={handleVideoStarted}
-            />
-          {/if}
-        {/key}
-      {:else}
-        {#key asset.id}
-          {#if !asset.resized}
-            <div class="flex h-full w-full justify-center">
-              <div
-                class="px-auto flex aspect-square h-full items-center justify-center bg-gray-100 dark:bg-immich-dark-gray"
-              >
-                <Icon path={mdiImageBrokenVariant} size="25%" />
-              </div>
+        {:else}
+          <VideoViewer
+            assetId={previewStackedAsset.id}
+            checksum={previewStackedAsset.checksum}
+            projectionType={previewStackedAsset.exifInfo?.projectionType}
+            loopVideo={true}
+            on:close={closeViewer}
+            on:onVideoEnded={() => navigateAsset()}
+            on:onVideoStarted={handleVideoStarted}
+          />
+        {/if}
+      {/key}
+    {:else}
+      {#key asset.id}
+        {#if !asset.resized}
+          <div class="flex h-full w-full justify-center">
+            <div
+              class="px-auto flex aspect-square h-full items-center justify-center bg-gray-100 dark:bg-immich-dark-gray"
+            >
+              <Icon path={mdiImageBrokenVariant} size="25%" />
             </div>
-          {:else if asset.type === AssetTypeEnum.Image}
-            {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
-              <VideoViewer
-                assetId={asset.livePhotoVideoId}
-                checksum={asset.checksum}
-                projectionType={asset.exifInfo?.projectionType}
-                loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
-                on:close={closeViewer}
-                on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
-              />
-            {:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
-                  .toLowerCase()
-                  .endsWith('.insp'))}
-              <PanoramaViewer {asset} />
-            {:else}
-              <PhotoViewer bind:zoomToggle bind:copyImage {asset} {preloadAssets} on:close={closeViewer} {sharedLink} />
-            {/if}
-          {:else}
+          </div>
+        {:else if asset.type === AssetTypeEnum.Image}
+          {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
             <VideoViewer
-              assetId={asset.id}
+              assetId={asset.livePhotoVideoId}
               checksum={asset.checksum}
               projectionType={asset.exifInfo?.projectionType}
               loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
               on:close={closeViewer}
-              on:onVideoEnded={() => navigateAsset()}
-              on:onVideoStarted={handleVideoStarted}
+              on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
             />
+          {:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
+                .toLowerCase()
+                .endsWith('.insp'))}
+            <PanoramaViewer {asset} />
+          {:else}
+            <PhotoViewer bind:zoomToggle bind:copyImage {asset} {preloadAssets} on:close={closeViewer} {sharedLink} />
           {/if}
-          {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)}
-            <div class="z-[9999] absolute bottom-0 right-0 mb-20 mr-8">
-              <ActivityStatus
-                disabled={!album?.isActivityEnabled}
-                {isLiked}
-                {numberOfComments}
-                on:favorite={handleFavorite}
-                on:openActivityTab={handleOpenActivity}
-              />
-            </div>
-          {/if}
-        {/key}
-      {/if}
+        {:else}
+          <VideoViewer
+            assetId={asset.id}
+            checksum={asset.checksum}
+            projectionType={asset.exifInfo?.projectionType}
+            loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
+            on:close={closeViewer}
+            on:onVideoEnded={() => navigateAsset()}
+            on:onVideoStarted={handleVideoStarted}
+          />
+        {/if}
+        {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)}
+          <div class="z-[9999] absolute bottom-0 right-0 mb-20 mr-8">
+            <ActivityStatus
+              disabled={!album?.isActivityEnabled}
+              {isLiked}
+              {numberOfComments}
+              on:favorite={handleFavorite}
+              on:openActivityTab={handleOpenActivity}
+            />
+          </div>
+        {/if}
+      {/key}
+    {/if}
+  </div>
+
+  {#if $slideshowState === SlideshowState.None && showNavigation}
+    <div class="z-[1001] my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end">
+      <NavigationArea onClick={(e) => navigateAsset('next', e)} label={$t('view_next_asset')}>
+        <Icon path={mdiChevronRight} size="36" ariaHidden />
+      </NavigationArea>
     </div>
+  {/if}
 
-    {#if $slideshowState === SlideshowState.None && showNavigation}
-      <div class="z-[1001] my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end">
-        <NavigationArea onClick={(e) => navigateAsset('next', e)} label={$t('view_next_asset')}>
-          <Icon path={mdiChevronRight} size="36" ariaHidden />
-        </NavigationArea>
-      </div>
-    {/if}
+  {#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail}
+    <div
+      transition:fly={{ duration: 150 }}
+      id="detail-panel"
+      class="z-[1002] row-start-1 row-span-4 w-[360px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
+      translate="yes"
+    >
+      <DetailPanel {asset} currentAlbum={album} albums={appearsInAlbums} on:close={() => ($isShowDetail = false)} />
+    </div>
+  {/if}
 
-    {#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail}
-      <div
-        transition:fly={{ duration: 150 }}
-        id="detail-panel"
-        class="z-[1002] row-start-1 row-span-4 w-[360px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
-        translate="yes"
-      >
-        <DetailPanel {asset} currentAlbum={album} albums={appearsInAlbums} on:close={() => ($isShowDetail = false)} />
-      </div>
-    {/if}
-
-    {#if $stackAssetsStore.length > 0 && withStacked}
-      <div
-        id="stack-slideshow"
-        class="z-[1002] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 overflow-x-auto horizontal-scrollbar"
-      >
-        <div class="relative w-full whitespace-nowrap transition-all">
-          {#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
-            <div
+  {#if $stackAssetsStore.length > 0 && withStacked}
+    <div
+      id="stack-slideshow"
+      class="z-[1002] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 overflow-x-auto horizontal-scrollbar"
+    >
+      <div class="relative w-full whitespace-nowrap transition-all">
+        {#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
+          <div
+            class="{stackedAsset.id == asset.id
+              ? '-translate-y-[1px]'
+              : '-translate-y-0'} inline-block px-1 transition-transform"
+          >
+            <Thumbnail
               class="{stackedAsset.id == asset.id
-                ? '-translate-y-[1px]'
-                : '-translate-y-0'} inline-block px-1 transition-transform"
-            >
-              <Thumbnail
-                class="{stackedAsset.id == asset.id
-                  ? 'bg-transparent border-2 border-white'
-                  : 'bg-gray-700/40'} inline-block hover:bg-transparent"
-                asset={stackedAsset}
-                onClick={(stackedAsset, event) => {
-                  event.preventDefault();
-                  asset = stackedAsset;
-                  preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
-                }}
-                on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
-                readonly
-                thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
-                showStackedIcon={false}
-              />
+                ? 'bg-transparent border-2 border-white'
+                : 'bg-gray-700/40'} inline-block hover:bg-transparent"
+              asset={stackedAsset}
+              onClick={(stackedAsset, event) => {
+                event.preventDefault();
+                asset = stackedAsset;
+                preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
+              }}
+              on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
+              readonly
+              thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
+              showStackedIcon={false}
+            />
 
-              {#if stackedAsset.id == asset.id}
-                <div class="w-full flex place-items-center place-content-center">
-                  <div class="w-2 h-2 bg-white rounded-full flex mt-[2px]" />
-                </div>
-              {/if}
-            </div>
-          {/each}
-        </div>
+            {#if stackedAsset.id == asset.id}
+              <div class="w-full flex place-items-center place-content-center">
+                <div class="w-2 h-2 bg-white rounded-full flex mt-[2px]" />
+              </div>
+            {/if}
+          </div>
+        {/each}
       </div>
-    {/if}
+    </div>
+  {/if}
 
-    {#if isShared && album && isShowActivity && $user}
-      <div
-        transition:fly={{ duration: 150 }}
-        id="activity-panel"
-        class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
-        translate="yes"
-      >
-        <ActivityViewer
-          user={$user}
-          disabled={!album.isActivityEnabled}
-          assetType={asset.type}
-          albumOwnerId={album.ownerId}
-          albumId={album.id}
-          assetId={asset.id}
-          {isLiked}
-          bind:reactions
-          on:addComment={handleAddComment}
-          on:deleteComment={handleRemoveComment}
-          on:deleteLike={() => (isLiked = null)}
-          on:close={() => (isShowActivity = false)}
-        />
-      </div>
-    {/if}
-
-    {#if isShowAlbumPicker}
-      <AlbumSelectionModal
-        shared={addToSharedAlbum}
-        on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
-        on:album={({ detail }) => handleAddToAlbum(detail)}
-        onClose={() => (isShowAlbumPicker = false)}
+  {#if isShared && album && isShowActivity && $user}
+    <div
+      transition:fly={{ duration: 150 }}
+      id="activity-panel"
+      class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
+      translate="yes"
+    >
+      <ActivityViewer
+        user={$user}
+        disabled={!album.isActivityEnabled}
+        assetType={asset.type}
+        albumOwnerId={album.ownerId}
+        albumId={album.id}
+        assetId={asset.id}
+        {isLiked}
+        bind:reactions
+        on:addComment={handleAddComment}
+        on:deleteComment={handleRemoveComment}
+        on:deleteLike={() => (isLiked = null)}
+        on:close={() => (isShowActivity = false)}
       />
-    {/if}
+    </div>
+  {/if}
 
-    {#if isShowDeleteConfirmation}
-      <DeleteAssetDialog
-        size={1}
-        on:cancel={() => (isShowDeleteConfirmation = false)}
-        on:confirm={() => deleteAsset()}
-      />
-    {/if}
+  {#if isShowAlbumPicker}
+    <AlbumSelectionModal
+      shared={addToSharedAlbum}
+      on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
+      on:album={({ detail }) => handleAddToAlbum(detail)}
+      onClose={() => (isShowAlbumPicker = false)}
+    />
+  {/if}
 
-    {#if isShowProfileImageCrop}
-      <ProfileImageCropper {asset} onClose={() => (isShowProfileImageCrop = false)} />
-    {/if}
+  {#if isShowDeleteConfirmation}
+    <DeleteAssetDialog size={1} on:cancel={() => (isShowDeleteConfirmation = false)} on:confirm={() => deleteAsset()} />
+  {/if}
 
-    {#if isShowShareModal}
-      <CreateSharedLinkModal assetIds={[asset.id]} onClose={() => (isShowShareModal = false)} />
-    {/if}
-  </section>
-</FocusTrap>
+  {#if isShowProfileImageCrop}
+    <ProfileImageCropper {asset} onClose={() => (isShowProfileImageCrop = false)} />
+  {/if}
+
+  {#if isShowShareModal}
+    <CreateSharedLinkModal assetIds={[asset.id]} onClose={() => (isShowShareModal = false)} />
+  {/if}
+</section>
 
 <style>
   #immich-asset-viewer {
diff --git a/web/src/lib/components/shared-components/focus-trap.svelte b/web/src/lib/components/shared-components/focus-trap.svelte
deleted file mode 100644
index 442a1fc2003c6..0000000000000
--- a/web/src/lib/components/shared-components/focus-trap.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-  import { shortcuts } from '$lib/actions/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:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [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>
diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index d0d629ee4d7f1..bc1253a546c01 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { clickOutside } from '$lib/actions/click-outside';
+  import { focusTrap } from '$lib/actions/focus-trap';
   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';
   import { generateId } from '$lib/utils/generate-id';
 
@@ -52,28 +52,27 @@
   on:keydown={(event) => {
     event.stopPropagation();
   }}
+  use:focusTrap
 >
-  <FocusTrap>
-    <div
-      class="z-[9999] max-w-[95vw] max-h-[min(95dvh,56rem)] {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}
-      class:scroll-pb-40={isStickyBottom}
-      class:sm:scroll-p-24={isStickyBottom}
-    >
-      <ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
-      <div class="p-5 pt-0">
-        <slot />
-      </div>
-      {#if isStickyBottom}
-        <div
-          class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky bottom-0 py-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500 shadow"
-        >
-          <slot name="sticky-bottom" />
-        </div>
-      {/if}
+  <div
+    class="z-[9999] max-w-[95vw] max-h-[min(95dvh,56rem)] {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}
+    class:scroll-pb-40={isStickyBottom}
+    class:sm:scroll-p-24={isStickyBottom}
+  >
+    <ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
+    <div class="p-5 pt-0">
+      <slot />
     </div>
-  </FocusTrap>
+    {#if isStickyBottom}
+      <div
+        class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky bottom-0 py-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500 shadow"
+      >
+        <slot name="sticky-bottom" />
+      </div>
+    {/if}
+  </div>
 </section>
diff --git a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
index 60bc0b6c61a81..c196bdf94bcb1 100644
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+  import { focusTrap } from '$lib/actions/focus-trap';
   import Button from '$lib/components/elements/buttons/button.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
   import { AppRoute } from '$lib/constants';
   import { preferences, user } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
@@ -42,59 +42,58 @@
   };
 </script>
 
-<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"
+  use: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"
+    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="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">
-        <UserAvatar user={$user} size="xl" />
-        <div class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6">
-          <CircleIconButton
-            color="primary"
-            icon={mdiPencil}
-            title={$t('edit_avatar')}
-            class="border"
-            size="12"
-            padding="2"
-            on:click={() => (isShowSelectAvatar = true)}
-          />
+    <div class="relative">
+      <UserAvatar user={$user} size="xl" />
+      <div class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6">
+        <CircleIconButton
+          color="primary"
+          icon={mdiPencil}
+          title={$t('edit_avatar')}
+          class="border"
+          size="12"
+          padding="2"
+          on:click={() => (isShowSelectAvatar = true)}
+        />
+      </div>
+    </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" />
+          {$t('account_settings')}
         </div>
-      </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" />
-            {$t('account_settings')}
-          </div>
-        </Button>
-      </a>
-    </div>
-
-    <div class="mb-4 flex flex-col">
-      <button
-        type="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} />
-        {$t('sign_out')}</button
-      >
-    </div>
+      </Button>
+    </a>
   </div>
-</FocusTrap>
+
+  <div class="mb-4 flex flex-col">
+    <button
+      type="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} />
+      {$t('sign_out')}</button
+    >
+  </div>
+</div>
 
 {#if isShowSelectAvatar}
   <AvatarSelector