a11y(chips): Add accessibility demo page for chips (#5947)

* Add accessibility page

* Use some real world examples for chips

* add aria-label

* Update chips-a11y.ts

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

@@ -7,6 +7,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';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 
 @NgModule({
@@ -34,6 +35,7 @@ export class AccessibilityRoutingModule {}
     AccessibilityHome,
     ButtonAccessibilityDemo,
     CheckboxAccessibilityDemo,
+    ChipsAccessibilityDemo,
     RadioAccessibilityDemo,
   ]
 })

src/demo-app/a11y/a11y.ts

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

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

@@ -0,0 +1,56 @@
+<section>
+  <h2>Basic chips</h2>
+  <md-chip-list>
+    <md-chip>Carnation</md-chip>
+    <md-chip>Irises</md-chip>
+    <md-chip>Buttercup</md-chip>
+  </md-chip-list>
+
+</section>
+
+<section>
+  <h2>Unstyled chips</h2>
+
+  <md-chip-list>
+    <md-basic-chip>Husky </md-basic-chip>
+    <md-basic-chip>Golden Retriever </md-basic-chip>
+    <md-basic-chip>Border Collie </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..."
+           aria-label="New contributor"
+           [mdChipInputFor]="chipList"
+           [mdChipInputAddOnBlur]="addOnBlur"
+           (mdChipInputTokenEnd)="add($event)" />
+  </md-input-container>
+</section>
+
+<section>
+  <h2>Colored chips</h2>
+  <p>This example is good for contrast-radio checking.</p>
+  <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">Lemon</md-chip>
+    <md-chip [selectable]="false">Lime</md-chip>
+    <md-chip [selectable]="false">Grapefruit</md-chip>
+  </md-chip-list>
+</section>

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

@@ -0,0 +1,70 @@
+import {Component} from '@angular/core';
+import {MdChipInputEvent} from '@angular/material';
+
+
+export 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/routes.ts

@@ -1,6 +1,7 @@
 import {Routes} from '@angular/router';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
+import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
 
@@ -8,5 +9,6 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
   {path: 'button', component: ButtonAccessibilityDemo},
   {path: 'checkbox', component: CheckboxAccessibilityDemo},
+  {path: 'chips', component: ChipsAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
 ];