Skip to content

fix(aria/menu): activate the item element on enter and space - #34086

Open
prath47 wants to merge 1 commit into
angular:mainfrom
prath47:aria-menu-enter-activates-item
Open

prath47 wants to merge 1 commit into
angular:mainfrom
prath47:aria-menu-enter-activates-item

Conversation

@prath47

@prath47 prath47 commented Nov 6, 2026

Copy link
Copy Markdown

Fixes #34072

The menu's keyboard manager prevents the default action for Enter and Space, and MenuPattern.trigger() only called submit(). So with the keyboard the item's element was never activated: <a ngMenuItem href> didn't navigate and a (click) listener on the item didn't run. Both work with the mouse because the real click happens before the menu handles it.

trigger() now calls element.click() on the active item (when it's enabled and doesn't open a submenu) and then submits, which is the same order a pointer click goes through. The synthetic click bubbles up to the menu's (click) host listener, so onClick ignores clicks while the item is being activated. Otherwise the item would be submitted twice and focus would jump back into the menu.

Items with a submenu still just open the submenu, and disabled items still do nothing.

Tests

  • private/menu/menu.spec.ts: Enter/Space clicks the element. A click that reaches onClick doesn't select twice. No click for disabled or submenu items
  • menu/menu.spec.ts: with the trigger example, Enter on Apple fires one click on the item, emits itemSelected once and closes the menu
bazel test //src/aria/private/menu:unit_tests //src/aria/menu:unit_tests

//src/aria/menu:unit_tests_chromium              PASSED
//src/aria/menu:unit_tests_firefox               PASSED
//src/aria/private/menu:unit_tests_chromium      PASSED
//src/aria/private/menu:unit_tests_firefox       PASSED

Without the menu.ts change, the two click tests fail (Expected spy click to have been called once. It was called 0 times.).

Manual check

I used the reporter's repro (https://github.com/artaommahe/aria-menu-repro, section B). Its check.mjs with the change applied to 22.2.6:

B. Enter on <a ng-menu-item href="#target"> → navigates          3/3 as expected
B. Enter on <button ng-menu-item (click)> → (click) runs         3/3 as expected
B. mouse click on link row → navigates                           3/3 as expected
B. mouse click on (click) row → (click) runs                     3/3 as expected

Before (22.2.6): Enter on the link leaves the hash empty and the (click) log stays empty

before

After: the hash is #target and "(click) ran" shows up in the log

after

One thing I left alone: top-level items in a ngMenuBar that don't have a submenu go through MenuBarPattern, which doesn't submit on Enter at all. That seemed like a separate change, but I'm happy to fold it in here if you'd prefer.

The menu prevents the default action of Enter and Space, so selecting an
item from the keyboard never reached the element itself. Links inside
ngMenuItem didn't navigate and (click) listeners on the item didn't run,
while the same item worked fine with a mouse.

Click the item's element before submitting so keyboard and pointer
activation behave the same. The synthetic click is ignored by the menu's
own click handler so the item isn't submitted twice.

Fixes angular#34072

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug(aria/menu): Enter on a menu item doesn't activate the element, so link items and (click) handlers are mouse-only

1 participant