demo(menu): add menu a11y demo (#6445)

Author: amcdnl

src/demo-app/a11y/a11y-module.ts

@@ -15,6 +15,7 @@ import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {IconAccessibilityDemo} from './icon/icon-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
+import {MenuAccessibilityDemo} from './menu/menu-a11y';
 import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
 import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
@@ -52,6 +53,7 @@ export class AccessibilityRoutingModule {}
     GridListAccessibilityDemo,
     IconAccessibilityDemo,
     InputAccessibilityDemo,
+    MenuAccessibilityDemo,
     ProgressSpinnerAccessibilityDemo,
     RadioAccessibilityDemo,
     SliderAccessibilityDemo,

src/demo-app/a11y/a11y.ts

@@ -26,6 +26,7 @@ export class AccessibilityDemo {
     {name: 'Grid list', route: 'grid-list'},
     {name: 'Icon', route: 'icon'},
     {name: 'Input', route: 'input'},
+    {name: 'Menu', route: 'menu'},
     {name: 'Progress spinner', route: 'progress-spinner'},
     {name: 'Radio buttons', route: 'radio'},
     {name: 'Slider', route: 'slider'},

src/demo-app/a11y/menu/menu-a11y.html

@@ -0,0 +1,53 @@
+<div class="demo-menu">
+  
+  <section>
+    <h2>Icon Trigger</h2>
+    <md-menu #menu1="mdMenu">
+      <button md-menu-item> Settings </button>
+      <button md-menu-item> Help </button>
+    </md-menu>
+
+    <button md-icon-button [mdMenuTriggerFor]="menu1" aria-label="Open Menu">
+      <md-icon>more_vert</md-icon>
+    </button>
+  </section>
+
+  <section>
+    <h2>Menu with Icons</h2>
+    <button md-icon-button [mdMenuTriggerFor]="menu2" aria-label="Open Menu">
+      <md-icon>more_vert</md-icon>
+    </button>
+
+    <md-menu #menu2="mdMenu">
+      <button md-menu-item>
+        <md-icon>dialpad</md-icon>
+        <span>Redial</span>
+      </button>
+      <button md-menu-item>
+        <md-icon>voicemail</md-icon>
+        <span>Check voicemail</span>
+      </button>
+      <button md-menu-item>
+        <md-icon>notifications_off</md-icon>
+        <span>Disable alerts</span>
+      </button>
+    </md-menu>
+  </section>
+
+  <section>
+    <h2>Menu with links</h2>
+    <button md-icon-button [mdMenuTriggerFor]="menu2" aria-label="Learn more about Angular">
+      <md-icon>more_vert</md-icon>
+    </button>
+    
+    <md-menu #menu2="mdMenu">
+      <a href="http://angular.io" md-menu-item>
+        Angular
+      </a>
+      <a href="http://material.angular.io" md-menu-item>
+        Angular Material
+      </a>
+    </md-menu>
+  </section>
+
+</div>

src/demo-app/a11y/menu/menu-a11y.scss

@@ -0,0 +1,12 @@
+.demo-menu {
+  section {
+    display: flex;
+    align-items: center;
+    margin: 8px;
+  }
+
+  p {
+    padding: 5px 15px;
+  }
+}
+

src/demo-app/a11y/menu/menu-a11y.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'menu-a11y',
+  templateUrl: 'menu-a11y.html',
+  styleUrls: ['menu-a11y.css'],
+})
+export class MenuAccessibilityDemo {
+}

src/demo-app/a11y/routes.ts

@@ -10,6 +10,7 @@ import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {IconAccessibilityDemo} from './icon/icon-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
+import {MenuAccessibilityDemo} from './menu/menu-a11y';
 import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
 import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
@@ -27,6 +28,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'grid-list', component: GridListAccessibilityDemo},
   {path: 'icon', component: IconAccessibilityDemo},
   {path: 'input', component: InputAccessibilityDemo},
+  {path: 'menu', component: MenuAccessibilityDemo},
   {path: 'progress-spinner', component: ProgressSpinnerAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
   {path: 'slider', component: SliderAccessibilityDemo},