Handle Space and Enter keys in menu navigation

Author: lazaronixon

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [Unreleased]
 - Fix command component accessibility issues
+- Handle Space and Enter keys in menu navigation
 
 ## 2.0.2 - 2025-08-06
 - Introduce surface color for component backgrounds

lib/generators/css_zero/add/templates/app/javascript/controllers/menu_controller.js

@@ -20,6 +20,11 @@ export default class extends Controller {
 
   navigate(event) {
     switch (event.key) {
+      case " ":
+      case "Enter":
+        this.#cancel(event)
+        this.#activate(event.target)
+        break
       case "ArrowUp":
         this.#cancel(event)
         this.#prev()
@@ -28,12 +33,10 @@ export default class extends Controller {
         this.#cancel(event)
         this.#next()
         break
-      case "PageUp":
       case "Home":
         this.#cancel(event)
         this.#first()
         break
-      case "PageDown":
       case "End":
         this.#cancel(event)
         this.#last()
@@ -46,6 +49,10 @@ export default class extends Controller {
     event.preventDefault()
   }
 
+  #activate(menuItem) {
+    menuItem.click()
+  }
+
   #reset([ entry ]) {
     entry.isIntersecting && this.#first()
   }