From f92539db19f88be8e8b19c45c405167848b566c9 Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@alfresco.com>
Date: Wed, 29 Jun 2016 16:44:58 +0100
Subject: [PATCH 1/4] Add alt text for mimetype icons in search component

Refs #302
---
 .../ng2-alfresco-search/i18n/en.json          | 13 ++++
 ...lfresco-search-autocomplete.component.html |  2 +-
 .../alfresco-search-autocomplete.component.ts | 23 +++++--
 .../components/alfresco-search.component.html |  2 +-
 .../components/alfresco-search.component.ts   | 13 ++++
 .../services/alfresco-thumbnail.service.ts    | 60 ++++++++++---------
 6 files changed, 78 insertions(+), 35 deletions(-)

diff --git a/ng2-components/ng2-alfresco-search/i18n/en.json b/ng2-components/ng2-alfresco-search/i18n/en.json
index dce86a88bf..8f8042c28b 100644
--- a/ng2-components/ng2-alfresco-search/i18n/en.json
+++ b/ng2-components/ng2-alfresco-search/i18n/en.json
@@ -12,6 +12,19 @@
                 "MODIFIED_BY": "Modified by",
                 "MODIFIED_AT": "Modified at"
             }
+        },
+        "ICONS": {
+            "ft_ic_raster_image": "Image file",
+            "ft_ic_pdf": "PDF document",
+            "ft_ic_ms_excel": "Microsoft Excel file",
+            "ft_ic_ms_word": "Microsoft Word document",
+            "ft_ic_ms_powerpoint": "Microsoft PowerPoint file",
+            "ft_ic_video": "Video file",
+            "ft_ic_document": "Document file",
+            "ft_ic_website": "Web resource",
+            "ft_ic_archive": "Acrchive file",
+            "ft_ic_presentation": "Presentation file",
+            "ft_ic_spreadsheet": "Spreadsheet file"
         }
     }
 }
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html
index a6d0c524e3..a8ee356b98 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html
@@ -2,7 +2,7 @@
     <tbody>
     <tr *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)"
         attr.data-automation-id="autocomplete_result_for_{{result.entry.name}}" >
-        <td class="img-td"><img src="{{_getMimeTypeIcon(result)}}" /></td>
+        <td class="img-td"><img src="{{getMimeTypeIcon(result)}}" alt="{{getMimeTypeKey(result)|translate}}" /></td>
         <td><div class="truncate" ><b>{{result.entry.name}}</b></div><div class="truncate">{{result.entry.createdByUser.displayName}}</div></td>
     </tr>
     </tbody>
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
index da7ba03b91..789982b14c 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
@@ -53,9 +53,9 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
     @Output()
     preview: EventEmitter<any> = new EventEmitter();
 
