Add accessibility page to demo-app (#5748)

* Add accessibility page

* fix lint

Author: tinayuangao

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

@@ -0,0 +1,33 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import {ACCESSIBILITY_DEMO_ROUTES} from './routes';
+import {DemoMaterialModule} from '../demo-material-module';
+import {AccessibilityHome, AccessibilityDemo} from './a11y';
+import {ButtonAccessibilityDemo} from './button/button-a11y';
+import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(ACCESSIBILITY_DEMO_ROUTES)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AccessibilityRoutingModule {}
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AccessibilityRoutingModule,
+    DemoMaterialModule,
+  ],
+  declarations: [
+    AccessibilityDemo,
+    AccessibilityHome,
+    ButtonAccessibilityDemo,
+    CheckboxAccessibilityDemo,
+  ]
+})
+export class AccessibilityDemoModule {}

src/demo-app/a11y/a11y.html

@@ -0,0 +1,9 @@
+<h1>Accessibility Demo</h1>
+
+<nav>
+  <a *ngFor="let navItem of navItems" [routerLink]="[navItem.route]">
+    {{navItem.name}}
+  </a>
+</nav>
+
+<router-outlet></router-outlet>

src/demo-app/a11y/a11y.scss

@@ -0,0 +1,22 @@
+body {
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+
+  // Helps fonts on OSX looks more consistent with other systems
+  // Isn't currently in button styles due to performance concerns
+  * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  ul, li {
+    list-style: none;
+  }
+
+  nav a {
+    margin: 2px;
+  }
+}

src/demo-app/a11y/a11y.ts

@@ -0,0 +1,23 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'accessibility-home',
+  template: `<p>Welcome to the accessibility demos for Angular Material!</p>`,
+})
+export class AccessibilityHome {}
+
+@Component({
+  moduleId: module.id,
+  selector: 'accessibility-demo',
+  templateUrl: 'a11y.html',
+  styleUrls: ['a11y.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class AccessibilityDemo {
+  navItems = [
+    {name: 'Home', route: '.'},
+    {name: 'Button', route: 'button'},
+    {name: 'Checkbox', route: 'checkbox'},
+  ];
+}

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

@@ -0,0 +1,31 @@
+<div class="demo-button">
+  <section>
+    <h2>Button elements</h2>
+    <button md-button>Check</button>
+    <button md-raised-button>raised</button>
+    <button md-fab aria-label="Activate floating action style button">
+      <md-icon class="md-24">check</md-icon>
+    </button>
+    <button md-mini-fab aria-label="Activate mini floating action style button">
+      <md-icon class="md-24">check</md-icon>
+    </button>
+    <button md-icon-button aria-label="Activate icon style button">
+      <md-icon class="md-24">check</md-icon>
+    </button>
+  </section>
+
+  <section>
+    <h2>Anchor elements</h2>
+    <a href="http://www.google.com" md-button color="primary">Google search</a>
+    <a href="http://www.google.com" md-raised-button>Google search</a>
+    <a href="http://www.google.com" md-fab aria-label="Activate floating action style link">
+      <md-icon class="md-24">check</md-icon>
+    </a>
+    <a href="http://www.google.com" md-mini-fab aria-label="Activate mini floating action style link">
+      <md-icon class="md-24">check</md-icon>
+    </a>
+    <a md-icon-button aria-label="Activate icon style link">
+      <md-icon class="md-24">check</md-icon>
+    </a>
+  </section>
+</div>

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

@@ -0,0 +1,18 @@
+
+.demo-button {
+  button, a {
+    margin: 8px;
+    text-transform: uppercase;
+  }
+
+  section {
+    display: flex;
+    align-items: center;
+    margin: 8px;
+  }
+
+  p {
+    padding: 5px 15px;
+  }
+}
+

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

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'button-a11y',
+  templateUrl: 'button-a11y.html',
+  styleUrls: ['button-a11y.css'],
+})
+export class ButtonAccessibilityDemo {
+  // TODO(tinayuangao): Add use cases
+}

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

@@ -0,0 +1 @@
+Checkbox Placeholder

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

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'checkbox-a11y',
+  templateUrl: 'checkbox-a11y.html',
+  styleUrls: ['checkbox-a11y.css'],
+})
+export class CheckboxAccessibilityDemo {
+  // TODO(tinayuangao): Add use cases
+}

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

@@ -0,0 +1,10 @@
+import {Routes} from '@angular/router';
+import {ButtonAccessibilityDemo} from './button/button-a11y';
+import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
+import {AccessibilityHome} from './a11y';
+
+export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
+  {path: '', component: AccessibilityHome},
+  {path: 'button', component: ButtonAccessibilityDemo},
+  {path: 'checkbox', component: CheckboxAccessibilityDemo},
+];