Skip to content

Commit

Permalink
a11y(grid-list): Add grid list to accessibility demo page (#6091)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
tinayuangao authored Aug 1, 2017
1 parent 3a766f1 commit 8a23157
Show file tree
Hide file tree
Showing 8 changed files with 83 additions and 2 deletions.
2 changes: 2 additions & 0 deletions src/demo-app/a11y/a11y-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -38,6 +39,7 @@ export class AccessibilityRoutingModule {}
CheckboxAccessibilityDemo,
ChipsAccessibilityDemo,
DatepickerAccessibilityDemo,
GridListAccessibilityDemo,
RadioAccessibilityDemo,
]
})
Expand Down
1 change: 1 addition & 0 deletions src/demo-app/a11y/a11y.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
];
}
42 changes: 42 additions & 0 deletions src/demo-app/a11y/grid-list/grid-list-a11y.html
Original file line number Diff line number Diff line change
@@ -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>
Empty file.
36 changes: 36 additions & 0 deletions src/demo-app/a11y/grid-list/grid-list-a11y.ts
Original file line number Diff line number Diff line change
@@ -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';
}
2 changes: 2 additions & 0 deletions src/demo-app/a11y/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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},
];
1 change: 0 additions & 1 deletion src/lib/grid-list/grid-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 0 additions & 1 deletion src/lib/grid-list/grid-tile.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down

0 comments on commit 8a23157

Please sign in to comment.