Add accessibility page

Author: tinayuangao

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

@@ -0,0 +1,35 @@
+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';
+import {ChipsAccessibilityDemo} from './chips/chips-a11y';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(ACCESSIBILITY_DEMO_ROUTES)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AccessibilityRoutingModule {}
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AccessibilityRoutingModule,
+    DemoMaterialModule,
+  ],
+  declarations: [
+    AccessibilityDemo,
+    AccessibilityHome,
+    ButtonAccessibilityDemo,
+    CheckboxAccessibilityDemo,
+    ChipsAccessibilityDemo,
+  ]
+})
+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,24 @@
+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'},
+    {name: 'Chips', route: 'chips'},
+  ];
+}

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,54 @@
+<section>
+  <h2>Basic chips</h2>
+  <md-chip-list>
+    <md-chip>Chip 1</md-chip>
+    <md-chip>Chip 2</md-chip>
+    <md-chip>Chip 3</md-chip>
+  </md-chip-list>
+
+</section>
+
+<section>
+  <h2>Unstyled chips</h2>
+
+  <md-chip-list>
+    <md-basic-chip>Basic Chip 1</md-basic-chip>
+    <md-basic-chip>Basic Chip 2</md-basic-chip>
+    <md-basic-chip>Basic Chip 3</md-basic-chip>
+  </md-chip-list>
+</section>
+
+<section>
+  <h2>Removable chips in input container</h2>
+
+  <md-input-container>
+    <md-chip-list mdPrefix #chipList>
+      <md-chip *ngFor="let person of people" [color]="color">
+        {{person.name}}
+      </md-chip>
+    </md-chip-list>
+    <input mdInput placeholder="New Contributor..."
+           [mdChipInputFor]="chipList"
+           [mdChipInputAddOnBlur]="addOnBlur"
+           (mdChipInputTokenEnd)="add($event)" />
+  </md-input-container>
+</section>
+
+<section>
+  <h2>Colored chips</h2>
+  <md-chip-list>
+    <md-chip color="primary" selected="true">Primary</md-chip>
+    <md-chip color="accent" selected="true">Accent</md-chip>
+    <md-chip color="warn" selected="true">Warn</md-chip>
+  </md-chip-list>
+</section>
+
+
+<section>
+  <h2>Stacked chips</h2>
+  <md-chip-list class="mat-chip-list-stacked">
+    <md-chip [selectable]="false">Stacked chip 1</md-chip>
+    <md-chip [selectable]="false">Stacked chip 2</md-chip>
+    <md-chip [selectable]="false">Stacked chip 3</md-chip>
+  </md-chip-list>
+</section>

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

@@ -0,0 +1,70 @@
+import {Component} from '@angular/core';
+import {MdChipInputEvent} from '@angular/material';
+
+
+interface Person {
+  name: string;
+}
+
+@Component({
+  moduleId: module.id,
+  selector: 'chips-a11y',
+  templateUrl: 'chips-a11y.html',
+  styleUrls: ['chips-a11y.css'],
+})
+export class ChipsAccessibilityDemo {
+  visible: boolean = true;
+  color: string = '';
+  selectable: boolean = true;
+  removable: boolean = true;
+  addOnBlur: boolean = true;
+  message: string = '';
+
+  people: Person[] = [
+    { name: 'Kara' },
+    { name: 'Jeremy' },
+    { name: 'Topher' },
+    { name: 'Elad' },
+    { name: 'Kristiyan' },
+    { name: 'Paul' }
+  ];
+
+  displayMessage(message: string): void {
+    this.message = message;
+  }
+
+  add(event: MdChipInputEvent): void {
+    let input = event.input;
+    let value = event.value;
+
+    // Add our person
+    if ((value || '').trim()) {
+      this.people.push({ name: value.trim() });
+    }
+
+    // Reset the input value
+    if (input) {
+      input.value = '';
+    }
+  }
+
+  remove(person: Person): void {
+    let index = this.people.indexOf(person);
+
+    if (index >= 0) {
+      this.people.splice(index, 1);
+    }
+  }
+
+  toggleVisible(): void {
+    this.visible = false;
+  }
+
+
+  availableColors = [
+    { name: 'none', color: '' },
+    { name: 'Primary', color: 'primary' },
+    { name: 'Accent', color: 'accent' },
+    { name: 'Warn', color: 'warn' }
+  ];
+}

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

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