Fix bug in ActionMenu button where return doesn't trigger menu (#2158)

Co-authored-by: Keith Cirkel <[email protected]>
Co-authored-by: Cameron Dutro <[email protected]>

.changeset/gold-dingos-carry.md

@@ -0,0 +1,7 @@
+---
+"@primer/view-components": patch
+---
+
+Fix bug in ActionMenu button where return doesn't trigger menu
+
+<!-- Changed components: Primer::Alpha::ActionMenu -->

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

@@ -1,5 +1,6 @@
 import {controller, target} from '@github/catalyst'
-import IncludeFragmentElement from '@github/include-fragment-element'
+import '@oddbird/popover-polyfill'
+import type {IncludeFragmentElement} from '@github/include-fragment-element'
 
 type SelectVariant = 'none' | 'single' | 'multiple' | null
 type SelectedItem = {
@@ -49,14 +50,14 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   get popoverElement(): HTMLElement | null {
-    return this.querySelector<HTMLElement>('[popover]')
+    return this.invokerElement?.popoverTargetElement || null
   }
 
-  get invokerElement(): HTMLElement | null {
+  get invokerElement(): HTMLButtonElement | null {
     const id = this.querySelector('[role=menu]')?.id
     if (!id) return null
     for (const el of this.querySelectorAll(`[aria-controls]`)) {
-      if (el.getAttribute('aria-controls') === id) return el as HTMLElement
+      if (el.getAttribute('aria-controls') === id) return el as HTMLButtonElement
     }
     return null
   }

test/system/alpha/action_menu_test.rb

@@ -50,6 +50,18 @@ def test_action_keydown
       end
     end
 
+    def test_action_keydown_on_icon_button
+      visit_preview(:with_icon_button)
+
+      page.evaluate_script(<<~JS)
+        document.querySelector('action-menu button[aria-controls]').focus()
+      JS
+
+      page.driver.browser.keyboard.type(:enter)
+
+      assert_selector "anchored-position"
+    end
+
     def test_action_anchor
       visit_preview(:with_actions)