MDL-67207 core: Use focus lock manager in modals

lib/amd/src/modal.js

@@ -22,9 +22,17 @@
  * @copyright  2016 Ryan Wyllie <[email protected]>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
-define(['jquery', 'core/templates', 'core/notification', 'core/key_codes',
-        'core/custom_interaction_events', 'core/modal_backdrop', 'core/event', 'core/modal_events'],
-     function($, Templates, Notification, KeyCodes, CustomEvents, ModalBackdrop, Event, ModalEvents) {
+define([
+    'jquery',
+    'core/templates',
+    'core/notification',
+    'core/key_codes',
+    'core/custom_interaction_events',
+    'core/modal_backdrop',
+    'core/event',
+    'core/modal_events',
+    'core/local/aria/focuslock',
+], function($, Templates, Notification, KeyCodes, CustomEvents, ModalBackdrop, Event, ModalEvents, FocusLock) {
 
     var SELECTORS = {
         CONTAINER: '[data-region="modal-container"]',
@@ -114,6 +122,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core/key_codes',
         }
 
         $('body').append(this.root);
+        FocusLock.trapFocus(this.root[0]);
 
         // If we'd cached any JS then we can run it how that the modal is
         // attached to the DOM.
@@ -594,6 +603,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core/key_codes',
      */
     Modal.prototype.hide = function() {
         this.getBackdrop().done(function(backdrop) {
+            FocusLock.untrapFocus();
             if (!this.countOtherVisibleModals()) {
                 // Hide the backdrop if we're the last open modal.
                 backdrop.hide();
@@ -691,31 +701,6 @@ define(['jquery', 'core/templates', 'core/notification', 'core/key_codes',
         this.hiddenSiblings = [];
     };
 
-    /**
-     * Handle the tab event to lock focus within this modal.
-     *
-     * @method handleTabLock
-     * @param {event} e The tab key jQuery event
-     */
-    Modal.prototype.handleTabLock = function(e) {
-        if (!this.hasFocus()) {
-            return;
-        }
-
-        var target = $(document.activeElement);
-        var focusableElements = this.modal.find(SELECTORS.CAN_RECEIVE_FOCUS);
-        var firstFocusable = focusableElements.first();
-        var lastFocusable = focusableElements.last();
-
-        if (target.is(firstFocusable) && e.shiftKey) {
-            lastFocusable.focus();
-            e.preventDefault();
-        } else if (target.is(lastFocusable) && !e.shiftKey) {
-            firstFocusable.focus();
-            e.preventDefault();
-        }
-    };
-
     /**
      * Set up all of the event handling for the modal.
      *
@@ -727,9 +712,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core/key_codes',
                 return;
             }
 
-            if (e.keyCode == KeyCodes.tab) {
-                this.handleTabLock(e);
-            } else if (e.keyCode == KeyCodes.escape) {
+            if (e.keyCode == KeyCodes.escape) {
                 this.hide();
             }
         }.bind(this));