change header and add roles

Author: tinayuangao

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

@@ -1,41 +1,41 @@
 <section>
-  <h2>Fixed-height grid list</h2>
-  <md-grid-list [cols]="fixedCols" [rowHeight]="fixedRowHeight">
+  <h2>Types of coffee (fix-height grid-list)</h2>
+  <md-grid-list role="list" [cols]="fixedCols" [rowHeight]="fixedRowHeight">
     <md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
-                  [style.background]="tile.color">
+                  [style.background]="tile.color" role="listitem">
       {{tile.text}}
     </md-grid-tile>
   </md-grid-list>
 </section>
 
 <section>
-  <h2>Ratio-height grid list</h2>
-  <md-grid-list cols="2" [rowHeight]="ratio" gutterSize="4px">
-    <md-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'">
+  <h2>Types of coffee (ratio-height grid list)</h2>
+  <md-grid-list role="list" cols="2" [rowHeight]="ratio" gutterSize="4px">
+    <md-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'" role="listitem">
       {{tile.text}}
     </md-grid-tile>
   </md-grid-list>
 </section>
 
 <section>
-  <h2>Fit-height grid list</h2>
-  <md-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
+  <h2>Types of coffee (fit-height grid list)</h2>
+  <md-grid-list role="list" cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
                 [style.height]="fitListHeight">
-    <md-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
+    <md-grid-tile *ngFor="let tile of tiles" role="listitem" [style.background]="'#F1EBBA'">
       {{tile.text}}
     </md-grid-tile>
   </md-grid-list>
 </section>
 
 <section>
-  <h2>Grid list with header and footer</h2>
-  <md-grid-list cols="3" rowHeight="200px">
-    <md-grid-tile *ngFor="let dog of dogs">
+  <h2>Angular team dogs (Grid list with header and footer)</h2>
+  <md-grid-list role="list" cols="3" rowHeight="200px">
+    <md-grid-tile *ngFor="let dog of dogs" role="listitem">
       <md-grid-tile-header>{{dog.name}}</md-grid-tile-header>
-      <img alt="Photo of {{dog.name}}" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
+      <img alt="Photo of {{dog.name}}"
+           src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
       <md-grid-tile-footer>
         <span md-line>Human: {{dog.human}}</span>
-        <md-icon>star_border</md-icon>
       </md-grid-tile-footer>
     </md-grid-tile>
   </md-grid-list>

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

@@ -1,9 +1,10 @@
 import {Component} from '@angular/core';
 
-interface Dog {
+export interface Dog {
   name: string;
   human: string;
 }
+
 @Component({
   moduleId: module.id,
   selector: 'grid-list-a11y',