[ADF-3863] - DocumentList add accesibility tags for file type and for… (#4186)

* [ADF-3863] - DocumentList add accesibility tags for file type and for rows template

* [ADF-3863] - DocumentList add pipe for file type accesibility tags

* [ADF-3863] - DocumentList add pipe for file type accesibility tags

* [ADF-3863] DocumentList - change FiletType pipe to pure

lib/core/datatable/components/datatable/datatable-cell.component.ts

@@ -25,7 +25,7 @@ import { DataTableAdapter } from '../../data/datatable-adapter';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container>
-            <span [title]="tooltip" class="adf-datatable-cell-value">{{value}}</span>
+            <span [attr.aria-label]="value" [title]="tooltip" class="adf-datatable-cell-value">{{value}}</span>
         </ng-container>`,
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-datatable-cell' }

lib/core/datatable/components/datatable/datatable.component.html

@@ -104,6 +104,7 @@
                                     </mat-icon>
                                     <ng-template #no_selected_row>
                                         <img
+                                            [attr.aria-label]="data.getValue(row, col) | fileType"
                                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
                                             src="{{ data.getValue(row, col) }}"
                                             (error)="onImageLoadingError($event, row)">

lib/core/datatable/components/datatable/date-cell.component.ts

@@ -27,12 +27,12 @@ import {
 
     template: `
         <ng-container>
-            <span title="{{ tooltip | date:'medium' }}" *ngIf="format === 'timeAgo' else standard_date">
+            <span title="{{ tooltip | date:'medium' }}" *ngIf="format === 'timeAgo' else standard_date" [attr.aria-label]=" value | adfTimeAgo: currentLocale ">
                 {{ value | adfTimeAgo: currentLocale }}
             </span>
         </ng-container>
         <ng-template #standard_date>
-            <span title="{{ tooltip | date:format }}">
+            <span [attr.aria-label]=" value | date:format " title="{{ tooltip | date:format }}">
                 {{ value | date:format }}
             </span>
         </ng-template>

lib/core/datatable/components/datatable/filesize-cell.component.ts

@@ -22,7 +22,7 @@ import { DataTableCellComponent } from './datatable-cell.component';
     selector: 'adf-filesize-cell',
     template: `
         <ng-container>
-            <span [title]="tooltip">{{ value | adfFileSize }}</span>
+            <span [attr.aria-label]=" value | adfFileSize " [title]="tooltip">{{ value | adfFileSize }}</span>
         </ng-container>
     `,
     encapsulation: ViewEncapsulation.None,

lib/core/pipes/file-type.pipe.spec.ts

@@ -0,0 +1,34 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FileTypePipe } from './file-type.pipe';
+import { async } from '@angular/core/testing';
+
+describe('FileTypePipe', () => {
+
+    const altText = 'ft_ic_ms_word';
+    let pipe: FileTypePipe;
+
+    beforeEach(async(() => {
+        pipe = new FileTypePipe();
+    }));
+
+    it('should return file type from alt text', () => {
+        expect(pipe.transform(altText)).toBe('word');
+    });
+
+});

lib/core/pipes/file-type.pipe.ts

@@ -0,0 +1,36 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PipeTransform, Pipe } from '@angular/core';
+
+@Pipe({
+    name: 'fileType',
+    pure: true
+})
+export class FileTypePipe implements PipeTransform {
+
+    transform(value: string) {
+
+        if ( value == null || value === undefined ) {
+            return '';
+        } else {
+            const fileInfo = value.substring(value.lastIndexOf('/') + 1).replace(/\.[a-z]+/, '');
+            return fileInfo.split('_').pop();
+        }
+    }
+
+}

lib/core/pipes/pipe.module.ts

@@ -26,6 +26,7 @@ import { TimeAgoPipe } from './time-ago.pipe';
 import { InitialUsernamePipe } from './user-initial.pipe';
 import { FullNamePipe } from './full-name.pipe';
 import { FormatSpacePipe } from './format-space.pipe';
+import { FileTypePipe } from './file-type.pipe';
 
 @NgModule({
     imports: [
@@ -39,7 +40,8 @@ import { FormatSpacePipe } from './format-space.pipe';
         InitialUsernamePipe,
         FullNamePipe,
         NodeNameTooltipPipe,
-        FormatSpacePipe
+        FormatSpacePipe,
+        FileTypePipe
     ],
     providers: [
         FileSizePipe,
@@ -58,7 +60,8 @@ import { FormatSpacePipe } from './format-space.pipe';
         InitialUsernamePipe,
         FullNamePipe,
         NodeNameTooltipPipe,
-        FormatSpacePipe
+        FormatSpacePipe,
+        FileTypePipe
     ]
 })
 export class PipeModule {