From a43f0bb5fc48860c504cf577d5c55ea9ac73b12a Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Fri, 26 Apr 2019 09:02:17 +0200
Subject: [PATCH] MOBILE-2963 message: Improve accessibility in messaging

---
 scripts/langindex.json                                    | 2 ++
 src/addon/messages/lang/en.json                           | 2 ++
 src/addon/messages/pages/discussion/discussion.html       | 8 ++++----
 .../pages/group-conversations/group-conversations.html    | 2 +-
 src/assets/lang/en.json                                   | 2 ++
 src/components/context-menu/context-menu.ts               | 6 +++---
 .../context-menu/core-context-menu-popover.html           | 2 +-
 7 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/scripts/langindex.json b/scripts/langindex.json
index a0eddf6a0..83f7a1edb 100644
--- a/scripts/langindex.json
+++ b/scripts/langindex.json
@@ -177,6 +177,7 @@
   "addon.messages.contactname": "local_moodlemobileapp",
   "addon.messages.contactrequestsent": "message",
   "addon.messages.contacts": "message",
+  "addon.messages.conversationactions": "message",
   "addon.messages.decline": "message",
   "addon.messages.deleteallconfirm": "message",
   "addon.messages.deleteallselfconfirm": "message",
@@ -198,6 +199,7 @@
   "addon.messages.messagepreferences": "message",
   "addon.messages.messages": "message",
   "addon.messages.muteconversation": "message",
+  "addon.messages.mutedconversation": "message",
   "addon.messages.newmessage": "message",
   "addon.messages.newmessages": "local_moodlemobileapp",
   "addon.messages.nocontactrequests": "message",
diff --git a/src/addon/messages/lang/en.json b/src/addon/messages/lang/en.json
index 4767ed3ba..3a298fdff 100644
--- a/src/addon/messages/lang/en.json
+++ b/src/addon/messages/lang/en.json
@@ -16,6 +16,7 @@
     "contactname": "Contact name",
     "contactrequestsent": "Contact request sent",
     "contacts": "Contacts",
+    "conversationactions": "Conversation actions menu",
     "decline": "Decline",
     "deleteallconfirm": "Are you sure you would like to delete this entire conversation? This will not delete it for other conversation participants.",
     "deleteallselfconfirm": "Are you sure you would like to delete this entire personal conversation?",
@@ -37,6 +38,7 @@
     "messagepreferences": "Message preferences",
     "messages": "Messages",
     "muteconversation": "Mute",
+    "mutedconversation": "Muted conversation",
     "newmessage": "New message",
     "newmessages": "New messages",
     "nocontactrequests": "No contact requests",
diff --git a/src/addon/messages/pages/discussion/discussion.html b/src/addon/messages/pages/discussion/discussion.html
index fb5602317..1d0566463 100644
--- a/src/addon/messages/pages/discussion/discussion.html
+++ b/src/addon/messages/pages/discussion/discussion.html
@@ -1,16 +1,16 @@
 <ion-header>
     <ion-navbar core-back-button>
         <ion-title>
-            <img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage" alt="" onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation" [siteId]="siteId || null">
+            <img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage" [alt]="title" onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation" [siteId]="siteId || null">
             <ion-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" core-user-avatar [user]="otherMember" [linkProfile]="false" [checkOnline]="otherMember.showonlinestatus" item-start (click)="showInfo && viewInfo()"></ion-avatar>
             <core-format-text [text]="title" (click)="showInfo && !isGroup && viewInfo()"></core-format-text>
-            <core-icon *ngIf="conversation && conversation.isfavourite" name="fa-star"></core-icon>
-            <core-icon *ngIf="conversation && conversation.ismuted" name="volume-off"></core-icon>
+            <core-icon *ngIf="conversation && conversation.isfavourite" name="fa-star" [label]="'core.favourites' | translate"></core-icon>
+            <core-icon *ngIf="conversation && conversation.ismuted" name="volume-off" [label]="'addon.messages.mutedconversation' | translate"></core-icon>
         </ion-title>
         <ion-buttons end></ion-buttons>
     </ion-navbar>
     <core-navbar-buttons end>
-        <core-context-menu>
+        <core-context-menu [aria-label]="'addon.messages.conversationactions' | translate">
             <core-context-menu-item [hidden]="isSelf || !showInfo || isGroup" [priority]="1000" [content]="'addon.messages.info' | translate" (action)="viewInfo()" iconAction="information-circle"></core-context-menu-item>
             <core-context-menu-item [hidden]="isSelf || !showInfo || !isGroup" [priority]="1000" [content]="'addon.messages.groupinfo' | translate" (action)="viewInfo()" iconAction="information-circle"></core-context-menu-item>
             <core-context-menu-item [hidden]="!groupMessagingEnabled || !conversation" [priority]="800" [content]="(conversation && conversation.isfavourite ? 'addon.messages.removefromfavourites' : 'addon.messages.addtofavourites') | translate" (action)="changeFavourite($event)" [closeOnClick]="false" [iconAction]="favouriteIcon"></core-context-menu-item>
