Merge branch 'MDL-85231-main' of https://github.com/junpataleta/moodle

public/lib/templates/popover_region.mustache

@@ -53,7 +53,7 @@
         data-region="popover-region-container"
         aria-hidden="true"
         aria-label="{{$containerlabel}}{{/containerlabel}}"
-        role="region">
+        role="{{$containerrole}}region{{/containerrole}}">
         <div class="popover-region-header-container">
             <h3 class="popover-region-header-text" data-region="popover-region-header-text">{{$headertext}}{{/headertext}}</h3>
             <div class="popover-region-header-actions" data-region="popover-region-header-actions">{{$headeractions}}{{/headeractions}}</div>

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

@@ -25,9 +25,11 @@
  */
 define(['jquery', 'core/ajax', 'core/templates', 'core/str', 'core/url',
             'core/notification', 'core/custom_interaction_events', 'core/popover_region_controller',
-            'message_popup/notification_repository', 'message_popup/notification_area_events'],
+            'message_popup/notification_repository', 'message_popup/notification_area_events',
+            'core/local/aria/focuslock',
+        ],
         function($, Ajax, Templates, Str, URL, DebugNotification, CustomEvents,
-            PopoverController, NotificationRepo, NotificationAreaEvents) {
+            PopoverController, NotificationRepo, NotificationAreaEvents, FocusLock) {
 
     var SELECTORS = {
         MARK_ALL_READ_BUTTON: '[data-action="mark-all-read"]',
@@ -38,6 +40,7 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/str', 'core/url',
         EMPTY_MESSAGE: '[data-region="empty-message"]',
         COUNT_CONTAINER: '[data-region="count-container"]',
         NOTIFICATION_READ_FEEDBACK: '[data-region="notification-read-feedback"]',
+        CLOSE_NOTIFICATION_POPOVER: '[data-action="close-notification-popover"]',
     };
 
     /**
@@ -358,6 +361,12 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/str', 'core/url',
             e.stopPropagation();
         }.bind(this));
 
+        this.root.on(CustomEvents.events.activate, SELECTORS.CLOSE_NOTIFICATION_POPOVER, function(e) {
+            e.preventDefault();
+            $(this.root).trigger(CustomEvents.events.escape);
+            e.stopPropagation();
+        }.bind(this));
+
         // Update the notification information when the menu is opened.
         this.root.on(this.events().menuOpened, function() {
             this.hideUnreadCount();
@@ -366,12 +375,19 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/str', 'core/url',
             if (!this.hasDoneInitialLoad()) {
                 this.loadMoreNotifications();
             }
+
+            // Lock focus to the popover when it is opened, it is the parent of the container.
+            const contentContainer = this.getContentContainer()[0].parentNode;
+            FocusLock.trapFocus(contentContainer);
+
         }.bind(this));
 
         // Update the unread notification count when the menu is closed.
         this.root.on(this.events().menuClosed, function() {
             this.renderUnreadCount();
             this.updateButtonAriaLabel();
+            // Lock focus to the popover when it is opened, it is the parent of the container.
+            FocusLock.untrapFocus();
         }.bind(this));
 
         // Set aria attributes when popover is loading.

public/message/output/popup/templates/notification_popover.mustache

@@ -56,12 +56,16 @@
             {{unreadcount}}
         </div>
     {{/togglecontent}}
-
+    {{$containerrole}}dialog{{/containerrole}}
+    {{$containerattributes}}
+        aria-modal="true"
+        tabindex="-1"
+    {{/containerattributes}}
     {{$containerlabel}}{{#str}} notificationwindow, message {{/str}}{{/containerlabel}}
 
     {{$headertext}}{{#str}} notifications, message {{/str}}{{/headertext}}
     {{$headeractions}}
-        <a class="mark-all-read-button"
+        <a class="mark-all-read-button btn btn-sm btn-link m-0 py-0 icon-no-margin"
            href="#"
            title="{{#str}} markallread {{/str}}"
            data-action="mark-all-read"
@@ -75,9 +79,13 @@
         {{# urls.preferences }}
             <a href="{{{ . }}}"
                title="{{#str}} notificationpreferences, message {{/str}}"
-               aria-label="{{#str}} notificationpreferences, message {{/str}}">
+               aria-label="{{#str}} notificationpreferences, message {{/str}}"
+               class="btn btn-sm btn-link m-0 py-0 icon-no-margin" >
                 {{#pix}} i/settings, core {{/pix}}</a>
         {{/ urls.preferences }}
+        <button type="button" class="btn btn-sm btn-link m-0 py-0 icon-no-margin" aria-label="{{#str}}closebuttontitle{{/str}}" title="{{#str}}closebuttontitle{{/str}}" data-action="close-notification-popover">
+            {{#pix}}i/window_close{{/pix}}
+        </button>
     {{/headeractions}}
 
     {{$content}}