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>
2025-11-07 17:27:20 +00:00 · 2024-06-18 03:52:38 +00:00 · 2024-06-18 03:52:38 +00:00 · b71aa4473b
commit b71aa4473b
parent 99c6fdbc1c
26 changed files with 639 additions and 441 deletions
--- a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
@ -0,0 +1,151 @@
+<script lang="ts">
+  import CircleIconButton, { type Color } from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+  import {
+    getContextMenuPositionFromBoundingRect,
+    getContextMenuPositionFromEvent,
+    type Align,
+  } from '$lib/utils/context-menu';
+  import { generateId } from '$lib/utils/generate-id';
+  import { contextMenuNavigation } from '$lib/actions/context-menu-navigation';
+  import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
+  import { clickOutside } from '$lib/actions/click-outside';
+  import { shortcuts } from '$lib/actions/shortcut';
+
+  export let icon: string;
+  export let title: string;
+  /**
+   * The alignment of the context menu relative to the button.
+   */
+  export let align: Align = 'top-left';
+  /**
+   * The direction in which the context menu should open.
+   */
+  export let direction: 'left' | 'right' = 'right';
+  export let color: Color = 'transparent';
+  export let size: string | undefined = undefined;
+  export let padding: string | undefined = undefined;
+  /**
+   * Additional classes to apply to the button.
+   */
+  export let buttonClass: string | undefined = undefined;
+
+  let isOpen = false;
+  let contextMenuPosition = { x: 0, y: 0 };
+  let menuContainer: HTMLUListElement;
+  let buttonContainer: HTMLDivElement;
+
+  const id = generateId();
+  const buttonId = `context-menu-button-${id}`;
+  const menuId = `context-menu-${id}`;
+
+  $: {
+    if (isOpen) {
+      $optionClickCallbackStore = handleOptionClick;
+    }
+  }
+
+  const openDropdown = (event: KeyboardEvent | MouseEvent) => {
+    contextMenuPosition = getContextMenuPositionFromEvent(event, align);
+    isOpen = true;
+    menuContainer?.focus();
+  };
+
+  const handleClick = (event: MouseEvent) => {
+    if (isOpen) {
+      closeDropdown();
+      return;
+    }
+    openDropdown(event);
+  };
+
+  const onEscape = (event: KeyboardEvent) => {
+    if (isOpen) {
+      // if the dropdown is open, stop the event from propagating
+      event.stopPropagation();
+    }
+    closeDropdown();
+  };
+
+  const onResize = () => {
+    if (!isOpen) {
+      return;
+    }
+    contextMenuPosition = getContextMenuPositionFromBoundingRect(buttonContainer.getBoundingClientRect(), align);
+  };
+
+  const closeDropdown = () => {
+    if (!isOpen) {
+      return;
+    }
+    focusButton();
+    isOpen = false;
+    $selectedIdStore = undefined;
+  };
+
+  const handleOptionClick = () => {
+    closeDropdown();
+  };
+
+  const focusButton = () => {
+    const button: HTMLButtonElement | null = buttonContainer.querySelector(`#${buttonId}`);
+    button?.focus();
+  };
+</script>
+
+<svelte:window on:resize={onResize} />
+<div
+  use:contextMenuNavigation={{
+    closeDropdown,
+    container: menuContainer,
+    isOpen,
+    onEscape,
+    openDropdown,
+    selectedId: $selectedIdStore,
+    selectionChanged: (id) => ($selectedIdStore = id),
+  }}
+  use:clickOutside={{ onOutclick: closeDropdown }}
+  on:resize={onResize}
+>
+  <div bind:this={buttonContainer}>
+    <CircleIconButton
+      {color}
+      {icon}
+      {padding}
+      {size}
+      {title}
+      ariaControls={menuId}
+      ariaExpanded={isOpen}
+      ariaHasPopup={true}
+      class={buttonClass}
+      id={buttonId}
+      on:click={handleClick}
+    />
+  </div>
+  <div
+    use:shortcuts={[
+      {
+        shortcut: { key: 'Tab' },
+        onShortcut: closeDropdown,
+        preventDefault: false,
+      },
+      {
+        shortcut: { key: 'Tab', shift: true },
+        onShortcut: closeDropdown,
+        preventDefault: false,
+      },
+    ]}
+  >
+    <ContextMenu
+      {...contextMenuPosition}
+      {direction}
+      ariaActiveDescendant={$selectedIdStore}
+      ariaLabelledBy={buttonId}
+      bind:menuElement={menuContainer}
+      id={menuId}
+      isVisible={isOpen}
+    >
+      <slot />
+    </ContextMenu>
+  </div>
+</div>