MDL-85231 message_popup: Add a close button on the notification popover

This follows the recommendation on the ARIA Authoring Practices Guide
(APG) for modal dialogues:
> It is strongly recommended that the tab sequence of all dialogs
> include a visible element with role button that closes the dialog,
such as a close icon or cancel button.

https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

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

@@ -40,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"]',
     };
 
     /**
@@ -360,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();

message/output/popup/templates/notification_popover.mustache

@@ -82,6 +82,9 @@
                aria-label="{{#str}} notificationpreferences, message {{/str}}">
                 {{#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}}