Make remaining dialogs in wiki accessible.

All the dialogs in the wiki are now accessible to screen readers.

Also, the "Switch to selected version" button did the odd thing of
reloading the page with the new version selected, but inside a dialog.
That is now fixed.

The merge dialog has a warning that looks kind of funky still, but you
can read it, unlike the previous code.

LMS-1337

lms/static/js/toggle_login_modal.js

@@ -1,5 +1,15 @@
 (function($){
   $.fn.extend({
+    /*
+     * leanModal prepares an element to be a modal dialog.  Call it once on the
+     * element that launches the dialog, when the page is ready.  This function
+     * will add a .click() handler that properly opens the dialog.
+     *
+     * The launching element must:
+     *   - be an <a> element, not a button,
+     *   - have an href= attribute identifying the id of the dialog element,
+     *   - have rel='leanModal'.
+     */
     leanModal: function(options) {
       var defaults = {
         top: 100,
@@ -13,7 +23,7 @@
         $("body").append(overlay);
       }
 
-      options =  $.extend(defaults, options);
+      options = $.extend(defaults, options);
 
       return this.each(function() {
         var o = options;
@@ -23,7 +33,7 @@
           $(".modal").hide();
 
           var modal_id = $(this).attr("href");
-          
+
           if ($(modal_id).hasClass("video-modal")) {
             //Video modals need to be cloned before being presented as a modal
             //This is because actions on the video get recorded in the history.
@@ -34,13 +44,12 @@
             modal_id = '#modal_clone';
           }
 
-
-          $("#lean_overlay").click(function() {
-             close_modal(modal_id);
+          $("#lean_overlay").click(function(e) {
+            close_modal(modal_id, e);
           });
 
-          $(o.closeButton).click(function() {
-             close_modal(modal_id);
+          $(o.closeButton).click(function(e) {
+            close_modal(modal_id, e);
           });
 
           var modal_height = $(modal_id).outerHeight();
@@ -72,34 +81,30 @@
           }
           window.scrollTo(0, 0);
           e.preventDefault();
-
         });
       });
 
-      function close_modal(modal_id){
+      function close_modal(modal_id, e) {
         $("#lean_overlay").fadeOut(200);
         $('iframe', modal_id).attr('src', '');
         $(modal_id).css({ 'display' : 'none' });
         if (modal_id == '#modal_clone') {
           $(modal_id).remove();
         }
+        e.preventDefault();
       }
     }
   });
 
-  $(document).ready(function($) {
-      $("a[rel*=leanModal]").each(function(){
-        $(this).leanModal({ top : 120, overlay: 1, closeButton: ".close-modal", position: 'absolute' });
-        embed = $($(this).attr('href')).find('iframe')
-        if(embed.length > 0) {
-          if(embed.attr('src').indexOf("?") > 0) {
-              embed.data('src', embed.attr('src') + '&autoplay=1&rel=0');
-              embed.attr('src', '');
-          } else {
-              embed.data('src', embed.attr('src') + '?autoplay=1&rel=0');
-              embed.attr('src', '');
-          }
-        }
-      });
+  $(document).ready(function ($) {
+    $("a[rel*=leanModal]").each(function () {
+      $(this).leanModal({ top : 120, overlay: 1, closeButton: ".close-modal", position: 'absolute' });
+      embed = $($(this).attr('href')).find('iframe')
+      if (embed.length > 0 && embed.attr('src')) {
+        var sep = (embed.attr('src').indexOf("?") > 0) ? '&' : '?';
+        embed.data('src', embed.attr('src') + sep + 'autoplay=1&rel=0');
+        embed.attr('src', '');
+      }
+    });
   });
 })(jQuery);

lms/static/js/wiki/cheatsheet.js

@@ -1,6 +0,0 @@
-$(document).ready(function () {
-    $('#cheatsheetLink').click(function() {
-        $('#cheatsheetModal').leanModal();
-    });
-    accessible_modal("#cheatsheetLink", "#cheatsheetModal .close-modal", "#cheatsheetModal", ".content-wrapper");
-});

lms/static/sass/course/wiki/_wiki.scss

@@ -536,8 +536,12 @@ section.wiki {
     }
 
     .modal-header {
+      border: 1px solid $danger-red;
+      padding: ($baseline/2) ($baseline/2) 0 ($baseline/2);
+      margin-bottom: ($baseline/2);
+
       h1, p {
-        color: #fff;
+        color: $base-font-color;
       }
 
       h1 {

lms/static/sass/shared/_modal.scss

@@ -59,7 +59,7 @@
     overflow: hidden;
     padding-left: 10px;
     padding-right: 10px;
-    padding-bottom: 30px;
+    padding-bottom: 10px;
     position: relative;
     z-index: 2;
 
@@ -136,7 +136,7 @@
 
     form {
       margin-bottom: 12px;
-      padding: 0px 40px;
+      padding: 0px 40px 20px;
       position: relative;
       z-index: 2;