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/right-click-context-menu.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+  import { shortcuts } from '$lib/actions/shortcut';
+  import { generateId } from '$lib/utils/generate-id';
+  import { contextMenuNavigation } from '$lib/actions/context-menu-navigation';
+  import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
 
+  export let title: string;
   export let direction: 'left' | 'right' = 'right';
   export let x = 0;
   export let y = 0;
@@ -9,7 +14,19 @@
   export let onClose: (() => unknown) | undefined;
 
   let uniqueKey = {};
-  let contextMenuElement: HTMLDivElement;
+  let menuContainer: HTMLUListElement;
+  let triggerElement: HTMLElement | undefined = undefined;
+
+  const id = generateId();
+  const menuId = `context-menu-${id}`;
+
+  $: {
+    if (isOpen && menuContainer) {
+      triggerElement = document.activeElement as HTMLElement;
+      menuContainer.focus();
+      $optionClickCallbackStore = closeContextMenu;
+    }
+  }
 
   const reopenContextMenu = async (event: MouseEvent) => {
     const contextMenuEvent = new MouseEvent('contextmenu', {
@@ -22,7 +39,7 @@
 
     const elements = document.elementsFromPoint(event.x, event.y);
 
-    if (elements.includes(contextMenuElement)) {
+    if (elements.includes(menuContainer)) {
       // User right-clicked on the context menu itself, we keep the context
       // menu as is
       return;
@@ -38,20 +55,51 @@
   };
 
   const closeContextMenu = () => {
+    triggerElement?.focus();
     onClose?.();
   };
 </script>
 
 {#key uniqueKey}
   {#if isOpen}
-    <section
-      class="fixed left-0 top-0 z-10 flex h-screen w-screen"
-      on:contextmenu|preventDefault={reopenContextMenu}
-      role="presentation"
+    <div
+      use:contextMenuNavigation={{
+        closeDropdown: closeContextMenu,
+        container: menuContainer,
+        isOpen,
+        selectedId: $selectedIdStore,
+        selectionChanged: (id) => ($selectedIdStore = id),
+      }}
+      use:shortcuts={[
+        {
+          shortcut: { key: 'Tab' },
+          onShortcut: closeContextMenu,
+        },
+        {
+          shortcut: { key: 'Tab', shift: true },
+          onShortcut: closeContextMenu,
+        },
+      ]}
     >
-      <ContextMenu {x} {y} {direction} onClose={closeContextMenu} bind:menuElement={contextMenuElement}>
-        <slot />
-      </ContextMenu>
-    </section>
+      <section
+        class="fixed left-0 top-0 z-10 flex h-screen w-screen"
+        on:contextmenu|preventDefault={reopenContextMenu}
+        role="presentation"
+      >
+        <ContextMenu
+          {direction}
+          {x}
+          {y}
+          ariaActiveDescendant={$selectedIdStore}
+          ariaLabel={title}
+          bind:menuElement={menuContainer}
+          id={menuId}
+          isVisible
+          onClose={closeContextMenu}
+        >
+          <slot />
+        </ContextMenu>
+      </section>
+    </div>
   {/if}
 {/key}