mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
#9 Accessibility improvements
This commit is contained in:
@@ -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);
|
||||
|
@@ -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)
|
||||
|
@@ -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"}
|
@@ -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);
|
||||
}
|
||||
}
|
||||
|
@@ -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>
|
||||
|
@@ -16,6 +16,7 @@
|
||||
*/
|
||||
export declare class ContentColumnModel {
|
||||
title: string;
|
||||
srTitle: string;
|
||||
source: string;
|
||||
cssClass: string;
|
||||
}
|
||||
|
@@ -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"}
|
@@ -17,6 +17,7 @@
|
||||
|
||||
export class ContentColumnModel {
|
||||
title: string;
|
||||
srTitle: string;
|
||||
source: string;
|
||||
cssClass: string;
|
||||
}
|
||||
|
Reference in New Issue
Block a user