feat(web): keyboard accessible context menus

web/src/lib/actions/context-menu-navigation.ts

@@ -0,0 +1,108 @@
+import { shortcuts } from '$lib/actions/shortcut';
+import { tick } from 'svelte';
+import type { Action } from 'svelte/action';
+
+interface Options {
+  /**
+   * A function that is called when the dropdown should be closed.
+   */
+  closeDropdown: () => void;
+  /**
+   * The container element that with direct children that should be navigated.
+   */
+  container: HTMLElement;
+  /**
+   * Indicates if the dropdown is open.
+   */
+  isOpen: boolean;
+  /**
+   * Override the default behavior for the escape key.
+   */
+  onEscape?: (event: KeyboardEvent) => void;
+  /**
+   * A function that is called when the dropdown should be opened.
+   */
+  openDropdown?: (event: KeyboardEvent) => void;
+  /**
+   * The id of the currently selected element.
+   */
+  selectedId: string | undefined;
+  /**
+   * A function that is called when the selection changes, to notify consumers of the new selected id.
+   */
+  selectionChanged: (id: string | undefined) => void;
+}
+
+export const contextMenuNavigation: Action<HTMLElement, Options> = (node, options: Options) => {
+  const getCurrentElement = () => {
+    const { container, selectedId: activeId } = options;
+    return container?.querySelector(`#${activeId}`) as HTMLElement | null;
+  };
+
+  const close = () => {
+    const { closeDropdown, selectionChanged } = options;
+    selectionChanged(undefined);
+    closeDropdown();
+  };
+
+  const moveSelection = async (direction: 'up' | 'down', event: KeyboardEvent) => {
+    const { selectionChanged, container, openDropdown } = options;
+    if (openDropdown) {
+      openDropdown(event);
+      await tick();
+    }
+
+    const children = Array.from(container?.children).filter((child) => child.tagName !== 'HR') as HTMLElement[];
+    if (children.length === 0) {
+      return;
+    }
+
+    const currentEl = getCurrentElement();
+    const currentIndex = currentEl ? children.indexOf(currentEl) : -1;
+    const directionFactor = (direction === 'up' ? -1 : 1) + (direction === 'up' && currentIndex === -1 ? 1 : 0);
+    const newIndex = (currentIndex + directionFactor + children.length) % children.length;
+    const selectedNode = children[newIndex];
+    selectedNode?.scrollIntoView({ block: 'nearest' });
+
+    selectionChanged(selectedNode?.id);
+  };
+
+  const onEscape = (event: KeyboardEvent) => {
+    const { onEscape } = options;
+    if (onEscape) {
+      onEscape(event);
+      return;
+    }
+    event.stopPropagation();
+    close();
+  };
+
+  const handleClick = (event: KeyboardEvent) => {
+    const { selectedId, isOpen, closeDropdown } = options;
+    if (isOpen && !selectedId) {
+      closeDropdown();
+      return;
+    }
+    if (!selectedId) {
+      void moveSelection('down', event);
+      return;
+    }
+    const currentEl = getCurrentElement();
+    currentEl?.click();
+  };
+
+  const { destroy } = shortcuts(node, [
+    { shortcut: { key: 'ArrowUp' }, onShortcut: (event) => moveSelection('up', event) },
+    { shortcut: { key: 'ArrowDown' }, onShortcut: (event) => moveSelection('down', event) },
+    { shortcut: { key: 'Escape' }, onShortcut: (event) => onEscape(event) },
+    { shortcut: { key: ' ' }, onShortcut: (event) => handleClick(event) },
+    { shortcut: { key: 'Enter' }, onShortcut: (event) => handleClick(event) },
+  ]);
+
+  return {
+    update(newOptions) {
+      options = newOptions;
+    },
+    destroy,
+  };
+};

web/src/lib/actions/focus-outside.ts

