Skip to content
Permalink
Browse files

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.
  • Loading branch information...
sarjona committed Mar 20, 2019
1 parent 318fd40 commit 26e2d21925e15ef2c52cec0e3480ebfec6b77627
@@ -145,6 +145,7 @@
$string['outputnotavailable'] = 'Not available';
$string['outputnotconfigured'] = 'Not configured';
$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';
@@ -233,14 +234,18 @@
$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';
$string['unblockcontact'] = 'Unblock contact';
$string['unblockuser'] = 'Unblock user';
$string['unblockuserconfirm'] = 'Are you sure you want to unblock {$a}?';
$string['unknownuser'] = 'Unknown user';
$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';

Some generated files are not rendered by default. Learn more.

@@ -115,6 +115,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.
@@ -145,6 +148,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');
}
@@ -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}}
@@ -80,7 +80,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}}
@@ -90,6 +90,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>
@@ -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>
@@ -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>
@@ -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>
@@ -38,7 +38,8 @@
<div class="pull-right popover-region collapsed">
<a id="message-drawer-toggle-{{uniqid}}" class="nav-link d-inline-block popover-region-toggle position-relative" href="#">
{{#pix}} t/message, core, {{#str}} togglemessagemenu, 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}} unreadconversations, core_message, {{unreadcount}} {{/str}}">{{unreadcount}}</div>
</a>
</div>

0 comments on commit 26e2d21

Please sign in to comment.
You can’t perform that action at this time.