From a1224d2f7220958bcd6c2e01e620e21a15df9365 Mon Sep 17 00:00:00 2001
From: pionnegru <cilibiu.bogdan@yahoo.com>
Date: Fri, 11 Oct 2019 08:31:44 +0300
Subject: [PATCH] action icons accessibility

---
 .../document-display-mode.component.ts        | 22 +++++++++++++++----
 .../toggle-info-drawer.component.ts           |  1 +
 .../toolbar-button.component.html             |  1 +
 .../toolbar-menu/toolbar-menu.component.html  |  1 +
 .../toolbar/view-node/view-node.component.ts  |  1 +
 src/assets/i18n/en.json                       |  4 +++-
 6 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/app/components/toolbar/document-display-mode/document-display-mode.component.ts b/src/app/components/toolbar/document-display-mode/document-display-mode.component.ts
index 124a9a7dc..9af78ebe5 100644
--- a/src/app/components/toolbar/document-display-mode/document-display-mode.component.ts
+++ b/src/app/components/toolbar/document-display-mode/document-display-mode.component.ts
@@ -35,10 +35,18 @@ import {
 @Component({
   selector: 'app-document-display-mode',
   template: `
-    <button mat-icon-button color="primary" (click)="onClick()">
-      <mat-icon *ngIf="(displayMode$ | async) === 'list'">view_comfy</mat-icon>
-      <mat-icon *ngIf="(displayMode$ | async) === 'gallery'">list</mat-icon>
-    </button>
+    <ng-container *ngIf="displayMode$ | async as displayMode">
+      <button
+        [attr.title]="getTitle(displayMode) | translate"
+        [attr.aria-label]="getTitle(displayMode) | translate"
+        mat-icon-button
+        color="primary"
+        (click)="onClick()"
+      >
+        <mat-icon *ngIf="displayMode === 'list'">view_comfy</mat-icon>
+        <mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
+      </button>
+    </ng-container>
   `,
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-document-display-mode' }
@@ -50,6 +58,12 @@ export class DocumentDisplayModeComponent {
     this.displayMode$ = store.select(getDocumentDisplayMode);
   }
 
+  getTitle(displayMode: string): string {
+    return displayMode === 'list'
+      ? 'APP.ACTIONS.LIST_MODE'
+      : 'APP.ACTIONS.GALLERY_MODE';
+  }
+
   onClick() {
     this.store.dispatch(new ToggleDocumentDisplayMode());
   }
diff --git a/src/app/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts b/src/app/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts
index 326d5224a..21a8a9ed2 100644
--- a/src/app/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts
+++ b/src/app/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts
@@ -37,6 +37,7 @@ import {
     <button
       mat-icon-button
       [color]="(infoDrawerOpened$ | async) ? 'primary' : ''"
+      [attr.aria-label]="'APP.ACTIONS.DETAILS' | translate"
       [attr.title]="'APP.ACTIONS.DETAILS' | translate"
       (click)="onClick()"
     >
diff --git a/src/app/components/toolbar/toolbar-button/toolbar-button.component.html b/src/app/components/toolbar/toolbar-button/toolbar-button.component.html
index abe65578f..8bb294ef9 100644
--- a/src/app/components/toolbar/toolbar-button/toolbar-button.component.html
+++ b/src/app/components/toolbar/toolbar-button/toolbar-button.component.html
@@ -4,6 +4,7 @@
       [id]="actionRef.id"
       mat-icon-button
       [color]="color"
+      [attr.aria-label]="actionRef.description || actionRef.title | translate"
       [attr.title]="actionRef.description || actionRef.title | translate"
       (click)="runAction()"
     >
diff --git a/src/app/components/toolbar/toolbar-menu/toolbar-menu.component.html b/src/app/components/toolbar/toolbar-menu/toolbar-menu.component.html
index 6a26c205a..4d53ce246 100644
--- a/src/app/components/toolbar/toolbar-menu/toolbar-menu.component.html
+++ b/src/app/components/toolbar/toolbar-menu/toolbar-menu.component.html
@@ -2,6 +2,7 @@
   [id]="actionRef.id"
   [color]="color"
   mat-icon-button
+  [attr.aria-label]="actionRef.description || actionRef.title | translate"
   [attr.title]="actionRef.description || actionRef.title | translate"
   [matMenuTriggerFor]="menu"
 >
diff --git a/src/app/components/toolbar/view-node/view-node.component.ts b/src/app/components/toolbar/view-node/view-node.component.ts
index c00f27646..8076e94f8 100644
--- a/src/app/components/toolbar/view-node/view-node.component.ts
+++ b/src/app/components/toolbar/view-node/view-node.component.ts
@@ -40,6 +40,7 @@ import { SharedLinkEntry } from '@alfresco/js-api';
     <button
       *ngIf="data.iconButton"
       mat-icon-button
+      [attr.aria-label]="data.title | translate"
       [attr.title]="data.title | translate"
       (click)="onClick()"
     >
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 5f18a487d..44149c2bf 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -211,7 +211,9 @@
             "CANCEL_JOIN": "Cancel Join Request",
             "LEAVE": "Leave Library",
             "EDIT_OFFLINE": "Edit Offline",
-            "EDIT_OFFLINE_CANCEL": "Cancel Editing"
+            "EDIT_OFFLINE_CANCEL": "Cancel Editing",
+            "LIST_MODE": "View list",
+            "GALLERY_MODE": "View gallery"
         },
         "DIALOGS": {
             "CONFIRM_PURGE": {