fix(material/menu): set correct focus origin on item when opened via keyboard (#21252)

Fixes that we were setting the `program` focus origin on the first menu item,
even though the user opened it using the keyboard.

Fixes #21241.

Author: crisbeto

src/material-experimental/mdc-menu/menu.spec.ts

@@ -18,7 +18,16 @@ import {
 } from '@angular/core';
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {OverlayContainer, Overlay} from '@angular/cdk/overlay';
-import {ESCAPE, LEFT_ARROW, RIGHT_ARROW, DOWN_ARROW, TAB, HOME, END} from '@angular/cdk/keycodes';
+import {
+  ESCAPE,
+  LEFT_ARROW,
+  RIGHT_ARROW,
+  DOWN_ARROW,
+  TAB,
+  HOME,
+  END,
+  ENTER,
+} from '@angular/cdk/keycodes';
 import {MatMenu, MatMenuModule, MatMenuItem} from './index';
 import {MatRipple} from '@angular/material-experimental/mdc-core';
 import {
@@ -723,6 +732,27 @@ describe('MDC-based MatMenu', () => {
       expect(items[2].classList).toContain('cdk-keyboard-focused');
     }));
 
+  it('should set the keyboard focus origin when opened using the keyboard', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+    const trigger = fixture.componentInstance.triggerEl.nativeElement;
+
+    // Note that we dispatch both a `click` and a `keydown` to imitate the browser behavior.
+    dispatchKeyboardEvent(trigger, 'keydown', ENTER);
+    trigger.click();
+    fixture.detectChanges();
+
+    const items =
+        Array.from<HTMLElement>(document.querySelectorAll('.mat-mdc-menu-panel [mat-menu-item]'));
+
+    items.forEach(item => patchElementFocus(item));
+    tick(500);
+    tick();
+    fixture.detectChanges();
+
+    expect(items[0].classList).toContain('cdk-keyboard-focused');
+  }));
+
   it('should toggle the aria-expanded attribute on the trigger', () => {
     const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
     fixture.detectChanges();

src/material/menu/menu-trigger.ts

@@ -8,7 +8,7 @@
 
 import {FocusMonitor, FocusOrigin, isFakeMousedownFromScreenReader} from '@angular/cdk/a11y';
 import {Direction, Directionality} from '@angular/cdk/bidi';
-import {LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
+import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
 import {
   FlexibleConnectedPositionStrategy,
   HorizontalConnectionPos,
@@ -103,7 +103,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
 
   // Tracking input type is necessary so it's possible to only auto-focus
   // the first item of the list when the menu is opened via the keyboard
-  _openedBy: 'mouse' | 'touch' | null = null;
+  _openedBy: Exclude<FocusOrigin, 'program'> = null;
 
   /**
    * @deprecated
@@ -520,9 +520,15 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
   _handleKeydown(event: KeyboardEvent): void {
     const keyCode = event.keyCode;
 
+    // Pressing enter on the trigger will trigger the click handler later.
+    if (keyCode === ENTER || keyCode === SPACE) {
+      this._openedBy = 'keyboard';
+    }
+
     if (this.triggersSubmenu() && (
             (keyCode === RIGHT_ARROW && this.dir === 'ltr') ||
             (keyCode === LEFT_ARROW && this.dir === 'rtl'))) {
+      this._openedBy = 'keyboard';
       this.openMenu();
     }
   }

src/material/menu/menu.spec.ts

@@ -1,6 +1,15 @@
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {Direction, Directionality} from '@angular/cdk/bidi';
-import {DOWN_ARROW, END, ESCAPE, HOME, LEFT_ARROW, RIGHT_ARROW, TAB} from '@angular/cdk/keycodes';
+import {
+  DOWN_ARROW,
+  END,
+  ENTER,
+  ESCAPE,
+  HOME,
+  LEFT_ARROW,
+  RIGHT_ARROW,
+  TAB,
+} from '@angular/cdk/keycodes';
 import {Overlay, OverlayContainer} from '@angular/cdk/overlay';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
@@ -745,6 +754,27 @@ describe('MatMenu', () => {
       expect(items[2].classList).toContain('cdk-keyboard-focused');
     }));
 
+  it('should set the keyboard focus origin when opened using the keyboard', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+    const trigger = fixture.componentInstance.triggerEl.nativeElement;
+
+    // Note that we dispatch both a `click` and a `keydown` to imitate the browser behavior.
+    dispatchKeyboardEvent(trigger, 'keydown', ENTER);
+    trigger.click();
+    fixture.detectChanges();
+
+    const items =
+        Array.from<HTMLElement>(document.querySelectorAll('.mat-menu-panel [mat-menu-item]'));
+
+    items.forEach(item => patchElementFocus(item));
+    tick(500);
+    tick();
+    fixture.detectChanges();
+
+    expect(items[0].classList).toContain('cdk-keyboard-focused');
+  }));
+
   it('should toggle the aria-expanded attribute on the trigger', () => {
     const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
     fixture.detectChanges();

tools/public_api_guard/material/menu.d.ts

@@ -149,7 +149,7 @@ export interface MatMenuPanel<T = any> {
 export declare class MatMenuTrigger implements AfterContentInit, OnDestroy {
     get _deprecatedMatMenuTriggerFor(): MatMenuPanel;
     set _deprecatedMatMenuTriggerFor(v: MatMenuPanel);
-    _openedBy: 'mouse' | 'touch' | null;
+    _openedBy: Exclude<FocusOrigin, 'program'>;
     get dir(): Direction;
     get menu(): MatMenuPanel;
     set menu(menu: MatMenuPanel);