From fbd08b68f23a361cb1a0d2b6c898cb6ea962911a Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Thu, 27 Jul 2017 18:52:12 +0200
Subject: [PATCH 1/4] feat: expose version object in releases (#4962)

* In releases there will be a constant called `VERSION` that holds the current version of the installed package (material or cdk)
* This is similar as for every @angular package like core, forms, compiler.

Add accessibility demo page for grid list

.
---
 src/demo-app/a11y/a11y-module.ts              |  2 +
 src/demo-app/a11y/a11y.ts                     |  1 +
 .../a11y/grid-list/grid-list-a11y.html        | 42 +++++++++++++++++++
 .../a11y/grid-list/grid-list-a11y.scss        |  0
 src/demo-app/a11y/grid-list/grid-list-a11y.ts | 35 ++++++++++++++++
 src/demo-app/a11y/routes.ts                   |  2 +
 6 files changed, 82 insertions(+)
 create mode 100644 src/demo-app/a11y/grid-list/grid-list-a11y.html
 create mode 100644 src/demo-app/a11y/grid-list/grid-list-a11y.scss
 create mode 100644 src/demo-app/a11y/grid-list/grid-list-a11y.ts

diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index 396ef39b10d6..9d4bc213f483 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/src/demo-app/a11y/a11y-module.ts
@@ -9,6 +9,7 @@ import {ButtonAccessibilityDemo} from './button/button-a11y';
 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 {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 
@@ -38,6 +39,7 @@ export class AccessibilityRoutingModule {}
     CheckboxAccessibilityDemo,
     ChipsAccessibilityDemo,
     DatepickerAccessibilityDemo,
+    GridListAccessibilityDemo,
     RadioAccessibilityDemo,
   ]
 })
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index 6b97c2b84dc6..85cbd8805b8a 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -22,6 +22,7 @@ export class AccessibilityDemo {
     {name: 'Checkbox', route: 'checkbox'},
     {name: 'Chips', route: 'chips'},
     {name: 'Datepicker', route: 'datepicker'},
+    {name: 'Grid list', route: 'grid-list'},
     {name: 'Radio buttons', route: 'radio'},
   ];
 }
