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

@@ -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,

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>
-

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;