-    constructor(private _alfrescoSearchService: AlfrescoSearchService,
+    constructor(private alfrescoSearchService: AlfrescoSearchService,
                 private translate: AlfrescoTranslationService,
-                private _alfrescoThumbnailService: AlfrescoThumbnailService) {
+                private alfrescoThumbnailService: AlfrescoThumbnailService) {
         if (translate) {
             translate.addTranslationFolder('node_modules/ng2-alfresco-search');
         }
@@ -74,7 +74,7 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
      */
     public displaySearchResults(searchTerm) {
         if (searchTerm !== null && searchTerm !== '') {
-            this._alfrescoSearchService
+            this.alfrescoSearchService
                 .getLiveSearchResults(searchTerm)
                 .subscribe(
                     results => {
@@ -94,13 +94,26 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
      * @param node Node to get URL for.
      * @returns {string} URL address.
      */
-    _getMimeTypeIcon(node: any): string {
+    getMimeTypeIcon(node: any): string {
         if (node.entry.content && node.entry.content.mimeType) {
-            let icon = this._alfrescoThumbnailService.getMimeTypeIcon(node.entry.content.mimeType);
+            let icon = this.alfrescoThumbnailService.getMimeTypeIcon(node.entry.content.mimeType);
             return `${this.baseComponentPath}/img/${icon}`;
         }
     }
 
+    /**
+     * Gets thumbnail message key for the given document node, which can be used to look up alt text
+     * @param node Node to get URL for.
+     * @returns {string} URL address.
+     */
+    getMimeTypeKey(node: any): string {
+        if (node.entry.content && node.entry.content.mimeType) {
+            return 'SEARCH.ICONS.' + this.alfrescoThumbnailService.getMimeTypeKey(node.entry.content.mimeType);
+        } else {
+            return '';
+        }
+    }
+
     onItemClick(node, event?: Event): void {
         if (event) {
             event.preventDefault();
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
index 970cade078..6be9e4744f 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
@@ -18,7 +18,7 @@
     <tbody>
 
     <tr *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)">
-        <td class="col-mimetype-icon"><img src="{{getMimeTypeIcon(result)}}" /></td>
+        <td class="col-mimetype-icon"><img src="{{getMimeTypeIcon(result)}}" alt="{{getMimeTypeKey(result)|translate}}" /></td>
         <td class="mdl-data-table__cell--non-numeric col-display-name"
             attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>
         <td class="mdl-data-table__cell--non-numeric  col-modified-by"
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
index fc15adf24f..ee340002ed 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
@@ -95,6 +95,19 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
         }
     }
 
+    /**
+     * Gets thumbnail message key for the given document node, which can be used to look up alt text
+     * @param node Node to get URL for.
+     * @returns {string} URL address.
+     */
+    getMimeTypeKey(node: any): string {
+        if (node.entry.content && node.entry.content.mimeType) {
+            return 'SEARCH.ICONS.' + this._alfrescoThumbnailService.getMimeTypeKey(node.entry.content.mimeType);
+        } else {
+            return '';
+        }
+    }
+
     /**
      * Loads and displays search results
      * @param searchTerm Search query entered by user
diff --git a/ng2-components/ng2-alfresco-search/src/services/alfresco-thumbnail.service.ts b/ng2-components/ng2-alfresco-search/src/services/alfresco-thumbnail.service.ts
index 9e3f2e4271..83025140ab 100644
--- a/ng2-components/ng2-alfresco-search/src/services/alfresco-thumbnail.service.ts
+++ b/ng2-components/ng2-alfresco-search/src/services/alfresco-thumbnail.service.ts
@@ -26,32 +26,32 @@ declare let AlfrescoApi: any;
 export class AlfrescoThumbnailService {
 
     mimeTypeIcons: any = {
-        'image/png': 'ft_ic_raster_image.svg',
-        'image/jpeg': 'ft_ic_raster_image.svg',
-        'image/gif': 'ft_ic_raster_image.svg',
-        'application/pdf': 'ft_ic_pdf.svg',
-        'application/vnd.ms-excel': 'ft_ic_ms_excel.svg',
-        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'ft_ic_ms_excel.svg',
-        'application/vnd.openxmlformats-officedocument.spreadsheetml.template': 'ft_ic_ms_excel.svg',
-        'application/msword': 'ft_ic_ms_word.svg',
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'ft_ic_ms_word.svg',
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.template': 'ft_ic_ms_word.svg',
-        'application/vnd.ms-powerpoint': 'ft_ic_ms_powerpoint.svg',
-        'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'ft_ic_ms_powerpoint.svg',
-        'application/vnd.openxmlformats-officedocument.presentationml.template': 'ft_ic_ms_powerpoint.svg',
-        'application/vnd.openxmlformats-officedocument.presentationml.slideshow': 'ft_ic_ms_powerpoint.svg',
-        'video/mp4': 'ft_ic_video.svg',
-        'text/plain': 'ft_ic_document.svg',
-        'application/x-javascript': 'ft_ic_document.svg',
-        'application/json': 'ft_ic_document.svg',
-        'image/svg+xml': 'ft_ic_vector_image.svg',
-        'text/html': 'ft_ic_website.svg',
-        'application/x-compressed': 'ft_ic_archive.svg',
-        'application/x-zip-compressed': 'ft_ic_archive.svg',
-        'application/zip': 'ft_ic_archive.svg',
-        'application/vnd.apple.keynote': 'ft_ic_presentation.svg',
-        'application/vnd.apple.pages': 'ft_ic_document.svg',
-        'application/vnd.apple.numbers': 'ft_ic_spreadsheet.svg'
+        'image/png': 'ft_ic_raster_image',
+        'image/jpeg': 'ft_ic_raster_image',
+        'image/gif': 'ft_ic_raster_image',
+        'application/pdf': 'ft_ic_pdf',
+        'application/vnd.ms-excel': 'ft_ic_ms_excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'ft_ic_ms_excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.template': 'ft_ic_ms_excel',
+        'application/msword': 'ft_ic_ms_word',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'ft_ic_ms_word',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.template': 'ft_ic_ms_word',
+        'application/vnd.ms-powerpoint': 'ft_ic_ms_powerpoint',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'ft_ic_ms_powerpoint',
+        'application/vnd.openxmlformats-officedocument.presentationml.template': 'ft_ic_ms_powerpoint',
+        'application/vnd.openxmlformats-officedocument.presentationml.slideshow': 'ft_ic_ms_powerpoint',
+        'video/mp4': 'ft_ic_video',
+        'text/plain': 'ft_ic_document',
+        'application/x-javascript': 'ft_ic_document',
+        'application/json': 'ft_ic_document',
+        'image/svg+xml': 'ft_ic_vector_image',
+        'text/html': 'ft_ic_website',
+        'application/x-compressed': 'ft_ic_archive',
+        'application/x-zip-compressed': 'ft_ic_archive',
+        'application/zip': 'ft_ic_archive',
+        'application/vnd.apple.keynote': 'ft_ic_presentation',
+        'application/vnd.apple.pages': 'ft_ic_document',
+        'application/vnd.apple.numbers': 'ft_ic_spreadsheet'
     };
 
     constructor(private contentService: AlfrescoContentService) {
@@ -66,8 +66,12 @@ export class AlfrescoThumbnailService {
         return this.contentService.getDocumentThumbnailUrl(document);
     }
 
-    public getMimeTypeIcon(mimeType: string): string {
+    public getMimeTypeKey(mimeType: string): string {
         let icon = this.mimeTypeIcons[mimeType];
-        return icon || 'ft_ic_miscellaneous.svg';
+        return icon || 'ft_ic_miscellaneous';
+    }
+
+    public getMimeTypeIcon(mimeType: string): string {
+        return this.getMimeTypeKey(mimeType) + '.svg';
     }
 }

From 3778574cefabfb279a399b0c8e9af9eaadb0e158 Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@alfresco.com>
Date: Wed, 29 Jun 2016 16:45:45 +0100
Subject: [PATCH 2/4] Add aria-labelledby attribute since MDL expandable search
 has 2 labels

Refs #302
---
 .../src/components/alfresco-search-control.component.html     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
index 82295426c0..bf3ce110ee 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
@@ -6,8 +6,8 @@
         <div [class]="getTextFieldHolderClassName()">
             <input class="mdl-textfield__input" [type]="inputType" [autocomplete]="getAutoComplete()" data-automation-id="search_input"
                    #searchInput id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus($event)"
-                   (blur)="onBlur($event)">
-            <label class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
+                   (blur)="onBlur($event)" aria-labelledby="searchLabel">
+            <label id="searchLabel" class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
         </div>
     </div>
 </form>

From bc9a83040e15c7469d828d51bff57e703852f3a0 Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@alfresco.com>
Date: Wed, 29 Jun 2016 16:46:38 +0100
Subject: [PATCH 3/4] Use <caption> el to summarise search results

Refs #302
---
 .../src/components/alfresco-search.component.html             | 2 +-
 .../src/components/alfresco-search.component.ts               | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
index 6be9e4744f..99241f118e 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
@@ -1,6 +1,6 @@
-<p data-automation-id="search_result_found" *ngIf="results && results.length">{{ 'SEARCH.RESULTS.SUMMARY' | translate:{numResults: results.length, searchTerm: searchTerm} }}</p>
 <p data-automation-id="search_no_result_found" *ngIf="results&& results.length == 0">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</p>
 <table data-automation-id="search_result_table" *ngIf="results && results.length && searchTerm" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+    <caption data-automation-id="search_result_found">{{ 'SEARCH.RESULTS.SUMMARY' | translate:{numResults: results.length, searchTerm: searchTerm} }}</caption>
     <thead>
     <tr>
         <th class="mdl-data-table__cell--non-numeric col-mimetype-icon"></th>
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
index ee340002ed..60199bce9e 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
@@ -27,6 +27,10 @@ declare let __moduleName: string;
     moduleId: __moduleName,
     selector: 'alfresco-search',
     styles: [`
+        :host .mdl-data-table caption {
+            margin: 0 0 16px 0;
+            text-align: left;
+        }
         :host .mdl-data-table td {
             max-width: 0;
             white-space: nowrap;

From c253b8a12e17f1471c3181beb60d1073d5e5f255 Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@alfresco.com>
Date: Wed, 29 Jun 2016 16:47:09 +0100
Subject: [PATCH 4/4] Turn empty th element into td

Refs #302
---
 .../src/components/alfresco-search.component.html               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
index 99241f118e..ccbb929d3c 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
@@ -3,7 +3,7 @@
     <caption data-automation-id="search_result_found">{{ 'SEARCH.RESULTS.SUMMARY' | translate:{numResults: results.length, searchTerm: searchTerm} }}</caption>
     <thead>
     <tr>
-        <th class="mdl-data-table__cell--non-numeric col-mimetype-icon"></th>
+        <td class="mdl-data-table__cell--non-numeric col-mimetype-icon"></td>
         <th class="mdl-data-table__cell--non-numeric col-display-name">
             {{'SEARCH.RESULTS.COLUMNS.NAME' | translate}}
         </th>