From 8a23157dc3f3be53afa01fe5af5bf214a6c13a2e Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Tue, 1 Aug 2017 15:12:52 -0700
Subject: [PATCH] a11y(grid-list): Add grid list to accessibility demo page
 (#6091)

* real world example

* remove roles

* 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

.

* change header and add roles
---
 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 | 36 ++++++++++++++++
 src/demo-app/a11y/routes.ts                   |  2 +
 src/lib/grid-list/grid-list.ts                |  1 -
 src/lib/grid-list/grid-tile.ts                |  1 -
 8 files changed, 83 insertions(+), 2 deletions(-)
 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 396ef39b10d..9d4bc213f48 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 6b97c2b84dc..85cbd8805b8 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 00000000000..0316771a2c5
--- /dev/null
+++ b/src/demo-app/a11y/grid-list/grid-list-a11y.html
@@ -0,0 +1,42 @@
+<section>
+  <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" role="listitem">
+      {{tile.text}}
+    </md-grid-tile>
+  </md-grid-list>
+</section>
+
+<section>
+  <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>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" role="listitem" [style.background]="'#F1EBBA'">
+      {{tile.text}}
+    </md-grid-tile>
+  </md-grid-list>
+</section>
+
+<section>
+  <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">
+      <md-grid-tile-footer>
+        <span md-line>Human: {{dog.human}}</span>
+      </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 00000000000..e69de29bb2d
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 00000000000..033c3b20710
--- /dev/null
+++ b/src/demo-app/a11y/grid-list/grid-list-a11y.ts
@@ -0,0 +1,36 @@
+import {Component} from '@angular/core';
+
+export 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: '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;
+  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 0e9e877fb66..862425d3927 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},
 ];
diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts
index 4a40b27e3cc..99adc8ff407 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 2f969be9a98..77b24e64b1b 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',