MC-19639: Admin Analytics modal allows user to navigate the admin

- MC-19638: User can dismiss the Admin Analytics modal with ESC key

Author: danielrenaud

app/code/Magento/AdminAnalytics/view/adminhtml/ui_component/admin_usage_notification.xml

@@ -85,7 +85,7 @@
                         <item name="text" xsi:type="string" translate="true"><![CDATA[
                         <p>Help us improve Magento Admin by allowing us to collect usage data.</p>
                         <p>All usage data that we collect for this purpose cannot be used to individually identify you and is used only to improve the Magento Admin and related products and services.</p>
-                        <p>You can learn more and opt out at any time by following the instructions in <a href="https://docs.magento.com/m2/ce/user_guide/stores/admin.html" target="_blank">merchant documentation</a>.</p>
+                        <p>You can learn more and opt out at any time by following the instructions in <a href="https://docs.magento.com/m2/ce/user_guide/stores/admin.html" target="_blank" tabindex="0">merchant documentation</a>.</p>
 ]]></item>
                     </item>
                 </argument>

app/code/Magento/AdminAnalytics/view/adminhtml/web/js/modal/component.js

@@ -20,16 +20,7 @@ define([
                         enableLogAction: '${ $.provider }:data.enableLogAction',
                         disableLogAction: '${ $.provider }:data.disableLogAction'
                     },
-                    options: {
-                        keyEventHandlers: {
-                            /**
-                             * Prevents escape key from exiting out of modal
-                             */
-                            escapeKey: function () {
-                                return;
-                            }
-                        }
-                    },
+                    options: {},
                     notificationWindow: null
                 },
 
@@ -41,11 +32,32 @@ define([
                     this._super();
                 },
 
+                /**
+                 * Configure ESC and TAB so user can't leave modal
+                 * without selecting an option
+                 *
+                 * @returns {Object} Chainable.
+                 */
+                initModalEvents: function () {
+                    this._super();
+                    //Don't allow ESC key to close modal
+                    this.options.keyEventHandlers.escapeKey = function(e){e.preventDefault()};
+                    //Restrict tab action to the modal
+                    this.options.keyEventHandlers.tabKey = this.handleTabKey.bind(this);
+
+                    return this;
+                },
+
                 /**
                  * Once the modal is opened it hides the X
                  */
                 onOpened: function () {
-                    $('.modal-header button.action-close').hide();
+                    $('.modal-header button.action-close').attr("disabled", true).hide();
+
+                    this.focusableElements = $(this.rootSelector).find("a[href], button:enabled");
+                    this.firstFocusableElement = this.focusableElements[0];
+                    this.lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];
+                    this.firstFocusableElement.focus();
                 },
 
                 /**
@@ -104,10 +116,52 @@ define([
                  * Allows admin usage popup to be shown first and then new release notification
                  */
                 openReleasePopup: function () {
-                    var notifiModal = registry.get('release_notification.release_notification.notification_modal_1');
+                    var notificationModal = registry.get('release_notification.release_notification.notification_modal_1');
 
                     if (analyticsPopupConfig.releaseVisible) {
-                        notifiModal.initializeContentAfterAnalytics();
+                        notificationModal.initializeContentAfterAnalytics();
+                    }
+                },
+
+                /**
+                 * Handle Tab and Shift+Tab key event
+                 *
+                 * Keep the tab actions restricted to the popup modal
+                 * so the user must select an option to dismiss the modal
+                 */
+                handleTabKey: function(event) {
+                    var modal = this;
+                    var KEY_TAB = 9;
+
+                    function handleBackwardTab() {
+                        if ( document.activeElement === modal.firstFocusableElement
+                            || document.activeElement === $(modal.rootSelector)[0]
+                        ) {
+                            event.preventDefault();
+                            modal.lastFocusableElement.focus();
+                        }
+                    }
+                    function handleForwardTab() {
+                        if ( document.activeElement === modal.lastFocusableElement) {
+                            event.preventDefault();
+                            modal.firstFocusableElement.focus();
+                        }
+                    }
+
+                    switch(event.keyCode) {
+                        case KEY_TAB:
+                            if ( modal.focusableElements.length === 1 ) {
+                                event.preventDefault();
+                                break;
+                            }
+                            if ( event.shiftKey ) {
+                                handleBackwardTab();
+                                break;
+                            }
+                            handleForwardTab();
+                            break;
+                        default:
+                            break;
                     }
                 }
             }