Merge branch 'MDL-84824-500' of https://github.com/stevandoMoodle/moodle into MOODLE_500_STABLE

lang/en/message.php

@@ -137,6 +137,7 @@ $string['notificationwindow'] = 'Notification window';
 $string['notificationpreferences'] = 'Notification preferences';
 $string['notificationimage'] = 'Notification image';
 $string['notifications'] = 'Notifications';
+$string['notificationsmarkedasread'] = 'All notifications have been marked as read';
 $string['notincontactsheading'] = '{$a} is not in your contacts';
 $string['notincontacts'] = 'You need to add {$a} to your contacts to be able to send them messages.';
 $string['notsupported'] = 'Not supported';

message/output/popup/amd/src/notification_popover_controller.js

@@ -37,6 +37,7 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/str', 'core/url',
         NOTIFICATION_LINK: '[data-action="content-item-link"]',
         EMPTY_MESSAGE: '[data-region="empty-message"]',
         COUNT_CONTAINER: '[data-region="count-container"]',
+        NOTIFICATION_READ_FEEDBACK: '[data-region="notification-read-feedback"]',
     };
 
     /**
@@ -313,6 +314,12 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/str', 'core/url',
             .then(function() {
                 this.unreadCount = 0;
                 this.root.find(SELECTORS.UNREAD_NOTIFICATION).removeClass('unread');
+
+                // Set the ARIA live region's contents with the feedback.
+                const readFeedback = this.root.get(0).querySelector(SELECTORS.NOTIFICATION_READ_FEEDBACK);
+                Str.get_string('notificationsmarkedasread', 'message').done((notificationsmarkedasread) => {
+                    readFeedback.innerHTML = notificationsmarkedasread;
+                });
             }.bind(this))
             .always(function() {
                 this.markAllReadButton.removeClass('loading');
@@ -331,7 +338,10 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/str', 'core/url',
 
         // Mark all notifications read if the user activates the mark all as read button.
         this.root.on(CustomEvents.events.activate, SELECTORS.MARK_ALL_READ_BUTTON, function(e, data) {
-            this.markAllAsRead();
+            if (this.unreadCount > 0) {
+                this.markAllAsRead();
+            }
+
             e.stopPropagation();
             data.originalEvent.preventDefault();
         }.bind(this));

message/output/popup/templates/notification_popover.mustache

@@ -69,6 +69,8 @@
            aria-label="{{#str}} markallread {{/str}}">
             <span class="normal-icon">{{#pix}} t/markasread, core {{/pix}}</span>
             {{> core/loading }}
+            {{! Records notifications being marked as read state message. }}
+            <span aria-live="polite" class="visually-hidden" data-region="notification-read-feedback"></span>
         </a>
         {{# urls.preferences }}
             <a href="{{{ . }}}"