Skip to content

Commit 8a23157

Browse files
authored
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
1 parent 3a766f1 commit 8a23157

File tree

8 files changed

+83
-2
lines changed

8 files changed

+83
-2
lines changed

src/demo-app/a11y/a11y-module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {ButtonAccessibilityDemo} from './button/button-a11y';
99
import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
1010
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
1111
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
12+
import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
1213
import {RadioAccessibilityDemo} from './radio/radio-a11y';
1314
import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
1415

@@ -38,6 +39,7 @@ export class AccessibilityRoutingModule {}
3839
CheckboxAccessibilityDemo,
3940
ChipsAccessibilityDemo,
4041
DatepickerAccessibilityDemo,
42+
GridListAccessibilityDemo,
4143
RadioAccessibilityDemo,
4244
]
4345
})

src/demo-app/a11y/a11y.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export class AccessibilityDemo {
2222
{name: 'Checkbox', route: 'checkbox'},
2323
{name: 'Chips', route: 'chips'},
2424
{name: 'Datepicker', route: 'datepicker'},
25+
{name: 'Grid list', route: 'grid-list'},
2526
{name: 'Radio buttons', route: 'radio'},
2627
];
2728
}
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<section>
2+
<h2>Types of coffee (fix-height grid-list)</h2>
3+
<md-grid-list role="list" [cols]="fixedCols" [rowHeight]="fixedRowHeight">
4+
<md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
5+
[style.background]="tile.color" role="listitem">
6+
{{tile.text}}
7+
</md-grid-tile>
8+
</md-grid-list>
9+
</section>
10+
11+
<section>
12+
<h2>Types of coffee (ratio-height grid list)</h2>
13+
<md-grid-list role="list" cols="2" [rowHeight]="ratio" gutterSize="4px">
14+
<md-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'" role="listitem">
15+
{{tile.text}}
16+
</md-grid-tile>
17+
</md-grid-list>
18+
</section>
19+
20+
<section>
21+
<h2>Types of coffee (fit-height grid list)</h2>
22+
<md-grid-list role="list" cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
23+
[style.height]="fitListHeight">
24+
<md-grid-tile *ngFor="let tile of tiles" role="listitem" [style.background]="'#F1EBBA'">
25+
{{tile.text}}
26+
</md-grid-tile>
27+
</md-grid-list>
28+
</section>
29+
30+
<section>
31+
<h2>Angular team dogs (Grid list with header and footer)</h2>
32+
<md-grid-list role="list" cols="3" rowHeight="200px">
33+
<md-grid-tile *ngFor="let dog of dogs" role="listitem">
34+
<md-grid-tile-header>{{dog.name}}</md-grid-tile-header>
35+
<img alt="Photo of {{dog.name}}"
36+
src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
37+
<md-grid-tile-footer>
38+
<span md-line>Human: {{dog.human}}</span>
39+
</md-grid-tile-footer>
40+
</md-grid-tile>
41+
</md-grid-list>
42+
</section>

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

Whitespace-only changes.
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {Component} from '@angular/core';
2+
3+
export interface Dog {
4+
name: string;
5+
human: string;
6+
}
7+
8+
@Component({
9+
moduleId: module.id,
10+
selector: 'grid-list-a11y',
11+
templateUrl: 'grid-list-a11y.html',
12+
styleUrls: ['grid-list-a11y.css'],
13+
})
14+
export class GridListAccessibilityDemo {
15+
dogs: Dog[] = [
16+
{ name: 'Porter', human: 'Kara' },
17+
{ name: 'Mal', human: 'Jeremy' },
18+
{ name: 'Koby', human: 'Igor' },
19+
{ name: 'Razzle', human: 'Ward' },
20+
{ name: 'Molly', human: 'Rob' },
21+
{ name: 'Husi', human: 'Matias' },
22+
];
23+
24+
tiles = [
25+
{text: 'Cappuccino', cols: 3, rows: 1, color: 'lightblue'},
26+
{text: 'Mocha', cols: 1, rows: 2, color: 'lightgreen'},
27+
{text: 'Latte', cols: 1, rows: 1, color: 'lightpink'},
28+
{text: 'Iced coffee', cols: 2, rows: 1, color: '#DDBDF1'},
29+
];
30+
31+
fixedCols = 4;
32+
fixedRowHeight = 100;
33+
ratioGutter = 1;
34+
fitListHeight = '400px';
35+
ratio = '4:1';
36+
}

src/demo-app/a11y/routes.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {ButtonAccessibilityDemo} from './button/button-a11y';
33
import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
44
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
55
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
6+
import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
67
import {RadioAccessibilityDemo} from './radio/radio-a11y';
78
import {AccessibilityHome} from './a11y';
89
import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
@@ -14,5 +15,6 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
1415
{path: 'checkbox', component: CheckboxAccessibilityDemo},
1516
{path: 'chips', component: ChipsAccessibilityDemo},
1617
{path: 'datepicker', component: DatepickerAccessibilityDemo},
18+
{path: 'grid-list', component: GridListAccessibilityDemo},
1719
{path: 'radio', component: RadioAccessibilityDemo},
1820
];

src/lib/grid-list/grid-list.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ const MD_FIT_MODE = 'fit';
4141
templateUrl: 'grid-list.html',
4242
styleUrls: ['grid-list.css'],
4343
host: {
44-
'role': 'list',
4544
'class': 'mat-grid-list',
4645
},
4746
changeDetection: ChangeDetectionStrategy.OnPush,

src/lib/grid-list/grid-tile.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {coerceToNumber} from './grid-list-measure';
2525
moduleId: module.id,
2626
selector: 'md-grid-tile, mat-grid-tile',
2727
host: {
28-
'role': 'listitem',
2928
'class': 'mat-grid-tile',
3029
},
3130
templateUrl: 'grid-tile.html',

0 commit comments

Comments
 (0)