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

@@ -3,11 +3,16 @@
   import { slide } from 'svelte/transition';
   import { clickOutside } from '$lib/actions/click-outside';
 
+  export let isVisible: boolean = false;
   export let direction: 'left' | 'right' = 'right';
   export let x = 0;
   export let y = 0;
+  export let id: string | undefined = undefined;
+  export let ariaLabel: string | undefined = undefined;
+  export let ariaLabelledBy: string | undefined = undefined;
+  export let ariaActiveDescendant: string | undefined = undefined;
 
-  export let menuElement: HTMLDivElement | undefined = undefined;
+  export let menuElement: HTMLUListElement | undefined = undefined;
   export let onClose: (() => void) | undefined = undefined;
 
   let left: number;
@@ -30,16 +35,25 @@
 </script>
 
 <div
-  bind:this={menuElement}
   bind:clientHeight={height}
-  transition:slide={{ duration: 250, easing: quintOut }}
-  class="absolute z-10 min-w-[200px] w-max max-w-[300px] overflow-hidden rounded-lg shadow-lg"
-  style:top="{top}px"
+  class="fixed z-10 min-w-[200px] w-max max-w-[300px] overflow-hidden rounded-lg shadow-lg"
   style:left="{left}px"
-  role="menu"
-  use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
+  style:top="{top}px"
+  transition:slide={{ duration: 250, easing: quintOut }}
+  use:clickOutside={{ onOutclick: onClose }}
 >
-  <div class="flex flex-col rounded-lg">
+  <ul
+    {id}
+    aria-activedescendant={ariaActiveDescendant ?? ''}
+    aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledBy}
+    bind:this={menuElement}
+    class:max-h-[100vh]={isVisible}
+    class:max-h-0={!isVisible}
+    class="flex flex-col transition-all duration-[250ms] ease-in-out"
+    role="menu"
+    tabindex="-1"
+  >
     <slot />
-  </div>
+  </ul>
 </div>