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}} + Photo of {{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',