#9 Accessibility improvements

This commit is contained in:
Denys Vuika
2016-05-09 13:31:39 +01:00
parent 7494130a00
commit ed7c9d39d0
8 changed files with 43 additions and 7 deletions

View File

@@ -19,6 +19,10 @@ import { ContentColumnList } from './content-column-list';
export declare class ContentColumn implements OnInit {
private list;
title: string;
/**
* Title to be used for screen readers.
*/
srTitle: string;
source: string;
cssClass: string;
constructor(list: ContentColumnList);

View File

@@ -48,14 +48,22 @@ System.register(['angular2/core', './content-column-list', './../models/content-
ContentColumn.prototype.ngOnInit = function () {
var model = new content_column_model_1.ContentColumnModel();
model.title = this.title;
model.srTitle = this.srTitle;
model.source = this.source;
model.cssClass = this.cssClass;
if (!model.srTitle && model.source === '$thumbnail') {
model.srTitle = 'Thumbnail';
}
this.list.registerColumn(model);
};
__decorate([
core_1.Input(),
__metadata('design:type', String)
], ContentColumn.prototype, "title", void 0);
__decorate([
core_1.Input('sr-title'),
__metadata('design:type', String)
], ContentColumn.prototype, "srTitle", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', String)

View File

@@ -1 +1 @@
{"version":3,"file":"content-column.js","sourceRoot":"","sources":["content-column.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;;;;;;;;;;;;;;;;YAUH;gBAKI,uBACY,IAAuB;oBAAvB,SAAI,GAAJ,IAAI,CAAmB;oBAL1B,UAAK,GAAW,EAAE,CAAC;gBAM5B,CAAC;gBAED,gCAAQ,GAAR;oBACI,IAAI,KAAK,GAAG,IAAI,yCAAkB,EAAE,CAAC;oBACrC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;oBACzB,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;oBAC3B,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;oBAE/B,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC;gBAfD;oBAAC,YAAK,EAAE;;4DAAA;gBACR;oBAAC,YAAK,EAAE;;6DAAA;gBACR;oBAAC,YAAK,CAAC,OAAO,CAAC;;+DAAA;gBAPnB;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,gBAAgB;wBAC1B,QAAQ,EAAE,EAAE;qBACf,CAAC;;iCAAA;gBAkBF,oBAAC;YAAD,CAAC,AAjBD,IAiBC;YAjBD,yCAiBC,CAAA"}
{"version":3,"file":"content-column.js","sourceRoot":"","sources":["content-column.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;;;;;;;;;;;;;;;;YAUH;gBAiBI,uBACY,IAAuB;oBAAvB,SAAI,GAAJ,IAAI,CAAmB;oBAfnC,UAAK,GAAW,EAAE,CAAC;gBAgBnB,CAAC;gBAED,gCAAQ,GAAR;oBACI,IAAI,KAAK,GAAG,IAAI,yCAAkB,EAAE,CAAC;oBACrC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;oBACzB,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;oBAC7B,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;oBAC3B,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;oBAE/B,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC;wBAClD,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC;oBAChC,CAAC;oBAED,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC;gBA/BD;oBAAC,YAAK,EAAE;;4DAAA;gBAMR;oBAAC,YAAK,CAAC,UAAU,CAAC;;8DAAA;gBAGlB;oBAAC,YAAK,EAAE;;6DAAA;gBAGR;oBAAC,YAAK,CAAC,OAAO,CAAC;;+DAAA;gBAlBnB;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,gBAAgB;wBAC1B,QAAQ,EAAE,EAAE;qBACf,CAAC;;iCAAA;gBAmCF,oBAAC;YAAD,CAAC,AAlCD,IAkCC;YAlCD,yCAkCC,CAAA"}

View File

@@ -24,9 +24,21 @@ import {ContentColumnModel} from './../models/content-column.model';
template: ''
})
export class ContentColumn implements OnInit {
@Input() title: string = '';
@Input() source: string;
@Input('class') cssClass: string;
@Input()
title: string = '';
/**
* Title to be used for screen readers.
*/
@Input('sr-title')
srTitle: string;
@Input()
source: string;
@Input('class')
cssClass: string;
constructor(
private list: ContentColumnList) {
@@ -35,9 +47,14 @@ export class ContentColumn implements OnInit {
ngOnInit() {
let model = new ContentColumnModel();
model.title = this.title;
model.srTitle = this.srTitle;
model.source = this.source;
model.cssClass = this.cssClass;
if (!model.srTitle && model.source === '$thumbnail') {
model.srTitle = 'Thumbnail';
}
this.list.registerColumn(model);
}
}

View File

@@ -8,9 +8,14 @@
<thead>
<tr>
<!-- Columns -->
<th class="mdl-data-table__cell--non-numeric {{col.cssClass}}" *ngFor="#col of columns">{{col.title}}</th>
<th class="mdl-data-table__cell--non-numeric {{col.cssClass}}" *ngFor="#col of columns">
<span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span>
<span *ngIf="col.title">{{col.title}}</span>
</th>
<!-- Actions -->
<th></th>
<th>
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody>

View File

@@ -16,6 +16,7 @@
*/
export declare class ContentColumnModel {
title: string;
srTitle: string;
source: string;
cssClass: string;
}

View File

@@ -1 +1 @@
{"version":3,"file":"content-column.model.js","sourceRoot":"","sources":["content-column.model.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;YAEH;gBAAA;gBAIA,CAAC;gBAAD,yBAAC;YAAD,CAAC,AAJD,IAIC;YAJD,mDAIC,CAAA"}
{"version":3,"file":"content-column.model.js","sourceRoot":"","sources":["content-column.model.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;YAEH;gBAAA;gBAKA,CAAC;gBAAD,yBAAC;YAAD,CAAC,AALD,IAKC;YALD,mDAKC,CAAA"}

View File

@@ -17,6 +17,7 @@
export class ContentColumnModel {
title: string;
srTitle: string;
source: string;
cssClass: string;
}