fix(menu): set appropriate origin when restoring focus

Sets the correct focus origin depending on the way a menu has been opened.

Fixes #9292.

Author: crisbeto

src/lib/menu/menu-module.ts

@@ -10,6 +10,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MatCommonModule} from '@angular/material/core';
 import {OverlayModule} from '@angular/cdk/overlay';
+import {A11yModule} from '@angular/cdk/a11y';
 import {MatMenu, MAT_MENU_DEFAULT_OPTIONS} from './menu-directive';
 import {MatMenuItem} from './menu-item';
 import {MatMenuTrigger, MAT_MENU_SCROLL_STRATEGY_PROVIDER} from './menu-trigger';
@@ -20,6 +21,7 @@ import {MatRippleModule} from '@angular/material/core';
   imports: [
     OverlayModule,
     CommonModule,
+    A11yModule,
     MatRippleModule,
     MatCommonModule,
   ],

src/lib/menu/menu-trigger.ts

@@ -43,6 +43,7 @@ import {throwMatMenuMissingError} from './menu-errors';
 import {MatMenuItem} from './menu-item';
 import {MatMenuPanel} from './menu-panel';
 import {MenuPositionX, MenuPositionY} from './menu-positions';
+import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 
 /** Injection token that determines the scroll handling while the menu is open. */
 export const MAT_MENU_SCROLL_STRATEGY =
@@ -130,7 +131,9 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
               @Inject(MAT_MENU_SCROLL_STRATEGY) private _scrollStrategy,
               @Optional() private _parentMenu: MatMenu,
               @Optional() @Self() private _menuItemInstance: MatMenuItem,
-              @Optional() private _dir: Directionality) {
+              @Optional() private _dir: Directionality,
+              // TODO(crisbeto): make the _focusMonitor required when doing breaking changes.
+              private _focusMonitor?: FocusMonitor) {
 
     if (_menuItemInstance) {
       _menuItemInstance._triggersSubmenu = this.triggersSubmenu();
@@ -208,8 +211,12 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
   }
 
   /** Focuses the menu trigger. */
-  focus() {
-    this._element.nativeElement.focus();
+  focus(origin: FocusOrigin = 'program') {
+    if (this._focusMonitor) {
+      this._focusMonitor.focusVia(this._element.nativeElement, origin);
+    } else {
+      this._element.nativeElement.focus();
+    }
   }
 
   /** Closes the menu and does the necessary cleanup. */
@@ -274,8 +281,10 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     // We should reset focus if the user is navigating using a keyboard or
     // if we have a top-level trigger which might cause focus to be lost
     // when clicking on the backdrop.
-    if (!this._openedByMouse || !this.triggersSubmenu()) {
+    if (!this._openedByMouse) {
       this.focus();
+    } else if (!this.triggersSubmenu()) {
+      this.focus('mouse');
     }
 
     this._openedByMouse = false;

src/lib/menu/menu.spec.ts

@@ -37,6 +37,7 @@ import {
 } from '@angular/cdk/testing';
 import {Subject} from 'rxjs/Subject';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
+import {FocusMonitor} from '@angular/cdk/a11y';
 
 
 describe('MatMenu', () => {
@@ -105,42 +106,53 @@ describe('MatMenu', () => {
     expect(overlayContainerElement.textContent).toBe('');
   }));
 
-  it('should restore focus to the trigger when the menu was opened by keyboard', fakeAsync(() => {
-    const fixture = TestBed.createComponent(SimpleMenu);
-    fixture.detectChanges();
+  it('should restore focus to the trigger when the menu was opened by keyboard',
+    fakeAsync(inject([FocusMonitor], (focusMonitor: FocusMonitor) => {
+      const fixture = TestBed.createComponent(SimpleMenu);
+      fixture.detectChanges();
 
-    const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
+      const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
 
-    // A click without a mousedown before it is considered a keyboard open.
-    triggerEl.click();
-    fixture.detectChanges();
+      // A click without a mousedown before it is considered a keyboard open.
+      focusMonitor.monitor(triggerEl, false);
+      triggerEl.click();
+      fixture.detectChanges();
 
-    expect(overlayContainerElement.querySelector('.mat-menu-panel')).toBeTruthy();
+      expect(overlayContainerElement.querySelector('.mat-menu-panel')).toBeTruthy();
 
-    fixture.componentInstance.trigger.closeMenu();
-    fixture.detectChanges();
-    tick(500);
+      fixture.componentInstance.trigger.closeMenu();
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
 
-    expect(document.activeElement).toBe(triggerEl);
-  }));
+      expect(document.activeElement).toBe(triggerEl);
+      expect(triggerEl.classList).toContain('cdk-program-focused');
+      focusMonitor.stopMonitoring(triggerEl);
+    })));
 
-  it('should restore focus to the root trigger when the menu was opened by mouse', fakeAsync(() => {
-    const fixture = TestBed.createComponent(SimpleMenu);
-    fixture.detectChanges();
+  it('should restore focus to the root trigger when the menu was opened by mouse',
+    fakeAsync(inject([FocusMonitor], (focusMonitor: FocusMonitor) => {
+      const fixture = TestBed.createComponent(SimpleMenu);
+      fixture.detectChanges();
 
-    const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
-    dispatchFakeEvent(triggerEl, 'mousedown');
-    triggerEl.click();
-    fixture.detectChanges();
+      const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
 
-    expect(overlayContainerElement.querySelector('.mat-menu-panel')).toBeTruthy();
+      dispatchFakeEvent(triggerEl, 'mousedown');
+      triggerEl.click();
+      fixture.detectChanges();
 
-    fixture.componentInstance.trigger.closeMenu();
-    fixture.detectChanges();
-    tick(500);
+      expect(overlayContainerElement.querySelector('.mat-menu-panel')).toBeTruthy();
 
-    expect(document.activeElement).toBe(triggerEl);
-  }));
+      focusMonitor.monitor(triggerEl, false);
+      fixture.componentInstance.trigger.closeMenu();
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(triggerEl);
+      expect(triggerEl.classList).toContain('cdk-mouse-focused');
+      focusMonitor.stopMonitoring(triggerEl);
+    })));
 
   it('should close the menu when pressing ESCAPE', fakeAsync(() => {
     const fixture = TestBed.createComponent(SimpleMenu);