Add accessibility page

Author: tinayuangao

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

@@ -6,6 +6,7 @@ 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: [
@@ -28,6 +29,7 @@ export class AccessibilityRoutingModule {}
     AccessibilityHome,
     ButtonAccessibilityDemo,
     CheckboxAccessibilityDemo,
+    ChipsAccessibilityDemo,
   ]
 })
 export class AccessibilityDemoModule {}

src/demo-app/a11y/a11y.ts

@@ -19,5 +19,6 @@ export class AccessibilityDemo {
     {name: 'Home', route: '.'},
     {name: 'Button', route: 'button'},
     {name: 'Checkbox', route: 'checkbox'},
+    {name: 'Chips', route: 'chips'},
   ];
 }

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

@@ -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.scss

@@ -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.ts

@@ -1,10 +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},
 ];