fix: handle Enter/Space key on focused dropdown link items

When navigating to a link item in a dropdown menu using keyboard and
pressing Enter or Space, the link was not being followed. Instead, the
menu would close and reopen with the first item focused.

The issue was that handleEnterOrSpace only checked if the dropdown
button had browser focus, but menu items use aria-activedescendant
pattern with tabindex="-1", so they never receive actual browser focus.

Now the handler first checks for items with the data-focus attribute
(our visual focus indicator) and simulates a click on them, which
properly triggers link navigation for link items or click handlers
for button items.

Author: ukutaht

assets/js/hooks/dropdown.js

@@ -151,7 +151,14 @@ export default {
   },
 
   handleEnterOrSpace(e) {
-    if (document.activeElement === this.refs.button) {
+    const focusedItem = this.el.querySelector(SELECTORS.FOCUSED_MENUITEM)
+
+    if (focusedItem && focusedItem.getAttribute('aria-disabled') !== 'true') {
+      // A menu item is focused - click it
+      e.preventDefault()
+      focusedItem.click()
+    } else if (document.activeElement === this.refs.button) {
+      // Button is focused - open menu
       e.preventDefault()
       this.showMenuAndFocusFirst()
     }

demo/test/wallaby/demo_web/dropdown_custom_components_test.exs

@@ -61,4 +61,21 @@ defmodule DemoWeb.DropdownCustomComponentsTest do
     |> assert_has(Query.css("#dropdown-custom a[role=menuitem]:nth-child(2)[data-focus]"))
     |> assert_missing(Query.css("#dropdown-custom [role=menuitem]:nth-child(1)[data-focus]"))
   end
+
+  feature "pressing Enter on a focused link item navigates to the link", %{session: session} do
+    session
+    |> visit_fixture("/fixtures/dropdown-custom-components", "#dropdown-custom")
+    |> click(@dropdown_trigger)
+    |> assert_has(@dropdown_menu |> Query.visible(true))
+    # Navigate down to the link item (which links to "/")
+    |> send_keys([:down_arrow])
+    |> send_keys([:down_arrow])
+    |> assert_has(
+      Query.css("#dropdown-custom a[role=menuitem]:nth-child(2)[data-focus]", text: "Link Item")
+    )
+    # Press Enter to follow the link
+    |> send_keys([:enter])
+    # Should navigate away from the fixture page - the dropdown should no longer exist
+    |> assert_missing(@dropdown_container)
+  end
 end