MDL-65127 message: add aria-labels to the numbers in the overview

Add aria-label to the unread message and notification icons.
Add aria-label to the total conversations, unread conversations
and unread messages in the overview.
Add aria-label to the pending contact requests in the overview
and also in the contacts tab.
Add aria-hidden to the last message date.

lang/en/message.php

@@ -139,6 +139,7 @@
 $string['otherparticipants'] = 'Other participants';
 $string['outputnotavailable'] = 'Not available';
 $string['participants'] = 'Participants';
+$string['pendingcontactrequests'] = 'There are {$a} pending contact requests';
 $string['permitted'] = 'Permitted';
 $string['privacy'] = 'Privacy';
 $string['privacy_desc'] = 'You can restrict who can message you';
@@ -229,6 +230,7 @@
 $string['shownotificationwindowwithcount'] = 'Show notification window with {$a} new notifications';
 $string['togglenotificationmenu'] = 'Toggle notifications menu';
 $string['togglemessagemenu'] = 'Toggle messaging drawer';
+$string['totalconversations'] = '{$a} total conversations';
 $string['touserdoesntexist'] = 'You can not send a message to a user id ({$a}) that doesn\'t exist';
 $string['unabletomessage'] = 'You are unable to message this user';
 $string['unblock'] = 'Unblock';
@@ -237,7 +239,10 @@
 $string['unblockuserconfirm'] = 'Are you sure you want to unblock {$a}?';
 $string['unknownuser'] = 'Unknown user';
 $string['unmuteconversation'] = 'Unmute';
+$string['unreadconversations'] = 'There are {$a} unread conversations';
+$string['unreadmessages'] = 'There are {$a} unread messages';
 $string['unreadnotification'] = 'Unread notification: {$a}';
+$string['unreadnotifications'] = 'There are {$a} unread notifications';
 $string['unreadnewgroupconversationmessage'] = 'New message from {$a->name} in {$a->conversationname}';
 $string['unreadnewmessage'] = 'New message from {$a}';
 $string['useentertosend'] = 'Use enter to send';

message/amd/src/message_drawer_view_overview_section.js

@@ -116,6 +116,9 @@ function(
         var countElement = container.find(SELECTORS.SECTION_TOTAL_COUNT);
         countElement.text(count);
         container.removeClass('hidden');
+        Str.get_string('totalconversations', 'core_message', count).done(function(string) {
+            container.attr('aria-label', string);
+        });
 
         var numPlaceholders = count > 20 ? 20 : count;
         // Array of "true" up to the number of placeholders we want.
@@ -146,6 +149,10 @@ function(
         var countElement = root.find(SELECTORS.SECTION_UNREAD_COUNT);
         countElement.text(count);
 
+        Str.get_string('unreadconversations', 'core_message', count).done(function(string) {
+            countElement.attr('aria-label', string);
+        });
+
         if (count > 0) {
             countElement.removeClass('hidden');
         }

message/output/popup/templates/notification_popover.mustache

@@ -45,7 +45,8 @@
     {{$togglelabel}}{{#str}} shownotificationwindownonew, message {{/str}}{{/togglelabel}}
     {{$togglecontent}}
         {{#pix}} i/notifications, core, {{#str}} togglenotificationmenu, message {{/str}} {{/pix}}
-        <div class="count-container {{^unreadcount}}hidden{{/unreadcount}}" data-region="count-container">{{unreadcount}}</div>
+        <div class="count-container {{^unreadcount}}hidden{{/unreadcount}}" data-region="count-container"
+        aria-label="{{#str}} unreadnotifications, core_message, {{unreadcount}} {{/str}}">{{unreadcount}}</div>
     {{/togglecontent}}
 
     {{$containerlabel}}{{#str}} notificationwindow, message {{/str}}{{/containerlabel}}

message/templates/message_drawer_conversations_list.mustache

@@ -83,7 +83,7 @@
         <div class="d-flex align-self-stretch">
             <div
                 class="px-2 py-1 small position-absolute position-right text-muted {{^lastmessagedate}}hidden{{/lastmessagedate}}"
-                data-region="last-message-date"
+                data-region="last-message-date" aria-hidden="true"
             >
                 {{#lastmessagedate}}
                     {{#userdate}} {{.}}, {{#str}} strftimetime24, core_langconfig  {{/str}} {{/userdate}}
@@ -93,6 +93,7 @@
                 <span
                     class="badge badge-pill badge-primary bg-primary {{^unreadcount}}hidden{{/unreadcount}}"
                     data-region="unread-count"
+                    aria-label="{{#str}} unreadmessages, core_message, {{unreadcount}} {{/str}}"
                 >
                     {{unreadcount}}
                 </span>

message/templates/message_drawer_view_contacts_body.mustache

@@ -64,7 +64,9 @@
                         aria-selected="false"
                     >
                         {{#str}} requests {{/str}}
-                        <span class="badge bg-primary ml-2 {{^contactrequestcount}}hidden{{/contactrequestcount}}" data-region="contact-request-count">
+                        <span class="badge bg-primary ml-2 {{^contactrequestcount}}hidden{{/contactrequestcount}}"
+                        data-region="contact-request-count"
+                        aria-label="{{#str}} pendingcontactrequests, core_message, {{contactrequestcount}} {{/str}}">
                             {{contactrequestcount}}
                         </span>
                     </a>

message/templates/message_drawer_view_overview_header.mustache

@@ -63,7 +63,9 @@
         <a href="#" data-route="view-contacts">
             {{#pix}} i/user, core {{/pix}}
             {{#str}} contacts, core_message {{/str}}
-            <span class="badge bg-primary ml-2 {{^contactrequestcount}}hidden{{/contactrequestcount}}" data-region="contact-request-count">
+            <span class="badge bg-primary ml-2 {{^contactrequestcount}}hidden{{/contactrequestcount}}"
+            data-region="contact-request-count"
+            aria-label="{{#str}} pendingcontactrequests, core_message, {{contactrequestcount}} {{/str}}">
                 {{contactrequestcount}}
             </span>
         </a>

message/templates/message_drawer_view_overview_section.mustache

@@ -54,13 +54,16 @@
                 {{#pix}} t/expanded, core {{/pix}}
             </span>
             <span class="font-weight-bold">{{$title}}{{/title}}</span>
-            <small class="hidden ml-1" data-region="section-total-count-container">
+            <small class="hidden ml-1" data-region="section-total-count-container"
+            aria-label="{{#str}} totalconversations, core_message, {{count.total}} {{/str}}">
                 (<span data-region="section-total-count">{{count.total}}</span>)
             </small>
             <span class="hidden ml-2" data-region="loading-icon-container">
                 {{> core/loading }}
             </span>
-            <span class="{{^count.unread}}hidden{{/count.unread}} badge badge-pill badge-primary ml-auto bg-primary" data-region="section-unread-count">
+            <span class="{{^count.unread}}hidden{{/count.unread}} badge badge-pill badge-primary ml-auto bg-primary"
+            data-region="section-unread-count"
+            {{#count.unread}}aria-label="{{#str}} unreadconversations, core_message, {{count.unread}} {{/str}}"{{/count.unread}}>
                 {{count.unread}}
             </span>
         </button>