@@ -1,13 +1,13 @@
 interface Options {
-  onFocusOut?: () => void;
+  onFocusOut?: (event: FocusEvent) => void;
 }
 
 export function focusOutside(node: HTMLElement, options: Options = {}) {
   const { onFocusOut } = options;
 
   const handleFocusOut = (event: FocusEvent) => {
     if (onFocusOut && event.relatedTarget instanceof Node && !node.contains(event.relatedTarget as Node)) {
-      onFocusOut();
+      onFocusOut(event);
     }
   };
 

web/src/lib/components/album-page/album-card.svelte

@@ -3,7 +3,7 @@
   import { user } from '$lib/stores/user.store';
   import type { AlbumResponseDto } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
-  import { getContextMenuPosition, type ContextMenuPosition } from '$lib/utils/context-menu';
+  import { getContextMenuPositionFromEvent, type ContextMenuPosition } from '$lib/utils/context-menu';
   import { getShortDateRange } from '$lib/utils/date-time';
   import AlbumCover from '$lib/components/album-page/album-cover.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
@@ -20,7 +20,7 @@
   const showAlbumContextMenu = (e: MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
-    onShowContextMenu?.(getContextMenuPosition(e));
+    onShowContextMenu?.(getContextMenuPositionFromEvent(e));
   };
 </script>
 

web/src/lib/components/album-page/albums-list.svelte

@@ -3,7 +3,6 @@
   import { groupBy, orderBy } from 'lodash-es';
   import { addUsersToAlbum, deleteAlbum, type AlbumUserAddDto, type AlbumResponseDto, isHttpError } from '@immich/sdk';
   import { mdiDeleteOutline, mdiShareVariantOutline, mdiFolderDownloadOutline, mdiRenameOutline } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
   import EditAlbumForm from '$lib/components/forms/edit-album-form.svelte';
   import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
   import {
@@ -167,6 +166,7 @@
 
   let contextMenuPosition: ContextMenuPosition = { x: 0, y: 0 };
   let contextMenuTargetAlbum: AlbumResponseDto | null = null;
+  let isOpen = false;
 
   // Step 1: Filter between Owned and Shared albums, or both.
   $: {
@@ -224,7 +224,6 @@
     albumGroupIds = groupedAlbums.map(({ id }) => id);
   }
 
-  $: showContextMenu = !!contextMenuTargetAlbum;
   $: showFullContextMenu = allowEdit && contextMenuTargetAlbum && contextMenuTargetAlbum.ownerId === $user.id;
 
   onMount(async () => {
@@ -253,10 +252,11 @@
       x: contextMenuDetail.x,
       y: contextMenuDetail.y,
     };
+    isOpen = true;
   };
 
   const closeAlbumContextMenu = () => {
-    contextMenuTargetAlbum = null;
+    isOpen = false;
   };
 
   const handleDownloadAlbum = async () => {
@@ -419,34 +419,18 @@
 {/if}
 
 <!-- Context Menu -->
-<RightClickContextMenu {...contextMenuPosition} isOpen={showContextMenu} onClose={closeAlbumContextMenu}>
+<RightClickContextMenu title={$t('album_options')} {...contextMenuPosition} {isOpen} onClose={closeAlbumContextMenu}>
   {#if showFullContextMenu}
-    <MenuOption on:click={() => contextMenuTargetAlbum && handleEdit(contextMenuTargetAlbum)}>
-      <p class="flex gap-2">
-        <Icon path={mdiRenameOutline} size="18" />
-        Edit
-      </p>
-    </MenuOption>
-    <MenuOption on:click={() => openShareModal()}>
-      <p class="flex gap-2">
-        <Icon path={mdiShareVariantOutline} size="18" />
-        Share
-      </p>
-    </MenuOption>
+    <MenuOption
+      icon={mdiRenameOutline}
+      text={$t('edit_album')}
+      on:click={() => contextMenuTargetAlbum && handleEdit(contextMenuTargetAlbum)}
+    />
+    <MenuOption icon={mdiShareVariantOutline} text={$t('share')} on:click={() => openShareModal()} />
   {/if}
-  <MenuOption on:click={() => handleDownloadAlbum()}>
-    <p class="flex gap-2">
-      <Icon path={mdiFolderDownloadOutline} size="18" />
-      Download
-    </p>
-  </MenuOption>
+  <MenuOption icon={mdiFolderDownloadOutline} text={$t('download')} on:click={() => handleDownloadAlbum()} />
   {#if showFullContextMenu}
-    <MenuOption on:click={() => setAlbumToDelete()}>
-      <p class="flex gap-2">
-        <Icon path={mdiDeleteOutline} size="18" />
-        Delete
-      </p>
-    </MenuOption>
+    <MenuOption icon={mdiDeleteOutline} text={$t('delete')} on:click={() => setAlbumToDelete()} />
   {/if}
 </RightClickContextMenu>
 

web/src/lib/components/album-page/share-info-modal.svelte

@@ -9,16 +9,14 @@
   } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
-  import { getContextMenuPosition } from '../../utils/context-menu';
   import { handleError } from '../../utils/handle-error';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
-  import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import UserAvatar from '../shared-components/user-avatar.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { t } from 'svelte-i18n';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
 
   export let album: AlbumResponseDto;
   export let onClose: () => void;
@@ -29,8 +27,6 @@
   }>();
 
   let currentUser: UserResponseDto;
-  let position = { x: 0, y: 0 };
-  let selectedMenuUser: UserResponseDto | null = null;
   let selectedRemoveUser: UserResponseDto | null = null;
 
   $: isOwned = currentUser?.id == album.ownerId;
@@ -43,15 +39,8 @@
     }
   });
 
