demo(list): Add accessibility demo page for list

Author: tinayuangao

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

@@ -11,6 +11,7 @@ import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y'
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
+import {ListAccessibilityDemo} from './list/list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
@@ -46,6 +47,7 @@ export class AccessibilityRoutingModule {}
     DatepickerAccessibilityDemo,
     GridListAccessibilityDemo,
     InputAccessibilityDemo,
+    ListAccessibilityDemo,
     RadioAccessibilityDemo,
     SliderAccessibilityDemo,
   ]

src/demo-app/a11y/a11y.ts

@@ -25,6 +25,7 @@ export class AccessibilityDemo {
     {name: 'Datepicker', route: 'datepicker'},
     {name: 'Grid list', route: 'grid-list'},
     {name: 'Input', route: 'input'},
+    {name: 'List', route: 'list'},
     {name: 'Radio buttons', route: 'radio'},
     {name: 'Slider', route: 'slider'},
   ];

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

@@ -0,0 +1,63 @@
+<div class="demo-list">
+  <section>
+    <h2> Seasoning (Simple list) </h2>
+    <md-list>
+      <md-list-item *ngFor="let item of items"> {{item}} </md-list-item>
+    </md-list>
+  </section>
+
+
+  <section>
+    <h2>Mailbox navigation (Navigation list)</h2>
+    <md-nav-list>
+      <md-list-item *ngFor="let link of links">
+        <a md-line href="https://www.google.com/search?q={{link.name}}">{{ link.name }}</a>
+        <button md-icon-button aria-label="Show info" (click)="showInfo(link.name)">
+          <md-icon>info</md-icon>
+        </button>
+      </md-list-item>
+    </md-nav-list>
+    <div *ngIf="infoClicked">
+      More information about {{infoClicked}}!
+    </div>
+  </section>
+
+  <section>
+    <h2>Messages (Multi-line list)</h2>
+    <md-list>
+      <md-list-item *ngFor="let message of messages">
+        <img md-list-avatar [src]="message.image" [alt]="message.from">
+        <h3 md-line> {{message.from}} </h3>
+        <p md-line> {{message.subject}} </p>
+        <p md-line class="demo-secondary-text"> {{message.message}} </p>
+      </md-list-item>
+    </md-list>
+
+  </section>
+
+  <section>
+    <h2> Seasoning (Dense list)</h2>
+    <md-list dense>
+      <md-list-item *ngFor="let item of items"> {{item}} </md-list-item>
+    </md-list>
+  </section>
+
+  <section>
+    <h2>Folders and notes for mailbox (List with multiple sections)</h2>
+    <md-list>
+      <h3 md-subheader>Folders</h3>
+      <md-list-item *ngFor="let folder of folders">
+        <md-icon md-list-icon aria-label="Folder">folder</md-icon>
+        <h4 md-line>{{folder.name}}</h4>
+        <p md-line class="demo-secondary-text"> {{folder.updated}} </p>
+      </md-list-item>
+      <md-divider></md-divider>
+      <h3 md-subheader>Notes</h3>
+      <md-list-item *ngFor="let note of notes">
+        <md-icon md-list-icon aria-label="Note">note</md-icon>
+        <h4 md-line>{{note.name}}</h4>
+        <p md-line class="demo-secondary-text"> {{note.updated}} </p>
+      </md-list-item>
+    </md-list>
+  </section>
+</div>

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

@@ -0,0 +1,11 @@
+.demo-list {
+  .mat-list, .mat-nav-list {
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    max-width: 350px;
+    margin: 20px 20px 0 0;
+  }
+
+  .demo-secondary-text {
+    color: rgba(0, 0, 0, 0.54);
+  }
+}

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

@@ -0,0 +1,65 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'list-a11y',
+  templateUrl: 'list-a11y.html',
+  styleUrls: ['list-a11y.css']
+})
+export class ListAccessibilityDemo {
+  items: string[] = [
+    'Pepper',
+    'Salt',
+    'Paprika'
+  ];
+
+  infoClicked: string | undefined;
+
+  messages: any[] = [
+    {
+      from: 'Nancy',
+      subject: 'Brunch?',
+      message: 'Did you want to go on Sunday? I was thinking that might work.',
+      image: 'https://angular.io/generated/images/bios/julie-ralph.jpg'
+    },
+    {
+      from: 'Mary',
+      subject: 'Summer BBQ',
+      message: 'Wish I could come, but I have some prior obligations.',
+      image: 'https://angular.io/generated/images/bios/juleskremer.jpg'
+    },
+    {
+      from: 'Bobby',
+      subject: 'Oui oui',
+      message: 'Do you have Paris reservations for the 15th? I just booked!',
+      image: 'https://angular.io/generated/images/bios/jelbourn.jpg'
+    }
+  ];
+
+  links: any[] = [
+    {name: 'Inbox'},
+    {name: 'Outbox'},
+    {name: 'Spam'},
+    {name: 'Trash'}
+
+  ];
+
+  folders: any[] = [
+    {name: 'Imported', updated: 'Miles'},
+    {name: 'Important', updated: 'Tina'},
+    {name: 'Unread', updated: 'Jeremy'},
+  ];
+
+  notes: any[] = [
+    {name: 'Update screenshots', updated: 'Kara'},
+    {name: 'Install new application', updated: 'Andrew'},
+  ];
+
+  showInfo(name: string) {
+    if (this.infoClicked === name) {
+      this.infoClicked = undefined;
+    } else {
+      this.infoClicked = name;
+    }
+  }
+}

src/demo-app/a11y/routes.ts

@@ -9,6 +9,7 @@ import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
+import {ListAccessibilityDemo} from './list/list-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
@@ -21,6 +22,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'datepicker', component: DatepickerAccessibilityDemo},
   {path: 'grid-list', component: GridListAccessibilityDemo},
   {path: 'input', component: InputAccessibilityDemo},
+  {path: 'list', component: ListAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
   {path: 'slider', component: SliderAccessibilityDemo},
 ];