wip: better right click focus management (todo: handle clicks)

immich-app · Jun 10, 2024 · 3ce1497 · 3ce1497
1 parent 1aa67b2
commit 3ce1497
Showing 1 changed file with 39 additions and 23 deletions.
diff --git a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
-  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
   import { shortcuts } from '$lib/actions/shortcut';
   import { listNavigation } from '$lib/actions/list-navigation';
 
@@ -15,6 +14,15 @@
   let uniqueKey = {};
   let contextMenuElement: HTMLUListElement;
   let selectedId: string | undefined = undefined;
+  let triggerElement: HTMLElement | undefined = undefined;
+  let buttonElement: HTMLButtonElement;
+
+  $: {
+    if (isOpen && buttonElement) {
+      triggerElement = document.activeElement as HTMLElement;
+      buttonElement?.focus();
+    }
+  }
 
   const reopenContextMenu = async (event: MouseEvent) => {
     const contextMenuEvent = new MouseEvent('contextmenu', {
@@ -43,6 +51,7 @@
   };
 
   const closeContextMenu = () => {
+    triggerElement?.focus();
     onClose?.();
   };
 
@@ -57,28 +66,35 @@
 
 {#key uniqueKey}
   {#if isOpen}
-    <FocusTrap>
-      <button
-        type="button"
-        class="sr-only"
-        use:shortcuts={[
-          {
-            shortcut: { key: 'Enter' },
-            onShortcut: handleEnter,
-            preventDefault: false,
-          },
-        ]}
-        use:listNavigation={{
-          container: contextMenuElement,
-          selectedId: selectedId,
-          selectedClass: '!bg-gray-200',
-          closeDropdown: closeContextMenu,
-          selectionChanged: (node) => (selectedId = node?.id),
-        }}
-      >
-        {title}
-      </button>
-    </FocusTrap>
+    <button
+      bind:this={buttonElement}
+      type="button"
+      class="sr-only"
+      use:shortcuts={[
+        {
+          shortcut: { key: 'Enter' },
+          onShortcut: handleEnter,
+          preventDefault: false,
+        },
+        {
+          shortcut: { key: 'Tab' },
+          onShortcut: closeContextMenu,
+        },
+        {
+          shortcut: { key: 'Tab', shift: true },
+          onShortcut: closeContextMenu,
+        },
+      ]}
+      use:listNavigation={{
+        container: contextMenuElement,
+        selectedId: selectedId,
+        selectedClass: '!bg-gray-200',
+        closeDropdown: closeContextMenu,
+        selectionChanged: (node) => (selectedId = node?.id),
+      }}
+    >
+      {title}
+    </button>
     <section
       class="fixed left-0 top-0 z-10 flex h-screen w-screen"
       on:contextmenu|preventDefault={reopenContextMenu}