diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts index 09449163af0..fec683d71a0 100644 --- a/src/demo-app/a11y/a11y-module.ts +++ b/src/demo-app/a11y/a11y-module.ts @@ -22,6 +22,7 @@ import { import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y'; import {RadioAccessibilityDemo} from './radio/radio-a11y'; +import {ToolbarAccessibilityDemo} from './toolbar/toolbar-a11y'; import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y'; import {IconAccessibilityDemo} from './icon/icon-a11y'; import {InputAccessibilityDemo} from './input/input-a11y'; @@ -73,6 +74,7 @@ export class AccessibilityRoutingModule {} MenuAccessibilityDemo, ProgressSpinnerAccessibilityDemo, RadioAccessibilityDemo, + ToolbarAccessibilityDemo, SliderAccessibilityDemo, SlideToggleAccessibilityDemo, SnackBarAccessibilityDemo, diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts index 50358fbd50e..22c8916bebd 100644 --- a/src/demo-app/a11y/a11y.ts +++ b/src/demo-app/a11y/a11y.ts @@ -35,5 +35,6 @@ export class AccessibilityDemo { {name: 'Slide toggle', route: 'slide-toggle'}, {name: 'Snack bar', route: 'snack-bar'}, {name: 'Select', route: 'select'}, + {name: 'Toolbar', route: 'toolbar'}, ]; } diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts index ddf68e511d0..1d40d0cca55 100644 --- a/src/demo-app/a11y/routes.ts +++ b/src/demo-app/a11y/routes.ts @@ -9,6 +9,7 @@ import {DialogAccessibilityDemo} from './dialog/dialog-a11y'; import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y'; import {RadioAccessibilityDemo} from './radio/radio-a11y'; import {AccessibilityHome} from './a11y'; +import {ToolbarAccessibilityDemo} from './toolbar/toolbar-a11y'; import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y'; import {IconAccessibilityDemo} from './icon/icon-a11y'; import {InputAccessibilityDemo} from './input/input-a11y'; @@ -39,4 +40,5 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [ {path: 'slide-toggle', component: SlideToggleAccessibilityDemo}, {path: 'snack-bar', component: SnackBarAccessibilityDemo}, {path: 'select', component: SelectAccessibilityDemo}, + {path: 'toolbar', component: ToolbarAccessibilityDemo}, ]; diff --git a/src/demo-app/a11y/toolbar/toolbar-a11y.html b/src/demo-app/a11y/toolbar/toolbar-a11y.html new file mode 100644 index 00000000000..d50e35d6ccc --- /dev/null +++ b/src/demo-app/a11y/toolbar/toolbar-a11y.html @@ -0,0 +1,40 @@ +
diff --git a/src/demo-app/a11y/toolbar/toolbar-a11y.scss b/src/demo-app/a11y/toolbar/toolbar-a11y.scss new file mode 100644 index 00000000000..e95f8bc2c6d --- /dev/null +++ b/src/demo-app/a11y/toolbar/toolbar-a11y.scss @@ -0,0 +1,20 @@ +.demo-button { + button, a { + margin: 8px; + text-transform: uppercase; + } + + section { + display: flex; + align-items: center; + margin: 8px; + } + + p { + padding: 5px 15px; + } +} + +.example-spacer { + flex: 1 1 auto; +} diff --git a/src/demo-app/a11y/toolbar/toolbar-a11y.ts b/src/demo-app/a11y/toolbar/toolbar-a11y.ts new file mode 100644 index 00000000000..d4d213974f1 --- /dev/null +++ b/src/demo-app/a11y/toolbar/toolbar-a11y.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + + +@Component({ + moduleId: module.id, + selector: 'toolbar-a11y', + templateUrl: 'toolbar-a11y.html', + styleUrls: ['toolbar-a11y.css'], +}) +export class ToolbarAccessibilityDemo { +}