From 2239668a3a068ac94f9bb9f9f809c369c4a8e4e3 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 23 Jun 2017 00:37:08 +0200
Subject: [PATCH] fix(menu): role being set on the wrong element (#5191)

Currently, the `menu` role is set on the `md-menu` directive, however the it is inert and won't get rendered inside the overlay. These changes remove the `menu` role from the inert element and set it on the element that will get rendered inside the overlay.
---
 src/lib/menu/menu-directive.ts |  1 -
 src/lib/menu/menu.html         |  3 +--
 src/lib/menu/menu.spec.ts      | 12 ++++++++++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts
index e8e674e6beb4..52222e503d19 100644
--- a/src/lib/menu/menu-directive.ts
+++ b/src/lib/menu/menu-directive.ts
@@ -33,7 +33,6 @@ import {ESCAPE} from '../core/keyboard/keycodes';
 @Component({
   moduleId: module.id,
   selector: 'md-menu, mat-menu',
-  host: {'role': 'menu'},
   templateUrl: 'menu.html',
   styleUrls: ['menu.css'],
   encapsulation: ViewEncapsulation.None,
diff --git a/src/lib/menu/menu.html b/src/lib/menu/menu.html
index 10972059e8c5..a4f41ded140b 100644
--- a/src/lib/menu/menu.html
+++ b/src/lib/menu/menu.html
@@ -1,9 +1,8 @@
 <ng-template>
   <div class="mat-menu-panel" [ngClass]="_classList" (keydown)="_handleKeydown($event)"
-    (click)="_emitCloseEvent()" [@transformMenu]="'showing'">
+    (click)="_emitCloseEvent()" [@transformMenu]="'showing'" role="menu">
     <div class="mat-menu-content" [@fadeInItems]="'showing'">
       <ng-content></ng-content>
     </div>
   </div>
 </ng-template>
-
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index ba0bdd194791..ab4d0a66b230 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -132,6 +132,18 @@ describe('MdMenu', () => {
     expect(panel.classList).toContain('custom-two');
   });
 
+  it('should set the "menu" role on the overlay panel', () => {
+    const fixture = TestBed.createComponent(SimpleMenu);
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+
+    const menuPanel = overlayContainerElement.querySelector('.mat-menu-panel');
+
+    expect(menuPanel).toBeTruthy('Expected to find a menu panel.');
+    expect(menuPanel.getAttribute('role')).toBe('menu', 'Expected panel to have the "menu" role.');
+  });
+
   describe('positions', () => {
     let fixture: ComponentFixture<PositionedMenu>;
     let panel: HTMLElement;