diff --git a/cms/static/js/spec/views/modals/base_modal_spec.js b/cms/static/js/spec/views/modals/base_modal_spec.js index 2d8d312bbe..6d752ee092 100644 --- a/cms/static/js/spec/views/modals/base_modal_spec.js +++ b/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(); diff --git a/cms/static/js/spec_helpers/modal_helpers.js b/cms/static/js/spec_helpers/modal_helpers.js index 1b546f0b27..9baef14fe8 100644 --- a/cms/static/js/spec_helpers/modal_helpers.js +++ b/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, diff --git a/cms/static/js/views/modals/base_modal.js b/cms/static/js/views/modals/base_modal.js index fb02299484..5ddc1e3099 100644 --- a/cms/static/js/views/modals/base_modal.js +++ b/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; diff --git a/cms/templates/js/basic-modal.underscore b/cms/templates/js/basic-modal.underscore index 95059dd36c..009dd57a32 100644 --- a/cms/templates/js/basic-modal.underscore +++ b/cms/templates/js/basic-modal.underscore @@ -4,10 +4,10 @@ aria-hidden="" role="dialog"> -