a11y(toolbar): add toolbar accessibility demo page (#6145)

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,

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'},
   ];
 }

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},
 ];

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

@@ -0,0 +1,40 @@
+<div class="demo-toolbar">
+  <section>
+    <h2>Basic Toolbar with Text  (e.g. Only display app’s name)</h2>
+    <md-toolbar role="heading">
+      <h1>My App</h1>
+    </md-toolbar>
+    <p>Hello World!</p>
+  </section>
+
+  <section>
+    <h2>Multiple Lines Toolbar</h2>
+    <md-toolbar>
+      <h1>Settings</h1>
+    </md-toolbar>
+    <md-toolbar>
+      <h1>Profile</h1>
+    </md-toolbar>
+    <p>My profile</p>
+  </section>
+
+  <section>
+    <h2>Toolbar with favorite icon</h2>
+    <md-toolbar>
+      <h1>My App</h1>
+      <span class="example-spacer"></span>
+      <button md-button>
+        <md-icon aria-label="favorite">favorite</md-icon>
+      </button>
+    </md-toolbar>
+    <p>Hello World!</p>
+  </section>
+
+  <section>
+    <h2>Toolbar colors</h2>
+    <md-toolbar color="primary">
+      <h1>My App</h1>
+    </md-toolbar>
+    <p>Hello World!</p>
+  </section>
+</div>

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;
+}

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 {
+}