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/shared-components/context-menu/menu-option.svelte

@@ -1,15 +1,37 @@
-<script>
+<script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
+  import { generateId } from '$lib/utils/generate-id';
+  import { createEventDispatcher } from 'svelte';
+  import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
 
   export let text = '';
   export let subtitle = '';
   export let icon = '';
+
+  let id: string = generateId();
+
+  $: isActive = $selectedIdStore === id;
+
+  const dispatch = createEventDispatcher<{
+    click: void;
+  }>();
+
+  const handleClick = () => {
+    $optionClickCallbackStore?.();
+    dispatch('click');
+  };
 </script>
 
-<button
-  type="button"
-  on:click
-  class="w-full bg-slate-100 p-4 text-left text-sm font-medium text-immich-fg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg"
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<li
+  {id}
+  on:click={handleClick}
+  on:mouseover={() => ($selectedIdStore = id)}
+  on:mouseleave={() => ($selectedIdStore = undefined)}
+  class="w-full p-4 text-left text-sm font-medium text-immich-fg focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg cursor-pointer border-gray-200"
+  class:bg-slate-300={isActive}
+  class:bg-slate-100={!isActive}
   role="menuitem"
 >
   {#if text}
@@ -30,4 +52,4 @@
       {subtitle}
     </p>
   </slot>
-</button>
+</li>