From 499a04dc1af13fca44cb8eb6cf240d4a1657d40b Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Thu, 31 Mar 2016 10:44:08 +0200
Subject: [PATCH 1/2] MOBILE-1509 notifications: Show user picture in
 notifications

---
 www/addons/notifications/controllers/list.js       | 4 +++-
 www/addons/notifications/services/notifications.js | 9 +++++++--
 www/addons/notifications/templates/list.html       | 4 +++-
 www/core/lang/en.json                              | 1 +
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/www/addons/notifications/controllers/list.js b/www/addons/notifications/controllers/list.js
index 7c8fc21a8c4..b8b53bd2366 100644
--- a/www/addons/notifications/controllers/list.js
+++ b/www/addons/notifications/controllers/list.js
@@ -21,12 +21,14 @@ angular.module('mm.addons.notifications')
  * @ngdoc controller
  * @name mmaNotificationsListCtrl
  */
-.controller('mmaNotificationsListCtrl', function($scope, $mmUtil, $mmaNotifications, mmaNotificationsListLimit) {
+.controller('mmaNotificationsListCtrl', function($scope, $mmUtil, $mmaNotifications, mmaNotificationsListLimit,
+            mmUserProfileState) {
 
     var readCount = 0,
         unreadCount = 0;
 
     $scope.notifications = [];
+    $scope.userStateName = mmUserProfileState;
 
     // Convenience function to get notifications. Get unread notifications first.
     function fetchNotifications(refresh) {
diff --git a/www/addons/notifications/services/notifications.js b/www/addons/notifications/services/notifications.js
index 6ef559a0ab8..20baaedc5a4 100644
--- a/www/addons/notifications/services/notifications.js
+++ b/www/addons/notifications/services/notifications.js
@@ -21,7 +21,7 @@ angular.module('mm.addons.notifications')
  * @ngdoc service
  * @name $mmaNotifications
  */
-.factory('$mmaNotifications', function($q, $log, $mmSite, $mmSitesManager, mmaNotificationsListLimit) {
+.factory('$mmaNotifications', function($q, $log, $mmSite, $mmSitesManager, $mmUser, mmaNotificationsListLimit) {
 
     $log = $log.getInstance('$mmaNotifications');
 
@@ -42,6 +42,11 @@ angular.module('mm.addons.notifications')
             if (cid && cid[1]) {
                 notification.courseid = cid[1];
             }
+
+            // Try to get the profile picture of the user.
+            $mmUser.getProfile(notification.useridfrom, notification.courseid, true).then(function(user) {
+                notification.profileimageurlfrom = user.profileimageurl;
+            });
         });
     }
 
@@ -52,7 +57,7 @@ angular.module('mm.addons.notifications')
      */
     function getNotificationsCacheKey() {
         return 'mmaNotifications:list';
-    };
+    }
 
     /**
      * Get notifications from site.
diff --git a/www/addons/notifications/templates/list.html b/www/addons/notifications/templates/list.html
index 8bfb9a5c9ea..4e880212088 100644
--- a/www/addons/notifications/templates/list.html
+++ b/www/addons/notifications/templates/list.html
@@ -4,7 +4,9 @@
         </ion-refresher>
         <mm-loading hide-until="notificationsLoaded">
             <article class="card" ng-repeat="notification in notifications track by $index">
-                <div class="item">
+                <div class="item item-avatar item-text-wrap">
+                    <img ng-if="notification.profileimageurlfrom" ng-src="{{notification.profileimageurlfrom}}" mm-external-content ui-sref="{{userStateName}}({courseid: notification.courseid, userid: notification.useridfrom})" alt="{{ 'mm.core.pictureof' | translate:{$a: notification.userfromfullname} }}" role="presentation">
+                    <img ng-if="!notification.profileimageurlfrom" src="img/user-avatar.png" alt="{{ 'mm.core.pictureof' | translate:{$a: notification.userfromfullname} }}" role="presentation">
                     <h2>{{notification.userfromfullname}}</h2>
                     <p>{{notification.timecreated | mmDateDayOrTime}}</p>
                 </div>
diff --git a/www/core/lang/en.json b/www/core/lang/en.json
index 40b0a700f07..80f106652de 100644
--- a/www/core/lang/en.json
+++ b/www/core/lang/en.json
@@ -88,6 +88,7 @@
     "openinbrowser": "Open in browser",
     "percentagenumber": "{{$a}}%",
     "phone": "Phone",
+    "pictureof": "Picture of {{$a}}",
     "previous": "Previous",
     "pulltorefresh": "Pull to refresh",
     "refresh": "Refresh",

From 0ff8fcae377403bbbd213173ee450696196cb0bd Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Thu, 31 Mar 2016 10:44:50 +0200
Subject: [PATCH 2/2] MOBILE-1509 accessibility: Improve accessibility of user
 pictures

---
 www/addons/messages/templates/contacts.html        | 2 +-
 www/addons/messages/templates/discussions.html     | 4 ++--
 www/addons/mod_assign/templates/index.html         | 2 +-
 www/addons/mod_chat/templates/chat.html            | 4 ++--
 www/addons/mod_chat/templates/users.html           | 2 +-
 www/addons/mod_forum/templates/discussionpost.html | 4 ++--
 www/addons/mod_forum/templates/discussions.html    | 4 ++--
 www/addons/mod_glossary/templates/entry.html       | 2 +-
 www/addons/notes/templates/list.html               | 4 ++--
 www/addons/participants/templates/list.html        | 2 +-
 www/core/components/login/templates/sites.html     | 2 +-
 www/core/components/sidemenu/templates/menu.html   | 2 +-
 www/core/components/user/templates/profile.html    | 4 ++--
 13 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/www/addons/messages/templates/contacts.html b/www/addons/messages/templates/contacts.html
index 0b0e11cf303..19547c6e75d 100644
--- a/www/addons/messages/templates/contacts.html
+++ b/www/addons/messages/templates/contacts.html
@@ -26,7 +26,7 @@ <h2>{{ 'mma.messages.type_' + contactType | translate }}</h2>
                 </ion-item>
 
                 <a ng-repeat="contact in contacts[contactType] | orderBy:'fullname' track by $index" ng-if="contact.profileimageurl || contact.profileimageurlsmall" class="item item-avatar" mm-split-view-link="{{userStateName}}({userid: contact.id})" title="{{contact.fullname}}"> <!-- Don't show deleted users -->
-                    <img ng-src="{{ contact.profileimageurl || contact.profileimageurlsmall }}" alt="" role="presentation" mm-external-content >
+                    <img ng-src="{{ contact.profileimageurl || contact.profileimageurlsmall }}" alt="{{ 'mm.core.pictureof' | translate:{$a: contact.fullname} }}" role="presentation" mm-external-content >
                     <p class="item-heading">{{ contact.fullname }}</p>
                 </a>
             </li>
diff --git a/www/addons/messages/templates/discussions.html b/www/addons/messages/templates/discussions.html
index 09b69e695c5..e465bf562fb 100644
--- a/www/addons/messages/templates/discussions.html
+++ b/www/addons/messages/templates/discussions.html
@@ -5,8 +5,8 @@
             <li>
                 <a class="item item-avatar" ng-repeat="disc in discussions | orderBy:'message.timecreated':true track by $index" mm-split-view-link="site.messages-discussion({userId: disc.message.user, userFullname: disc.fullname})" title="{{disc.fullname}}">
 
-                    <img ng-src="{{disc.profileimageurl}}" alt="" role="presentation" mm-external-content ng-if="disc.profileimageurl">
-                    <img src="img/user-avatar.png" alt="" role="presentation" ng-if="!disc.profileimageurl">
+                    <img ng-src="{{disc.profileimageurl}}" alt="{{ 'mm.core.pictureof' | translate:{$a: disc.fullname} }}" role="presentation" mm-external-content ng-if="disc.profileimageurl">
+                    <img src="img/user-avatar.png" alt="{{ 'mm.core.pictureof' | translate:{$a: disc.fullname} }}" role="presentation" ng-if="!disc.profileimageurl">
 
                     <span class="item-note" ng-if="disc.message.timecreated > 0">{{disc.message.timecreated | mmDateDayOrTime}}</span>
                     <p class="item-heading">{{disc.fullname}}</p>
diff --git a/www/addons/mod_assign/templates/index.html b/www/addons/mod_assign/templates/index.html
index 194ddeb6638..69857131530 100644
--- a/www/addons/mod_assign/templates/index.html
+++ b/www/addons/mod_assign/templates/index.html
@@ -27,7 +27,7 @@ <h2>{{ 'mma.mod_assign.cutoffdate' | translate }}</h2>
                     <div class="item item-divider" ng-if="$index > 0"></div>
 
                     <a class="item item-avatar" mm-user-link userid="{{submission.userid}}" courseid="{{courseid}}" title="{{submission.userfullname}}">
-                        <img ng-src="{{submission.userprofileimageurl}}" mm-external-content alt="" role="presentation">
+                        <img ng-src="{{submission.userprofileimageurl}}" mm-external-content alt="{{ 'mm.core.pictureof' | translate:{$a: submission.userfullname} }}" role="presentation">
                         <p>{{submission.userfullname}}</p>
                         <div class="item-note">{{submission.status}}</div>
                         <p>{{ submission.timemodified * 1000 | mmFormatDate:"dfmediumdate" }}</p>
diff --git a/www/addons/mod_chat/templates/chat.html b/www/addons/mod_chat/templates/chat.html
index a8e861252e4..539f573cc64 100644
--- a/www/addons/mod_chat/templates/chat.html
+++ b/www/addons/mod_chat/templates/chat.html
@@ -28,8 +28,8 @@
                         </p>
 
                         <article ng-if="!message.system && message.message.substr(0, 4) != 'beep'" class="item item-avatar item-text-wrap" href="#">
-                            <img ng-if="message.userprofileimageurl" ng-src="{{message.userprofileimageurl}}" mm-external-content>
-                            <img ng-if="!message.userprofileimageurl" src="img/user-avatar.png" alt="">
+                            <img ng-if="message.userprofileimageurl" ng-src="{{message.userprofileimageurl}}" mm-external-content alt="{{ 'mm.core.pictureof' | translate:{$a: message.userfullname} }}" role="presentation">
+                            <img ng-if="!message.userprofileimageurl" src="img/user-avatar.png" alt="{{ 'mm.core.pictureof' | translate:{$a: message.userfullname} }}" role="presentation">
                             <h2>{{ message.userfullname }}</h2>
 
                             <mm-format-text after-render="scrollAfterRender" watch="true">{{ message.message }}</mm-format-text>
diff --git a/www/addons/mod_chat/templates/users.html b/www/addons/mod_chat/templates/users.html
index 6513aa29292..f6ac576889c 100644
--- a/www/addons/mod_chat/templates/users.html
+++ b/www/addons/mod_chat/templates/users.html
@@ -8,7 +8,7 @@ <h1 class="title">{{ 'mma.mod_chat.currentusers' | translate }}</h1>
             <ul class="list">
                 <li ng-repeat="user in chatUsers" class="card">
                     <div class="item item-avatar">
-                        <img ng-src="{{user.profileimageurl}}" alt="" mm-external-content>
+                        <img ng-src="{{user.profileimageurl}}" alt="{{ 'mm.core.pictureof' | translate:{$a: user.fullname} }}" mm-external-content>
                         <mm-format-text>{{user.fullname}}</mm-format-text>
                     </div>
                     <div class="item tabs tabs-secondary tabs-icon-left" ng-if="currentUserId != user.id && !isAppOffline()">
diff --git a/www/addons/mod_forum/templates/discussionpost.html b/www/addons/mod_forum/templates/discussionpost.html
index 19f3ee7453b..28040f9c0a9 100644
--- a/www/addons/mod_forum/templates/discussionpost.html
+++ b/www/addons/mod_forum/templates/discussionpost.html
@@ -1,7 +1,7 @@
 <div class="item item-divider" ng-if="showdivider"></div>
 <div class="item item-avatar">
-    <img ng-if="post.userpictureurl" ng-src="{{post.userpictureurl}}" mm-external-content mm-user-link courseid="{{courseid}}" userid="{{post.userid}}" alt="" role="presentation">
-    <img ng-if="!post.userpictureurl" src="img/user-avatar.png"  alt="" role="presentation">
+    <img ng-if="post.userpictureurl" ng-src="{{post.userpictureurl}}" mm-external-content mm-user-link courseid="{{courseid}}" userid="{{post.userid}}" alt="{{ 'mm.core.pictureof' | translate:{$a: post.userfullname} }}" role="presentation">
+    <img ng-if="!post.userpictureurl" src="img/user-avatar.png"  alt="{{ 'mm.core.pictureof' | translate:{$a: post.userfullname} }}" role="presentation">
     <h2 ng-if="titleimportant">{{title}}</h2>
     <p ng-if="!titleimportant">{{title}}</p>
     <div class="item-note">{{post.modified | mmDateDayOrTime}}</div>
diff --git a/www/addons/mod_forum/templates/discussions.html b/www/addons/mod_forum/templates/discussions.html
index f662d5bdc08..88de9b1bcc0 100644
--- a/www/addons/mod_forum/templates/discussions.html
+++ b/www/addons/mod_forum/templates/discussions.html
@@ -19,8 +19,8 @@
                         <a class="mma-forum-discussion-link" mm-split-view-link="site.mod_forum-discussion({cid: courseid, discussionid: discussion.discussion})">
                             <article>
                                 <div class="item item-avatar item-text-wrap">
-                                    <img ng-if="discussion.userpictureurl" ng-src="{{discussion.userpictureurl}}" mm-external-content mm-split-view-link="{{userStateName}}({courseid: courseid, userid: discussion.userid})" alt="" role="presentation">
-                                    <img ng-if="!discussion.userpictureurl" src="img/user-avatar.png" alt="" role="presentation">
+                                    <img ng-if="discussion.userpictureurl" ng-src="{{discussion.userpictureurl}}" mm-external-content mm-split-view-link="{{userStateName}}({courseid: courseid, userid: discussion.userid})" alt="{{ 'mm.core.pictureof' | translate:{$a: discussion.userfullname} }}" role="presentation">
+                                    <img ng-if="!discussion.userpictureurl" src="img/user-avatar.png" alt="{{ 'mm.core.pictureof' | translate:{$a: discussion.userfullname} }}" role="presentation">
                                     <h2><summary>{{discussion.subject}}</summary></h2>
                                     <div class="item-note">{{discussion.created | mmDateDayOrTime}}</div>
                                     <p>{{discussion.userfullname}}</p>
diff --git a/www/addons/mod_glossary/templates/entry.html b/www/addons/mod_glossary/templates/entry.html
index 2f356520641..6d83de0ad84 100644
--- a/www/addons/mod_glossary/templates/entry.html
+++ b/www/addons/mod_glossary/templates/entry.html
@@ -8,7 +8,7 @@
 
             <div class="card list" ng-if="entry != false">
                 <a class="item item-avatar" ng-if="showAuthor" ui-sref="{{userStateName}}({courseid: courseid, userid: entry.userid})">
-                    <img ng-src="{{entry.userpictureurl}}" alt="" mm-external-content role="presentation">
+                    <img ng-src="{{entry.userpictureurl}}" alt="{{ 'mm.core.pictureof' | translate:{$a: entry.userfullname} }}" mm-external-content role="presentation">
                     <h2><mm-format-text watch="true">{{ entry.concept }}</mm-format-text></h2>
                     <p ng-if="showDate" class="item-note">{{ entry.timemodified | mmDateDayOrTime }}</p>
                     <p><mm-format-text watch="true" clean="true">{{ entry.userfullname }}</mm-format-text></p>
diff --git a/www/addons/notes/templates/list.html b/www/addons/notes/templates/list.html
index 9a22d85b82f..6cfe10c8b61 100644
--- a/www/addons/notes/templates/list.html
+++ b/www/addons/notes/templates/list.html
@@ -9,8 +9,8 @@
             <div class="list">
                 <article class="card" ng-repeat="note in notes">
                         <div class="item item-avatar">
-                            <img ng-if="note.userprofileimageurl" ng-src="{{note.userprofileimageurl}}" mm-external-content mm-user-link courseid="{{courseid}}" userid="{{note.userid}}">
-                            <img ng-if="!note.userprofileimageurl" src="img/user-avatar.png" alt="" role="presentation">
+                            <img ng-if="note.userprofileimageurl" ng-src="{{note.userprofileimageurl}}" mm-external-content mm-user-link courseid="{{courseid}}" userid="{{note.userid}}" alt="{{ 'mm.core.pictureof' | translate:{$a: note.userfullname} }}" role="presentation">
+                            <img ng-if="!note.userprofileimageurl" src="img/user-avatar.png" alt="{{ 'mm.core.pictureof' | translate:{$a: note.userfullname} }}" role="presentation">
                             <div class="item-note">{{note.lastmodified | mmDateDayOrTime}}</div>
                             <p>{{note.userfullname}}</p>
                         </div>
diff --git a/www/addons/participants/templates/list.html b/www/addons/participants/templates/list.html
index ba1d39eff3c..ff3ca689573 100644
--- a/www/addons/participants/templates/list.html
+++ b/www/addons/participants/templates/list.html
@@ -8,7 +8,7 @@
                 <ul class="list" ng-if="participants && participants.length > 0">
                     <li ng-repeat="participant in participants">
                         <a class="item item-avatar" mm-split-view-link="{{userStateName}}({courseid: courseid, userid: participant.id})" title="{{participant.fullname}}">
-                            <img ng-src="{{participant.profileimageurl}}" alt="" mm-external-content>
+                            <img ng-src="{{participant.profileimageurl}}" alt="{{ 'mm.core.pictureof' | translate:{$a: participant.fullname} }}" mm-external-content>
                             <mm-format-text>{{participant.fullname}}</mm-format-text>
                         </a>
                     </li>
diff --git a/www/core/components/login/templates/sites.html b/www/core/components/login/templates/sites.html
index 7782e662607..beecdfc770e 100644
--- a/www/core/components/login/templates/sites.html
+++ b/www/core/components/login/templates/sites.html
@@ -7,7 +7,7 @@
       <ion-list ng-repeat="site in sites track by $index" show-delete='data.showDelete'>
         <ion-item class="item item-thumbnail-left item-remove-animate" ng-click="login(site.id)">
           <ion-delete-button class="ion-minus-circled" ng-click='onItemDelete($event, $index)'></ion-delete-button>
-            <img ng-src="{{site.avatar}}" mm-external-content siteid="site.id">
+            <img ng-src="{{site.avatar}}" mm-external-content siteid="site.id" alt="{{ 'mm.core.pictureof' | translate:{$a: site.fullname} }}" role="presentation">
             <h2>{{site.fullname}}</h2>
             <p><mm-format-text clean="true" watch="true">{{site.sitename}}</mm-format-text></p>
             <p>{{site.siteurl}}</p>
diff --git a/www/core/components/sidemenu/templates/menu.html b/www/core/components/sidemenu/templates/menu.html
index 9c145b9d8e1..94c12e9e341 100644
--- a/www/core/components/sidemenu/templates/menu.html
+++ b/www/core/components/sidemenu/templates/menu.html
@@ -19,7 +19,7 @@
         <header>
             <div class="bar bar-header bar-side-menu">
                 <div class="item item-avatar">
-                    <img ng-src="{{siteinfo.userpictureurl}}" alt="" mm-external-content>
+                    <img ng-src="{{siteinfo.userpictureurl}}" alt="{{ 'mm.core.pictureof' | translate:{$a: siteinfo.fullname} }}" role="presentation" mm-external-content>
                     <h2>{{siteinfo.fullname}}</h2>
                     <p><mm-format-text watch="true">{{siteinfo.sitename}}</mm-format-text></p>
                 </div>
diff --git a/www/core/components/user/templates/profile.html b/www/core/components/user/templates/profile.html
index 2ec7b72f7fd..790295da69b 100644
--- a/www/core/components/user/templates/profile.html
+++ b/www/core/components/user/templates/profile.html
@@ -5,8 +5,8 @@
         <mm-loading hide-until="userLoaded">
             <div class="list" ng-if="user && !isDeleted">
                 <div class="item item-avatar">
-                    <img ng-if="user.profileimageurl" ng-src="{{user.profileimageurl}}" mm-external-content alt="" role="presentation">
-                    <img ng-if="!user.profileimageurl" src="img/user-avatar.png" alt="" role="presentation">
+                    <img ng-if="user.profileimageurl" ng-src="{{user.profileimageurl}}" mm-external-content alt="{{ 'mm.core.pictureof' | translate:{$a: user.fullname} }}" role="presentation">
+                    <img ng-if="!user.profileimageurl" src="img/user-avatar.png" alt="{{ 'mm.core.pictureof' | translate:{$a: user.fullname} }}" role="presentation">
                     <h2><mm-format-text watch="true" clean="true">{{user.fullname}}</mm-format-text></h2>
                 </div>
                 <div class="item item-divider" ng-if="hasContact">