diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts index 0d05281f0e0..22c4e55b30e 100644 --- a/src/demo-app/a11y/a11y-module.ts +++ b/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, diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts index 7d63ede8bbe..becf1f9657a 100644 --- a/src/demo-app/a11y/a11y.ts +++ b/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'}, diff --git a/src/demo-app/a11y/menu/menu-a11y.html b/src/demo-app/a11y/menu/menu-a11y.html new file mode 100644 index 00000000000..250143c1a87 --- /dev/null +++ b/src/demo-app/a11y/menu/menu-a11y.html @@ -0,0 +1,53 @@ +
+ +
+

Icon Trigger

+ + + + + + +
+ +
+

Menu with Icons

+ + + + + + + +
+ +
+

Menu with links

+ + + + + Angular + + + Angular Material + + +
+ +
diff --git a/src/demo-app/a11y/menu/menu-a11y.scss b/src/demo-app/a11y/menu/menu-a11y.scss new file mode 100644 index 00000000000..18b03c20bfd --- /dev/null +++ b/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; + } +} + diff --git a/src/demo-app/a11y/menu/menu-a11y.ts b/src/demo-app/a11y/menu/menu-a11y.ts new file mode 100644 index 00000000000..2d7c5d900ec --- /dev/null +++ b/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 { +} diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts index 24215c7fdd3..20fcbdf3d34 100644 --- a/src/demo-app/a11y/routes.ts +++ b/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},