Prevent Scroll on ActionMenu (#3327)

Co-authored-by: Cameron Dutro <camertron@gmail.com>

Author: acbreton

.changeset/kind-shirts-shout.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Add preventScroll to focus call in Action Menu

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

@@ -205,7 +205,9 @@ export class ActionMenuElement extends HTMLElement {
     const eventIsActivation = this.#isActivation(event)
 
     if (event.type === 'toggle' && (event as ToggleEvent).newState === 'open') {
-      this.#firstItem?.focus()
+      window.requestAnimationFrame(() => {
+        this.#firstItem?.focus()
+      })
     }
 
     if (targetIsInvoker && event.type === 'mousedown') {
@@ -371,7 +373,7 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   #handleIncludeFragmentReplaced() {
-    if (this.#firstItem) this.#firstItem.focus()
+    this.#firstItem?.focus()
     this.#softDisableItems()
 
     // async items have loaded, so component is ready

script/test-setup

@@ -1,3 +1,5 @@
 #!/bin/bash
 
+bundle
+pushd demo; bundle; popd
 overmind start --daemonize --procfile Procfile.test --socket ./overmind-test.sock

test/system/alpha/action_bar_test.rb

@@ -44,7 +44,10 @@ def test_focus_set_within_overflow_menu
 
       # We want to ensure that we're within the ActionMenu assert_selector("action-bar") do
       keyboard.type(:enter)
-      assert_equal page.evaluate_script("document.activeElement.classList.contains('ActionListContent')"), true
+
+      assert_selector ".ActionListContent" do |content|
+        page.evaluate_script("document.activeElement === arguments[0]", content)
+      end
     end
 
     def test_escape_in_overflow_menu_sets_focus_back
@@ -58,7 +61,9 @@ def test_escape_in_overflow_menu_sets_focus_back
       assert_equal page.evaluate_script("!!document.activeElement.closest('action-menu')"), true
 
       keyboard.type(:enter)
-      assert_equal page.evaluate_script("document.activeElement.classList.contains('ActionListContent')"), true
+      assert_selector ".ActionListContent" do |content|
+        page.evaluate_script("document.activeElement === arguments[0]", content)
+      end
 
       keyboard.type(:escape)
 
@@ -75,7 +80,10 @@ def test_click_outside_of_menu_sets_tabindex_back
       keyboard.type(:tab, :left)
 
       keyboard.type(:enter)
-      assert_equal page.evaluate_script("document.activeElement.classList.contains('ActionListContent')"), true
+
+      assert_selector ".ActionListContent" do |content|
+        page.evaluate_script("document.activeElement === arguments[0]", content)
+      end
 
       mouse.click(x: 0, y: 0)
       keyboard.type(:tab)

test/system/alpha/action_menu_test.rb

@@ -75,6 +75,11 @@ def open_panel_via_keyboard
         # open menu, "click" on first item
         keyboard.type(:enter)
         assert_selector "anchored-position:popover-open" # wait for menu to open
+
+        # make sure the first list item is the active element
+        assert_selector "button[role=menuitem], button[role=menuitemradio], button[role=menuitemcheckbox]" do |button|
+          page.evaluate_script("document.activeElement === arguments[0]", button)
+        end
       end
     end