Sending focus to modal in CMS

cms/static/js/spec/views/modals/base_modal_spec.js

@@ -31,6 +31,16 @@ define(["jquery", "underscore", "js/views/modals/base_modal", "js/spec_helpers/m
                     expect(ModelHelpers.isShowingModal(modal)).toBeTruthy();
                 });
 
+                it('sends focus to the modal window after show is called', function() {
+                    showMockModal();
+                    waitsFor(function () {
+                        // This is the implementation of "toBeFocused". However, simply calling that method
+                        // with no wait seems to be flaky.
+                        var modalWindow = ModelHelpers.getModalWindow(modal);
+                        return $(modalWindow)[0] === $(modalWindow)[0].ownerDocument.activeElement;
+                    }, 'Modal Window did not get focus', 5000);
+                });
+
                 it('is removed after hide is called', function () {
                     showMockModal();
                     modal.hide();

cms/static/js/spec_helpers/modal_helpers.js

@@ -3,8 +3,8 @@
  */
 define(["jquery", "common/js/spec_helpers/template_helpers", "js/spec_helpers/view_helpers"],
     function($, TemplateHelpers, ViewHelpers) {
-        var installModalTemplates, getModalElement, getModalTitle, isShowingModal, hideModalIfShowing,
-            pressModalButton, cancelModal, cancelModalIfShowing;
+        var installModalTemplates, getModalElement, getModalWindow, getModalTitle, isShowingModal, 
+            hideModalIfShowing, pressModalButton, cancelModal, cancelModalIfShowing;
 
         installModalTemplates = function(append) {
             ViewHelpers.installViewTemplates(append);
@@ -22,6 +22,11 @@ define(["jquery", "common/js/spec_helpers/template_helpers", "js/spec_helpers/vi
             return modalElement;
         };
 
+        getModalWindow = function(modal) {
+            var modalElement = getModalElement(modal);
+            return modalElement.find('.modal-window');
+        };
+
         getModalTitle = function(modal) {
             var modalElement = getModalElement(modal);
             return modalElement.find('.modal-window-title').text();
@@ -58,6 +63,7 @@ define(["jquery", "common/js/spec_helpers/template_helpers", "js/spec_helpers/vi
 
         return $.extend(ViewHelpers, {
             'getModalElement': getModalElement,
+            'getModalWindow': getModalWindow,
             'getModalTitle': getModalTitle,
             'installModalTemplates': installModalTemplates,
             'isShowingModal': isShowingModal,

cms/static/js/views/modals/base_modal.js

@@ -34,6 +34,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview"],
                 modalType: 'generic',
                 modalSize: 'lg',
                 title: '',
+                modalWindowClass: '.modal-window',
                 // A list of class names, separated by space.
                 viewSpecificClasses: ''
             }),
@@ -46,7 +47,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview"],
                 if (parent) {
                     parentElement = parent.$el;
                 } else if (!parentElement) {
-                    parentElement = this.$el.closest('.modal-window');
+                    parentElement = this.$el.closest(this.options.modalWindowClass);
                     if (parentElement.length === 0) {
                         parentElement = $('body');
                     }
@@ -87,6 +88,10 @@ define(["jquery", "underscore", "gettext", "js/views/baseview"],
                 this.render();
                 this.resize();
                 $(window).resize(_.bind(this.resize, this));
+
+                // after showing and resizing, send focus
+                var modal = this.$el.find(this.options.modalWindowClass);
+                modal.focus();
             },
 
             hide: function() {
@@ -132,7 +137,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview"],
              * Returns the action bar that contains the modal's action buttons.
              */
             getActionBar: function() {
-                return this.$('.modal-window > div > .modal-actions');
+                return this.$(this.options.modalWindowClass + ' > div > .modal-actions');
             },
 
             /**
@@ -146,7 +151,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview"],
                 var top, left, modalWindow, modalWidth, modalHeight,
                     availableWidth, availableHeight, maxWidth, maxHeight;
 
-                modalWindow = this.$('.modal-window');
+                modalWindow = this.$el.find(this.options.modalWindowClass);
                 availableWidth = $(window).width();
                 availableHeight = $(window).height();
                 maxWidth = availableWidth * 0.80;

cms/templates/js/basic-modal.underscore

@@ -4,10 +4,10 @@
      aria-hidden=""
      role="dialog">
     <div class="modal-window-overlay"></div>
-    <div class="modal-window <%= viewSpecificClasses %> modal-<%= size %> modal-type-<%= type %>">
+    <div class="modal-window <%= viewSpecificClasses %> modal-<%= size %> modal-type-<%= type %>" tabindex="-1" aria-labelledby="modal-window-title">
         <div class="<%= name %>-modal">
             <div class="modal-header">
-                <h2 class="title modal-window-title"><%= title %></h2>
+                <h2 id="modal-window-title" class="title modal-window-title"><%= title %></h2>
                 <ul class="editor-modes action-list action-modes">
                 </ul>
             </div>

cms/templates/ux/reference/modal_access-component.html

@@ -1,9 +1,9 @@
 <div class="wrapper wrapper-modal-window wrapper-modal-window-edit-xblock" aria-describedby="modal-window-description" aria-labelledby="modal-window-title" aria-hidden="" role="dialog">
   <div class="modal-window-overlay"></div>
-  <div class="modal-window confirm modal-med modal-type-html modal-editor" style="top: 50px; left: 400px;">
+  <div class="modal-window confirm modal-med modal-type-html modal-editor" style="top: 50px; left: 400px;" tabindex="-1" aria-labelledby="modal-window-title">
     <div class="edit-xblock-modal">
       <div class="modal-header">
-        <h2 class="title modal-window-title">Editing visibility for: [Component Name]</h2>
+        <h2 id="modal-window-title" class="title modal-window-title">Editing visibility for: [Component Name]</h2>
       </div>
 
       <div class="modal-content">