MDL-85231 message_popup: Add focustrap in message popup

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>

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"]',
@@ -366,12 +368,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.

message/output/popup/templates/notification_popover.mustache

@@ -56,7 +56,11 @@
             {{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}}