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

Author: tinayuangao

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,
   ]
 })

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'},
   ];
 }

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>

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

@@ -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';
+}

src/demo-app/a11y/grid-list/grid-list-a11y.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},
 ];

src/demo-app/a11y/routes.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,

src/lib/grid-list/grid-list.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',