feat(web): keyboard accessible context menus (#10017)

* feat(web,a11y): context menu keyboard navigation

* wip: all context menus visible

* wip: more migrations to the ButtonContextMenu, usability improvements

* wip: migrate Administration, PeopleCard

* wip: refocus the button on click, docs

* fix: more intuitive RightClickContextMenu

- configurable title
- focus management: tab keys, clicks, closing the menu
- automatically closing when an option is selected

* fix: refining the little details

- adjust the aria attributes
- intuitive escape key propagation
- extract context into its own file

* fix: dropdown options not clickable in a <Portal>

* wip: small fixes

- export selectedColor to prevent unexpected styling
- better context function naming

* chore: revert changes to list navigation, to reduce scope of the PR

* fix: remove topBorder prop

* feat: automatically select the first option on enter or space keypress

* fix: use Svelte store instead to handle selecting menu options

- better prop naming for ButtonContextMenu

* feat: hovering the mouse can change the active element

* fix: remove Portal, more predictable open/close behavior

* feat: make selected item visible using a scroll

- also: minor cleanup of the context-menu-navigation Svelte action

* feat: maintain context menu position on resize

* fix: use the whole padding class as better tailwind convention

* fix: options not announcing with screen reader for ButtonContextMenu

* fix: screen reader announcing right click context menu options

* fix: handle focus out scenario

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/components/photos-page/actions/add-to-album.svelte

@@ -3,7 +3,6 @@
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { addAssetsToAlbum, addAssetsToNewAlbum } from '$lib/utils/asset-utils';
   import type { AlbumResponseDto } from '@immich/sdk';
-  import { getMenuContext } from '../asset-select-context-menu.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -13,16 +12,13 @@
   let showAlbumPicker = false;
 
   const { getAssets, clearSelect } = getAssetControlContext();
-  const closeMenu = getMenuContext();
 
   const handleHideAlbumPicker = () => {
     showAlbumPicker = false;
-    closeMenu();
   };
 
   const handleAddToNewAlbum = async (albumName: string) => {
     showAlbumPicker = false;
-    closeMenu();
 
     const assetIds = [...getAssets()].map((asset) => asset.id);
     await addAssetsToNewAlbum(albumName, assetIds);

web/src/lib/components/photos-page/asset-select-context-menu.svelte

@@ -1,35 +0,0 @@
-<script lang="ts" context="module">
-  import { clickOutside } from '$lib/actions/click-outside';
-  import { createContext } from '$lib/utils/context';
-
-  const { get: getMenuContext, set: setContext } = createContext<() => void>();
-  export { getMenuContext };
-</script>
-
-<script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
-  import { getContextMenuPosition } from '$lib/utils/context-menu';
-
-  export let icon: string;
-  export let title: string;
-
-  let showContextMenu = false;
-  let contextMenuPosition = { x: 0, y: 0 };
-
-  const handleShowMenu = (event: MouseEvent) => {
-    contextMenuPosition = getContextMenuPosition(event, 'top-left');
-    showContextMenu = !showContextMenu;
-  };
-
-  setContext(() => (showContextMenu = false));
-</script>
-
-<div use:clickOutside={{ onOutclick: () => (showContextMenu = false) }}>
-  <CircleIconButton {title} {icon} on:click={handleShowMenu} />
-  {#if showContextMenu}
-    <ContextMenu {...contextMenuPosition}>
-      <slot />
-    </ContextMenu>
-  {/if}
-</div>