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..0316771a2c52
--- /dev/null
+++ b/src/demo-app/a11y/grid-list/grid-list-a11y.html
@@ -0,0 +1,42 @@
+
+ Types of coffee (fix-height grid-list)
+
+
+ {{tile.text}}
+
+
+
+
+
+ Types of coffee (ratio-height grid list)
+
+
+ {{tile.text}}
+
+
+
+
+
+ Types of coffee (fit-height grid list)
+
+
+ {{tile.text}}
+
+
+
+
+
+ Angular team dogs (Grid list with header and footer)
+
+
+ {{dog.name}}
+
+
+ Human: {{dog.human}}
+
+
+
+
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..033c3b207107
--- /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 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},
];
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',