diff --git a/src/addon/messages/pages/group-conversations/group-conversations.html b/src/addon/messages/pages/group-conversations/group-conversations.html
index ec74e6a41..c32cdec85 100644
--- a/src/addon/messages/pages/group-conversations/group-conversations.html
+++ b/src/addon/messages/pages/group-conversations/group-conversations.html
@@ -101,7 +101,7 @@
         <h2>
             <core-format-text [text]="conversation.name"></core-format-text>
             <core-icon name="fa-ban" *ngIf="conversation.isblocked" [label]="'addon.messages.contactblocked' | translate"></core-icon>
-            <core-icon *ngIf="conversation.ismuted" name="volume-off"></core-icon>
+            <core-icon *ngIf="conversation.ismuted" name="volume-off" [label]="'addon.messages.mutedconversation' | translate"></core-icon>
         </h2>
         <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
             <ion-badge *ngIf="conversation.unreadcount > 0">{{ conversation.unreadcount }}</ion-badge>
diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json
index c8a128106..e3028b828 100644
--- a/src/assets/lang/en.json
+++ b/src/assets/lang/en.json
@@ -177,6 +177,7 @@
     "addon.messages.contactname": "Contact name",
     "addon.messages.contactrequestsent": "Contact request sent",
     "addon.messages.contacts": "Contacts",
+    "addon.messages.conversationactions": "Conversation actions menu",
     "addon.messages.decline": "Decline",
     "addon.messages.deleteallconfirm": "Are you sure you would like to delete this entire conversation? This will not delete it for other conversation participants.",
     "addon.messages.deleteallselfconfirm": "Are you sure you would like to delete this entire personal conversation?",
@@ -198,6 +199,7 @@
     "addon.messages.messagepreferences": "Message preferences",
     "addon.messages.messages": "Messages",
     "addon.messages.muteconversation": "Mute",
+    "addon.messages.mutedconversation": "Muted conversation",
     "addon.messages.newmessage": "New message",
     "addon.messages.newmessages": "New messages",
     "addon.messages.nocontactrequests": "No contact requests",
diff --git a/src/components/context-menu/context-menu.ts b/src/components/context-menu/context-menu.ts
index 1f674eebd..ff6413b67 100644
--- a/src/components/context-menu/context-menu.ts
+++ b/src/components/context-menu/context-menu.ts
@@ -31,10 +31,10 @@ import { Subject } from 'rxjs';
 })
 export class CoreContextMenuComponent implements OnInit, OnDestroy {
     @Input() icon?: string; // Icon to be shown on the navigation bar. Default: Kebab menu icon.
-    @Input() title?: string; // Aria label and text to be shown on the top of the popover.
+    @Input() title?: string; // Text to be shown on the top of the popover.
+    @Input('aria-label') ariaLabel?: string; // Aria label to be shown on the top of the popover.
 
     hideMenu = true; // It will be unhidden when items are added.
-    ariaLabel: string;
     expanded = false;
     protected items: CoreContextMenuItemComponent[] = [];
     protected itemsMovedToParent: CoreContextMenuItemComponent[] = [];
@@ -70,7 +70,7 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
      */
     ngOnInit(): void {
         this.icon = this.icon || 'more';
-        this.ariaLabel = this.title || this.translate.instant('core.info');
+        this.ariaLabel = this.ariaLabel || this.title || this.translate.instant('core.info');
     }
 
     /**
diff --git a/src/components/context-menu/core-context-menu-popover.html b/src/components/context-menu/core-context-menu-popover.html
index 18905549d..d785687be 100644
--- a/src/components/context-menu/core-context-menu-popover.html
+++ b/src/components/context-menu/core-context-menu-popover.html
@@ -1,6 +1,6 @@
 <ion-list [id]="uniqueId" role="menu">
     <ion-list-header *ngIf="title">{{title}}</ion-list-header>
-    <a ion-item text-wrap *ngFor="let item of items" core-link [capture]="item.captureLink" [autoLogin]="item.autoLogin" [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction" [hidden]="item.hidden" [attr.detail-none]="!item.href || item.iconAction" role="menuitem" [attr.aria-controls]="uniqueId">
+    <a ion-item text-wrap *ngFor="let item of items" core-link [capture]="item.captureLink" [autoLogin]="item.autoLogin" [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction" [hidden]="item.hidden" [attr.detail-none]="!item.href || item.iconAction" role="menuitem">
         <core-icon *ngIf="item.iconDescription" [name]="item.iconDescription" [label]="item.ariaDescription" item-start></core-icon>
         <core-format-text [clean]="true" [text]="item.content"></core-format-text>
         <core-icon *ngIf="(item.href || item.action) && item.iconAction && item.iconAction != 'spinner'" [name]="item.iconAction" item-end></core-icon>