Commit 2bea68fc by Chris Rodriguez

Sending focus to modal in CMS

parent dccc36a4
......@@ -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();
......
......@@ -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,
......
......@@ -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;
......
......@@ -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>
......
<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">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment