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

@@ -2,22 +2,31 @@ export type Align = 'middle' | 'top-left' | 'top-right';
 
 export type ContextMenuPosition = { x: number; y: number };
 
-export const getContextMenuPosition = (event: MouseEvent, align: Align = 'middle'): ContextMenuPosition => {
-  const { x, y, currentTarget, target } = event;
+export const getContextMenuPositionFromEvent = (
+  event: MouseEvent | KeyboardEvent,
+  align: Align = 'middle',
+): ContextMenuPosition => {
+  const { currentTarget, target } = event;
+  const x = 'x' in event ? event.x : 0;
+  const y = 'y' in event ? event.y : 0;
   const box = ((currentTarget || target) as HTMLElement)?.getBoundingClientRect();
   if (box) {
-    switch (align) {
-      case 'middle': {
-        return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
-      }
-      case 'top-left': {
-        return { x: box.x, y: box.y };
-      }
-      case 'top-right': {
-        return { x: box.x + box.width, y: box.y };
-      }
-    }
+    return getContextMenuPositionFromBoundingRect(box, align);
   }
 
   return { x, y };
 };
+
+export const getContextMenuPositionFromBoundingRect = (rect: DOMRect, align: Align = 'middle'): ContextMenuPosition => {
+  switch (align) {
+    case 'middle': {
+      return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+    }
+    case 'top-left': {
+      return { x: rect.x, y: rect.y };
+    }
+    case 'top-right': {
+      return { x: rect.x + rect.width, y: rect.y };
+    }
+  }
+};