-  const showContextMenu = (event: MouseEvent, user: UserResponseDto) => {
-    position = getContextMenuPosition(event);
-    selectedMenuUser = user;
-    selectedRemoveUser = null;
-  };
-
-  const handleMenuRemove = () => {
-    selectedRemoveUser = selectedMenuUser;
-    selectedMenuUser = null;
+  const handleMenuRemove = (user: UserResponseDto) => {
+    selectedRemoveUser = user;
   };
 
   const handleRemoveUser = async () => {
@@ -118,31 +107,17 @@
               {/if}
             </div>
             {#if isOwned}
-              <div>
-                <CircleIconButton
-                  title={$t('options')}
-                  on:click={(event) => showContextMenu(event, user)}
-                  icon={mdiDotsVertical}
-                  size="20"
-                />
-
-                {#if selectedMenuUser === user}
-                  <ContextMenu {...position} onClose={() => (selectedMenuUser = null)}>
-                    {#if role === AlbumUserRole.Viewer}
-                      <MenuOption
-                        on:click={() => handleSetReadonly(user, AlbumUserRole.Editor)}
-                        text={$t('allow_edits')}
-                      />
-                    {:else}
-                      <MenuOption
-                        on:click={() => handleSetReadonly(user, AlbumUserRole.Viewer)}
-                        text={$t('disallow_edits')}
-                      />
-                    {/if}
-                    <MenuOption on:click={handleMenuRemove} text={$t('remove')} />
-                  </ContextMenu>
+              <ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
+                {#if role === AlbumUserRole.Viewer}
+                  <MenuOption on:click={() => handleSetReadonly(user, AlbumUserRole.Editor)} text={$t('allow_edits')} />
+                {:else}
+                  <MenuOption
+                    on:click={() => handleSetReadonly(user, AlbumUserRole.Viewer)}
+                    text={$t('disallow_edits')}
+                  />
                 {/if}
-              </div>
+                <MenuOption on:click={() => handleMenuRemove(user)} text={$t('remove')} />
+              </ButtonContextMenu>
             {:else if user.id == currentUser?.id}
               <button
                 type="button"