MOBILE-1509 accessibility: Improve accessibility of user pictures

Author: dpalou

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>

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>

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>

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>

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

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>

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>

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>

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>

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>