action icons accessibility

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()">
+    <ng-container *ngIf="displayMode$ | async as displayMode">
-      <mat-icon *ngIf="(displayMode$ | async) === 'list'">view_comfy</mat-icon>
+      <button
-      <mat-icon *ngIf="(displayMode$ | async) === 'gallery'">list</mat-icon>
+        [attr.title]="getTitle(displayMode) | translate"
-    </button>
+        [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());
   }

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()"
     >

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()"
     >

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

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()"
     >

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": {