diff --git a/src/demo-app/a11y/grid-list/grid-list-a11y.html b/src/demo-app/a11y/grid-list/grid-list-a11y.html
new file mode 100644
index 000000000000..4103c6937ef5
--- /dev/null
+++ b/src/demo-app/a11y/grid-list/grid-list-a11y.html
@@ -0,0 +1,42 @@
+<section>
+  <h2>Fixed-height grid list</h2>
+  <md-grid-list [cols]="fixedCols" [rowHeight]="fixedRowHeight">
+    <md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
+                  [style.background]="tile.color">
+      {{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'">
+      {{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"
+                [style.height]="fitListHeight">
+    <md-grid-tile *ngFor="let tile of tiles" [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">
+      <md-grid-tile-header>{{dog.name}}</md-grid-tile-header>
+      <img [alt]="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>
+</section>
diff --git a/src/demo-app/a11y/grid-list/grid-list-a11y.scss b/src/demo-app/a11y/grid-list/grid-list-a11y.scss
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/demo-app/a11y/grid-list/grid-list-a11y.ts b/src/demo-app/a11y/grid-list/grid-list-a11y.ts
new file mode 100644
index 000000000000..442a28a3324a
--- /dev/null
+++ b/src/demo-app/a11y/grid-list/grid-list-a11y.ts
@@ -0,0 +1,35 @@
+import {Component} from '@angular/core';
+
+interface Dog {
+  name: string;
+  human: string;
+}
+@Component({
+  moduleId: module.id,
+  selector: 'grid-list-a11y',
+  templateUrl: 'grid-list-a11y.html',
+  styleUrls: ['grid-list-a11y.css'],
+})
+export class GridListAccessibilityDemo {
+  dogs: Dog[] = [
+    { name: 'Porter', human: 'Kara' },
+    { name: 'Mal', human: 'Jeremy' },
+    { name: 'Koby', human: 'Igor' },
+    { name: 'Razzle', human: 'Ward' },
+    { name: 'Molly', human: 'Rob' },
+    { name: 'Husi', human: 'Matias' },
+  ];
+
+  tiles = [
+    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
+    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
+    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
+    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
+  ];
+
+  fixedCols = 4;
+  fixedRowHeight = 100;
+  ratioGutter = 1;
+  fitListHeight = '400px';
+  ratio = '4:1';
+}
diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts
index 0e9e877fb668..862425d39276 100644
--- a/src/demo-app/a11y/routes.ts
+++ b/src/demo-app/a11y/routes.ts
@@ -3,6 +3,7 @@ import {ButtonAccessibilityDemo} from './button/button-a11y';
 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 {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
@@ -14,5 +15,6 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'checkbox', component: CheckboxAccessibilityDemo},
   {path: 'chips', component: ChipsAccessibilityDemo},
   {path: 'datepicker', component: DatepickerAccessibilityDemo},
+  {path: 'grid-list', component: GridListAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
 ];

From 7dee14d347f7509faede4cf1e0579ab98f55b327 Mon Sep 17 00:00:00 2001
From: Yuan Gao <tinagao@google.com>
Date: Thu, 27 Jul 2017 16:37:43 -0700
Subject: [PATCH 2/4] real world example

---
 src/demo-app/a11y/grid-list/grid-list-a11y.html | 2 +-
 src/demo-app/a11y/grid-list/grid-list-a11y.ts   | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/a11y/grid-list/grid-list-a11y.html b/src/demo-app/a11y/grid-list/grid-list-a11y.html
index 4103c6937ef5..bdc03a16cde7 100644
--- a/src/demo-app/a11y/grid-list/grid-list-a11y.html
+++ b/src/demo-app/a11y/grid-list/grid-list-a11y.html
@@ -32,7 +32,7 @@ <h2>Grid list with header and footer</h2>
   <md-grid-list cols="3" rowHeight="200px">
     <md-grid-tile *ngFor="let dog of dogs">
       <md-grid-tile-header>{{dog.name}}</md-grid-tile-header>
-      <img [alt]="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>
diff --git a/src/demo-app/a11y/grid-list/grid-list-a11y.ts b/src/demo-app/a11y/grid-list/grid-list-a11y.ts
index 442a28a3324a..cecf26889077 100644
--- a/src/demo-app/a11y/grid-list/grid-list-a11y.ts
+++ b/src/demo-app/a11y/grid-list/grid-list-a11y.ts
@@ -21,10 +21,10 @@ export class GridListAccessibilityDemo {
   ];
 
   tiles = [
-    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
-    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
-    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
-    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
+    {text: 'Cappuccino', cols: 3, rows: 1, color: 'lightblue'},
+    {text: 'Mocha', cols: 1, rows: 2, color: 'lightgreen'},
+    {text: 'Latte', cols: 1, rows: 1, color: 'lightpink'},
+    {text: 'Iced coffee', cols: 2, rows: 1, color: '#DDBDF1'},
   ];
 
   fixedCols = 4;

From 7864677f9bb4b70b029b45e6639142df6a716f09 Mon Sep 17 00:00:00 2001
From: Yuan Gao <tinagao@google.com>
Date: Thu, 27 Jul 2017 17:44:50 -0700
Subject: [PATCH 3/4] remove roles

---
 src/lib/grid-list/grid-list.ts | 1 -
 src/lib/grid-list/grid-tile.ts | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts
index 4a40b27e3cc1..99adc8ff4078 100644
--- a/src/lib/grid-list/grid-list.ts
+++ b/src/lib/grid-list/grid-list.ts
@@ -41,7 +41,6 @@ const MD_FIT_MODE = 'fit';
   templateUrl: 'grid-list.html',
   styleUrls: ['grid-list.css'],
   host: {
-    'role': 'list',
     'class': 'mat-grid-list',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/lib/grid-list/grid-tile.ts b/src/lib/grid-list/grid-tile.ts
index 2f969be9a986..77b24e64b1bf 100644
--- a/src/lib/grid-list/grid-tile.ts
+++ b/src/lib/grid-list/grid-tile.ts
@@ -25,7 +25,6 @@ import {coerceToNumber} from './grid-list-measure';
   moduleId: module.id,
   selector: 'md-grid-tile, mat-grid-tile',
   host: {
-    'role': 'listitem',
     'class': 'mat-grid-tile',
   },
   templateUrl: 'grid-tile.html',

From 8dd8ba49030c08dc8142efdcfcb3f37854df4712 Mon Sep 17 00:00:00 2001
From: Yuan Gao <tinagao@google.com>
Date: Fri, 28 Jul 2017 10:41:01 -0700
Subject: [PATCH 4/4] change header and add roles

---
 .../a11y/grid-list/grid-list-a11y.html        | 28 +++++++++----------
 src/demo-app/a11y/grid-list/grid-list-a11y.ts |  3 +-
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/demo-app/a11y/grid-list/grid-list-a11y.html b/src/demo-app/a11y/grid-list/grid-list-a11y.html
index bdc03a16cde7..0316771a2c52 100644
--- a/src/demo-app/a11y/grid-list/grid-list-a11y.html
+++ b/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>
diff --git a/src/demo-app/a11y/grid-list/grid-list-a11y.ts b/src/demo-app/a11y/grid-list/grid-list-a11y.ts
index cecf26889077..033c3b207107 100644
--- a/src/demo-app/a11y/grid-list/grid-list-a11y.ts
+++ b/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',