openproject-primer_view_components 0.68.0 → 0.69.0

data/app/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -11,6 +11,10 @@ export declare class ActionMenuElement extends HTMLElement {
     #private;
     includeFragment: IncludeFragmentElement;
     overlay: AnchoredPositionElement;
+    list: HTMLElement;
+    static validItemRoles: string[];
+    static validSelectors: string[];
+    static menuItemSelectors: string[];
     get selectVariant(): SelectVariant;
     set selectVariant(variant: SelectVariant);
     get dynamicLabelPrefix(): string;
@@ -18,6 +22,7 @@ export declare class ActionMenuElement extends HTMLElement {
     get dynamicLabel(): boolean;
     set dynamicLabel(value: boolean);
     get popoverElement(): HTMLElement | null;
+    get childPopoverElements(): HTMLElement[];
     get invokerElement(): HTMLButtonElement | null;
     get invokerLabel(): HTMLElement | null;
     get selectedItems(): SelectedItem[];

data/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -15,13 +15,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_intersectionObserver, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isAnchorActivationViaSpace, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get;
+var _ActionMenuElement_instances, _a, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_intersectionObserver, _ActionMenuElement_focusZoneStack, _ActionMenuElement_updateLevels, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isAnchorActivationViaSpace, _ActionMenuElement_isClipboardActivationViaKeyboard, _ActionMenuElement_isActivation, _ActionMenuElement_handleItemKeyboardEvent, _ActionMenuElement_handleToggleEvent, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get, _ActionMenuElement_subMenuForItem, _ActionMenuElement_itemForSubMenu;
+var ActionMenuElement_1;
 import { controller, target } from '@github/catalyst';
 import '@oddbird/popover-polyfill';
 import { observeMutationsUntilConditionMet } from '../../utils';
-const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
-const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`);
-let ActionMenuElement = class ActionMenuElement extends HTMLElement {
+import { ActionMenuFocusZoneStack } from './action_menu_focus_zone_stack';
+import { ClipboardCopyElement } from '@github/clipboard-copy-element';
+let ActionMenuElement = ActionMenuElement_1 = _a = class ActionMenuElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _ActionMenuElement_instances.add(this);
@@ -30,6 +31,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         _ActionMenuElement_inputName.set(this, '');
         _ActionMenuElement_invokerBeingClicked.set(this, false);
         _ActionMenuElement_intersectionObserver.set(this, void 0);
+        _ActionMenuElement_focusZoneStack.set(this, void 0);
     }
     get selectVariant() {
         return this.getAttribute('data-select-variant');
@@ -60,6 +62,10 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
     get popoverElement() {
         return this.invokerElement?.popoverTargetElement || null;
     }
+    // i.e. sub-menus
+    get childPopoverElements() {
+        return Array.from(this.overlay.querySelectorAll('anchored-position'));
+    }
     get invokerElement() {
         const id = this.querySelector('[role=menu]')?.id;
         if (!id)
@@ -96,7 +102,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         this.addEventListener('mouseover', this, { signal });
         this.addEventListener('focusout', this, { signal });
         this.addEventListener('mousedown', this, { signal });
-        this.popoverElement?.addEventListener('toggle', this, { signal });
+        this.addEventListener('toggle', this, { signal, capture: true });
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
@@ -134,6 +140,10 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         if (!this.includeFragment) {
             this.setAttribute('data-ready', 'true');
         }
+        const levelObserver = new MutationObserver(() => __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateLevels).call(this));
+        levelObserver.observe(this, { childList: true, subtree: true });
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateLevels).call(this);
+        __classPrivateFieldSet(this, _ActionMenuElement_focusZoneStack, new ActionMenuFocusZoneStack(), "f");
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
@@ -141,10 +151,9 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
     handleEvent(event) {
         const targetIsInvoker = this.invokerElement?.contains(event.target);
         const eventIsActivation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event);
-        if (event.type === 'toggle' && event.newState === 'open') {
-            window.requestAnimationFrame(() => {
-                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)?.focus();
-            });
+        if (event.type === 'toggle' && event instanceof ToggleEvent) {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleToggleEvent).call(this, event);
+            return;
         }
         if (targetIsInvoker && event.type === 'mousedown') {
             __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, true, "f");
@@ -172,7 +181,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             });
             return;
         }
-        const item = event.target.closest(menuItemSelectors.join(','));
+        const item = event.target.closest(ActionMenuElement_1.menuItemSelectors.join(','));
         const targetIsItem = item !== null;
         if (targetIsItem && eventIsActivation) {
             if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).call(this, event))
@@ -191,15 +200,26 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
                 event.preventDefault();
                 item.click();
             }
+            const subMenu = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_subMenuForItem).call(this, item);
+            if (subMenu) {
+                // Prevent submitting a form when clicking on sub-menu items
+                event.preventDefault();
+                subMenu.showPopover();
+                return;
+            }
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, item);
             return;
         }
         if (event.type === 'include-fragment-replaced') {
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleIncludeFragmentReplaced).call(this);
+            return;
+        }
+        if (targetIsItem && event instanceof KeyboardEvent) {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemKeyboardEvent).call(this, event, item);
         }
     }
     get items() {
-        return Array.from(this.querySelectorAll(menuItemSelectors.join(',')));
+        return Array.from(this.querySelectorAll(ActionMenuElement_1.menuItemSelectors.join(',')));
     }
     getItemById(itemId) {
         return this.querySelector(`li[data-item-id="${itemId}"`);
@@ -274,10 +294,18 @@ _ActionMenuElement_originalLabel = new WeakMap();
 _ActionMenuElement_inputName = new WeakMap();
 _ActionMenuElement_invokerBeingClicked = new WeakMap();
 _ActionMenuElement_intersectionObserver = new WeakMap();
+_ActionMenuElement_focusZoneStack = new WeakMap();
 _ActionMenuElement_instances = new WeakSet();
+_ActionMenuElement_updateLevels = function _ActionMenuElement_updateLevels() {
+    let idx = 1;
+    for (const menu of this.querySelectorAll('[role=menu]')) {
+        menu.setAttribute('data-level', idx.toString());
+        idx++;
+    }
+};
 _ActionMenuElement_softDisableItems = function _ActionMenuElement_softDisableItems() {
     const { signal } = __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f");
-    for (const item of this.querySelectorAll(validSelectors.join(','))) {
+    for (const item of this.querySelectorAll(ActionMenuElement_1.validSelectors.join(','))) {
         item.addEventListener('click', __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).bind(this), { signal });
         item.addEventListener('keydown', __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).bind(this), { signal });
     }
@@ -285,7 +313,7 @@ _ActionMenuElement_softDisableItems = function _ActionMenuElement_softDisableIte
 _ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_potentiallyDisallowActivation(event) {
     if (!__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event))
         return false;
-    const item = event.target.closest(menuItemSelectors.join(','));
+    const item = event.target.closest(ActionMenuElement_1.menuItemSelectors.join(','));
     if (!item)
         return false;
     if (item.getAttribute('aria-disabled')) {
@@ -305,11 +333,55 @@ _ActionMenuElement_isAnchorActivationViaSpace = function _ActionMenuElement_isAn
         !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
         event.key === ' ');
 };
+_ActionMenuElement_isClipboardActivationViaKeyboard = function _ActionMenuElement_isClipboardActivationViaKeyboard(event) {
+    return (event.target instanceof ClipboardCopyElement &&
+        event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        (event.key === ' ' || event.key === 'Enter'));
+};
 _ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event) {
     // Some browsers fire MouseEvents (Firefox) and others fire PointerEvents (Chrome). Activating an item via
     // enter or space counterintuitively fires one of these rather than a KeyboardEvent. Since PointerEvent
     // inherits from MouseEvent, it is enough to check for MouseEvent here.
-    return (event instanceof MouseEvent && event.type === 'click') || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isAnchorActivationViaSpace).call(this, event);
+    return ((event instanceof MouseEvent && event.type === 'click') ||
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isAnchorActivationViaSpace).call(this, event) ||
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isClipboardActivationViaKeyboard).call(this, event));
+};
+_ActionMenuElement_handleItemKeyboardEvent = function _ActionMenuElement_handleItemKeyboardEvent(event, item) {
+    switch (event.key) {
+        case 'ArrowRight': {
+            const subMenu = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_subMenuForItem).call(this, item);
+            subMenu?.showPopover();
+            break;
+        }
+        case 'ArrowLeft':
+            if (item.closest('role[menu]') !== this.list) {
+                const overlay = item.closest('anchored-position');
+                overlay?.hidePopover();
+            }
+            break;
+    }
+};
+_ActionMenuElement_handleToggleEvent = function _ActionMenuElement_handleToggleEvent(event) {
+    const subMenu = event.target;
+    if (event.newState === 'open') {
+        // allow tabbing away from primary menu, but trap focus in sub-menus
+        const isPrimaryMenu = subMenu === this.overlay;
+        __classPrivateFieldGet(this, _ActionMenuElement_focusZoneStack, "f").push(subMenu, { trapFocus: !isPrimaryMenu });
+        window.requestAnimationFrame(() => {
+            const firstItem = subMenu.querySelector(ActionMenuElement_1.menuItemSelectors.join(','));
+            firstItem?.focus();
+        });
+    }
+    else {
+        // Note that this will also cause focus to return to the invoker button, which is
+        // desirable
+        __classPrivateFieldGet(this, _ActionMenuElement_focusZoneStack, "f").pop(subMenu);
+        const item = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_itemForSubMenu).call(this, subMenu);
+        if (item)
+            item.focus();
+    }
 };
 _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleInvokerActivated(event) {
     event.preventDefault();
@@ -412,6 +484,9 @@ _ActionMenuElement_show = function _ActionMenuElement_show() {
 };
 _ActionMenuElement_hide = function _ActionMenuElement_hide() {
     this.popoverElement?.hidePopover();
+    for (const child of this.childPopoverElements) {
+        child.hidePopover();
+    }
 };
 _ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
     return this.popoverElement?.matches(':popover-open');
@@ -476,15 +551,35 @@ _ActionMenuElement_updateInput = function _ActionMenuElement_updateInput() {
     }
 };
 _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
-    return this.querySelector(menuItemSelectors.join(','));
+    return this.querySelector(ActionMenuElement_1.menuItemSelectors.join(','));
+};
+_ActionMenuElement_subMenuForItem = function _ActionMenuElement_subMenuForItem(item) {
+    const popoverId = item.getAttribute('popovertarget');
+    if (popoverId) {
+        return this.querySelector(`[id="${popoverId}"]`);
+    }
+    return null;
 };
+_ActionMenuElement_itemForSubMenu = function _ActionMenuElement_itemForSubMenu(subMenu) {
+    const anchorId = subMenu.getAttribute('anchor');
+    if (anchorId) {
+        return this.querySelector(`[id="${anchorId}"]`);
+    }
+    return null;
+};
+ActionMenuElement.validItemRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
+ActionMenuElement.validSelectors = ActionMenuElement_1.validItemRoles.map(role => `[role="${role}"]`);
+ActionMenuElement.menuItemSelectors = ActionMenuElement_1.validSelectors.map(selector => `:not([hidden]) > ${selector}`);
 __decorate([
     target
 ], ActionMenuElement.prototype, "includeFragment", void 0);
 __decorate([
     target
 ], ActionMenuElement.prototype, "overlay", void 0);
-ActionMenuElement = __decorate([
+__decorate([
+    target
+], ActionMenuElement.prototype, "list", void 0);
+ActionMenuElement = ActionMenuElement_1 = __decorate([
     controller
 ], ActionMenuElement);
 export { ActionMenuElement };

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -3,6 +3,8 @@ import '@oddbird/popover-polyfill'
 import type {IncludeFragmentElement} from '@github/include-fragment-element'
 import AnchoredPositionElement from '../../anchored_position'
 import {observeMutationsUntilConditionMet} from '../../utils'
+import {ActionMenuFocusZoneStack} from './action_menu_focus_zone_stack'
+import {ClipboardCopyElement} from '@github/clipboard-copy-element'
 
 type SelectVariant = 'none' | 'single' | 'multiple' | null
 type SelectedItem = {
@@ -11,22 +13,22 @@ type SelectedItem = {
   element: Element
 }
 
-const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
-const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`)
-
 @controller
 export class ActionMenuElement extends HTMLElement {
-  @target
-  includeFragment: IncludeFragmentElement
-
-  @target
-  overlay: AnchoredPositionElement
+  @target includeFragment: IncludeFragmentElement
+  @target overlay: AnchoredPositionElement
+  @target list: HTMLElement
 
   #abortController: AbortController
   #originalLabel = ''
   #inputName = ''
   #invokerBeingClicked = false
   #intersectionObserver: IntersectionObserver
+  #focusZoneStack: ActionMenuFocusZoneStack
+
+  static validItemRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio']
+  static validSelectors = ActionMenuElement.validItemRoles.map(role => `[role="${role}"]`)
+  static menuItemSelectors = ActionMenuElement.validSelectors.map(selector => `:not([hidden]) > ${selector}`)
 
   get selectVariant(): SelectVariant {
     return this.getAttribute('data-select-variant') as SelectVariant
@@ -62,6 +64,11 @@ export class ActionMenuElement extends HTMLElement {
     return (this.invokerElement?.popoverTargetElement as HTMLElement) || null
   }
 
+  // i.e. sub-menus
+  get childPopoverElements(): HTMLElement[] {
+    return Array.from(this.overlay.querySelectorAll('anchored-position')) as AnchoredPositionElement[]
+  }
+
   get invokerElement(): HTMLButtonElement | null {
     const id = this.querySelector('[role=menu]')?.id
     if (!id) return null
@@ -102,7 +109,7 @@ export class ActionMenuElement extends HTMLElement {
     this.addEventListener('mouseover', this, {signal})
     this.addEventListener('focusout', this, {signal})
     this.addEventListener('mousedown', this, {signal})
-    this.popoverElement?.addEventListener('toggle', this, {signal})
+    this.addEventListener('toggle', this, {signal, capture: true})
     this.#setDynamicLabel()
     this.#updateInput()
     this.#softDisableItems()
@@ -149,6 +156,22 @@ export class ActionMenuElement extends HTMLElement {
     if (!this.includeFragment) {
       this.setAttribute('data-ready', 'true')
     }
+
+    const levelObserver = new MutationObserver(() => this.#updateLevels())
+    levelObserver.observe(this, {childList: true, subtree: true})
+
+    this.#updateLevels()
+
+    this.#focusZoneStack = new ActionMenuFocusZoneStack()
+  }
+
+  #updateLevels() {
+    let idx = 1
+
+    for (const menu of this.querySelectorAll('[role=menu]')) {
+      menu.setAttribute('data-level', idx.toString())
+      idx++
+    }
   }
 
   disconnectedCallback() {
@@ -158,7 +181,7 @@ export class ActionMenuElement extends HTMLElement {
   #softDisableItems() {
     const {signal} = this.#abortController
 
-    for (const item of this.querySelectorAll(validSelectors.join(','))) {
+    for (const item of this.querySelectorAll(ActionMenuElement.validSelectors.join(','))) {
       item.addEventListener('click', this.#potentiallyDisallowActivation.bind(this), {signal})
       item.addEventListener('keydown', this.#potentiallyDisallowActivation.bind(this), {signal})
     }
@@ -168,7 +191,7 @@ export class ActionMenuElement extends HTMLElement {
   #potentiallyDisallowActivation(event: Event): boolean {
     if (!this.#isActivation(event)) return false
 
-    const item = (event.target as HTMLElement).closest(menuItemSelectors.join(','))
+    const item = (event.target as HTMLElement).closest(ActionMenuElement.menuItemSelectors.join(','))
     if (!item) return false
 
     if (item.getAttribute('aria-disabled')) {
@@ -193,21 +216,34 @@ export class ActionMenuElement extends HTMLElement {
     )
   }
 
+  #isClipboardActivationViaKeyboard(event: Event): boolean {
+    return (
+      event.target instanceof ClipboardCopyElement &&
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+      (event.key === ' ' || event.key === 'Enter')
+    )
+  }
+
   #isActivation(event: Event): boolean {
     // Some browsers fire MouseEvents (Firefox) and others fire PointerEvents (Chrome). Activating an item via
     // enter or space counterintuitively fires one of these rather than a KeyboardEvent. Since PointerEvent
     // inherits from MouseEvent, it is enough to check for MouseEvent here.
-    return (event instanceof MouseEvent && event.type === 'click') || this.#isAnchorActivationViaSpace(event)
+    return (
+      (event instanceof MouseEvent && event.type === 'click') ||
+      this.#isAnchorActivationViaSpace(event) ||
+      this.#isClipboardActivationViaKeyboard(event)
+    )
   }
 
   handleEvent(event: Event) {
     const targetIsInvoker = this.invokerElement?.contains(event.target as HTMLElement)
     const eventIsActivation = this.#isActivation(event)
 
-    if (event.type === 'toggle' && (event as ToggleEvent).newState === 'open') {
-      window.requestAnimationFrame(() => {
-        this.#firstItem?.focus()
-      })
+    if (event.type === 'toggle' && event instanceof ToggleEvent) {
+      this.#handleToggleEvent(event)
+      return
     }
 
     if (targetIsInvoker && event.type === 'mousedown') {
@@ -241,7 +277,7 @@ export class ActionMenuElement extends HTMLElement {
       return
     }
 
-    const item = (event.target as Element).closest(menuItemSelectors.join(','))
+    const item = (event.target as Element).closest(ActionMenuElement.menuItemSelectors.join(',')) as HTMLElement | null
     const targetIsItem = item !== null
 
     if (targetIsItem && eventIsActivation) {
@@ -262,7 +298,16 @@ export class ActionMenuElement extends HTMLElement {
       // We then click it manually to navigate.
       if (this.#isAnchorActivationViaSpace(event)) {
         event.preventDefault()
-        ;(item as HTMLElement).click()
+        item.click()
+      }
+
+      const subMenu = this.#subMenuForItem(item)
+
+      if (subMenu) {
+        // Prevent submitting a form when clicking on sub-menu items
+        event.preventDefault()
+        subMenu.showPopover()
+        return
       }
 
       this.#handleItemActivated(item)
@@ -272,6 +317,50 @@ export class ActionMenuElement extends HTMLElement {
 
     if (event.type === 'include-fragment-replaced') {
       this.#handleIncludeFragmentReplaced()
+      return
+    }
+
+    if (targetIsItem && event instanceof KeyboardEvent) {
+      this.#handleItemKeyboardEvent(event, item)
+    }
+  }
+
+  #handleItemKeyboardEvent(event: KeyboardEvent, item: HTMLElement) {
+    switch (event.key) {
+      case 'ArrowRight': {
+        const subMenu = this.#subMenuForItem(item)
+        subMenu?.showPopover()
+        break
+      }
+
+      case 'ArrowLeft':
+        if (item.closest('role[menu]') !== this.list) {
+          const overlay = item.closest('anchored-position') as AnchoredPositionElement | null
+          overlay?.hidePopover()
+        }
+
+        break
+    }
+  }
+
+  #handleToggleEvent(event: ToggleEvent) {
+    const subMenu = event.target as AnchoredPositionElement
+
+    if (event.newState === 'open') {
+      // allow tabbing away from primary menu, but trap focus in sub-menus
+      const isPrimaryMenu = subMenu === this.overlay
+      this.#focusZoneStack.push(subMenu, {trapFocus: !isPrimaryMenu})
+
+      window.requestAnimationFrame(() => {
+        const firstItem = subMenu.querySelector(ActionMenuElement.menuItemSelectors.join(',')) as HTMLElement | null
+        firstItem?.focus()
+      })
+    } else {
+      // Note that this will also cause focus to return to the invoker button, which is
+      // desirable
+      this.#focusZoneStack.pop(subMenu)
+      const item = this.#itemForSubMenu(subMenu)
+      if (item) item.focus()
     }
   }
 
@@ -322,7 +411,7 @@ export class ActionMenuElement extends HTMLElement {
     dialog.addEventListener('cancel', handleDialogClose, {signal})
   }
 
-  #handleItemActivated(item: Element) {
+  #handleItemActivated(item: HTMLElement) {
     // Hide popover after current event loop to prevent changes in focus from
     // altering the target of the event. Not doing this specifically affects
     // <a> tags. It causes the event to be sent to the currently focused element
@@ -391,6 +480,10 @@ export class ActionMenuElement extends HTMLElement {
 
   #hide() {
     this.popoverElement?.hidePopover()
+
+    for (const child of this.childPopoverElements) {
+      child.hidePopover()
+    }
   }
 
   #isOpen() {
@@ -458,11 +551,11 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   get #firstItem(): HTMLElement | null {
-    return this.querySelector(menuItemSelectors.join(','))
+    return this.querySelector(ActionMenuElement.menuItemSelectors.join(','))
   }
 
   get items(): HTMLElement[] {
-    return Array.from(this.querySelectorAll(menuItemSelectors.join(',')))
+    return Array.from(this.querySelectorAll(ActionMenuElement.menuItemSelectors.join(',')))
   }
 
   getItemById(itemId: string): HTMLElement | null {
@@ -521,7 +614,7 @@ export class ActionMenuElement extends HTMLElement {
 
   checkItem(item: Element | null) {
     if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
-      const itemContent = item.querySelector('.ActionListContent')!
+      const itemContent = item.querySelector('.ActionListContent')! as HTMLElement
       const ariaChecked = itemContent.getAttribute('aria-checked') === 'true'
 
       if (!ariaChecked) {
@@ -532,7 +625,7 @@ export class ActionMenuElement extends HTMLElement {
 
   uncheckItem(item: Element | null) {
     if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
-      const itemContent = item.querySelector('.ActionListContent')!
+      const itemContent = item.querySelector('.ActionListContent')! as HTMLElement
       const ariaChecked = itemContent.getAttribute('aria-checked') === 'true'
 
       if (ariaChecked) {
@@ -540,6 +633,26 @@ export class ActionMenuElement extends HTMLElement {
       }
     }
   }
+
+  #subMenuForItem(item: HTMLElement): AnchoredPositionElement | null {
+    const popoverId = item.getAttribute('popovertarget')
+
+    if (popoverId) {
+      return this.querySelector(`[id="${popoverId}"]`) as AnchoredPositionElement
+    }
+
+    return null
+  }
+
+  #itemForSubMenu(subMenu: HTMLElement): HTMLElement | null {
+    const anchorId = subMenu.getAttribute('anchor')
+
+    if (anchorId) {
+      return this.querySelector(`[id="${anchorId}"]`) as HTMLElement | null
+    }
+
+    return null
+  }
 }
 
 if (!window.customElements.get('action-menu')) {

data/app/components/primer/alpha/action_menu/action_menu_focus_zone_stack.d.ts

@@ -0,0 +1,17 @@
+import AnchoredPositionElement from '../../anchored_position';
+type StackEntry = {
+    element: AnchoredPositionElement;
+    abortController?: AbortController;
+};
+export declare class ActionMenuFocusZoneStack {
+    #private;
+    constructor();
+    get current(): StackEntry | undefined;
+    push(next: AnchoredPositionElement, options?: {
+        trapFocus: boolean;
+    }): void;
+    pop(target?: AnchoredPositionElement): void;
+    elementIsMenuItem(element: HTMLElement): boolean;
+    get isEmpty(): boolean;
+}
+export {};

data/app/components/primer/alpha/action_menu/action_menu_focus_zone_stack.js

@@ -0,0 +1,62 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ActionMenuFocusZoneStack_instances, _ActionMenuFocusZoneStack_stack, _ActionMenuFocusZoneStack_setupFocusZone, _ActionMenuFocusZoneStack_validItemRoles_get;
+import { FocusKeys, focusTrap, focusZone } from '@primer/behaviors';
+import { ActionMenuElement } from './action_menu_element';
+export class ActionMenuFocusZoneStack {
+    constructor() {
+        _ActionMenuFocusZoneStack_instances.add(this);
+        _ActionMenuFocusZoneStack_stack.set(this, void 0);
+        __classPrivateFieldSet(this, _ActionMenuFocusZoneStack_stack, [], "f");
+    }
+    get current() {
+        return __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f")[__classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").length - 1];
+    }
+    push(next, options = { trapFocus: true }) {
+        const { trapFocus } = options;
+        __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").push({ element: next, abortController: __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_instances, "m", _ActionMenuFocusZoneStack_setupFocusZone).call(this, next, trapFocus) });
+    }
+    pop(target) {
+        if (target) {
+            while (__classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").length > 0 && this.current?.element !== target) {
+                const entry = __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").pop();
+                entry?.abortController?.abort();
+            }
+        }
+        const entry = __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").pop();
+        entry?.abortController?.abort();
+    }
+    elementIsMenuItem(element) {
+        return __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_instances, "a", _ActionMenuFocusZoneStack_validItemRoles_get).includes(element.getAttribute('role') || '');
+    }
+    get isEmpty() {
+        return __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").length === 0;
+    }
+}
+_ActionMenuFocusZoneStack_stack = new WeakMap(), _ActionMenuFocusZoneStack_instances = new WeakSet(), _ActionMenuFocusZoneStack_setupFocusZone = function _ActionMenuFocusZoneStack_setupFocusZone(containerEl, trapFocus) {
+    const focusZoneAbortController = focusZone(containerEl, {
+        bindKeys: FocusKeys.ArrowVertical | FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd | FocusKeys.Backspace,
+        focusOutBehavior: 'wrap',
+        focusableElementFilter: (element) => {
+            return this.elementIsMenuItem(element) && element.closest('anchored-position') === containerEl;
+        },
+    });
+    if (trapFocus) {
+        const { signal: focusZoneSignal } = focusZoneAbortController;
+        return focusTrap(containerEl, undefined, focusZoneSignal);
+    }
+    else {
+        return focusZoneAbortController;
+    }
+}, _ActionMenuFocusZoneStack_validItemRoles_get = function _ActionMenuFocusZoneStack_validItemRoles_get() {
+    return ActionMenuElement.validItemRoles;
+};