#9 Accessibility improvements

ng2-components/ng2-alfresco-documentlist/src/components/content-column.d.ts

@@ -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);

ng2-components/ng2-alfresco-documentlist/src/components/content-column.js

@@ -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)

ng2-components/ng2-alfresco-documentlist/src/components/content-column.js.map

@@ -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"}

ng2-components/ng2-alfresco-documentlist/src/components/content-column.ts

@@ -24,9 +24,21 @@ import {ContentColumnModel} from './../models/content-column.model';
     template: ''
 })
 export class ContentColumn implements OnInit {
-    @Input() title: string = '';
+
-    @Input() source: string;
+    @Input()
-    @Input('class') cssClass: string;
+    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);
     }
 }

ng2-components/ng2-alfresco-documentlist/src/components/document-list.html

@@ -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>

ng2-components/ng2-alfresco-documentlist/src/models/content-column.model.d.ts

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

ng2-components/ng2-alfresco-documentlist/src/models/content-column.model.js.map

@@ -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"}

ng2-components/ng2-alfresco-documentlist/src/models/content-column.model.ts

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