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

CHANGELOG.rst

@@ -79,6 +79,9 @@ key in course settings. (BLD-426)
 
 Blades: Fix bug when the speed can only be changed when the video is playing.
 
+LMS: The dialogs on the wiki "changes" page are now accessible to screen
+readers.  Now all wiki pages have been made accessible. (LMS-1337)
+
 LMS: Change bulk email implementation to use less memory, and to better handle
 duplicate tasks in celery.
 
@@ -95,8 +98,8 @@ client error are correctly passed through to the client.
 LMS: Improve performance of page load and thread list load for
 discussion tab
 
-LMS: The wiki markup cheatsheet dialog is now accessible to people with
-disabilites.  (LMS-1303)
+LMS: The wiki markup cheatsheet dialog is now accessible to screen readers.
+(LMS-1303)
 
 Common: Add skip links for accessibility to CMS and LMS. (LMS-1311)
 

lms/djangoapps/course_wiki/editors.py

@@ -60,5 +60,4 @@ class CodeMirror(BaseEditor):
               "js/vendor/CodeMirror/mitx_markdown.js",
               "js/wiki/accessible.js",
               "js/wiki/CodeMirror.init.js",
-              "js/wiki/cheatsheet.js",
               )

lms/static/js/toggle_login_modal.js

 (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

-$(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;
 

lms/templates/wiki/edit.html

 {% extends "wiki/article.html" %}
-{% load wiki_tags i18n %}
+{% load wiki_tags i18n sekizai_tags %}
 {% load url from future %}
 
 {% block pagetitle %}{% trans "Edit" %}: {{ article.current_revision.title }}{% endblock %}
 
 {% block wiki_contents_tab %}
 
-<form method="POST" class="form-horizontal" id="article_edit_form" enctype="multipart/form-data">
+{% addtoblock "js" %}
+<script type="text/javascript">
+  $(document).ready(
+    function ($) {
+      accessible_modal("#cheatsheetLink", "#cheatsheetModal .close-modal", "#cheatsheetModal", ".content-wrapper");
+      accessible_modal("#previewButton", "#previewModal .close-modal", "#previewModal", ".content-wrapper");
+      $("#previewModalBackToEditor").click(function (e) {
+        $("#previewModal .close-modal").click();
+        e.preventDefault();
+      });
+    }
+  );
+</script>
+{% endaddtoblock %}
+
+<form method="POST" class="form-horizontal" id="article_edit_form" name="article_edit_form" enctype="multipart/form-data">
   {% include "wiki/includes/editor.html" %}
   <div class="form-actions">
       <button type="submit" name="save" value="1" class="btn btn-large btn-primary" onclick="this.form.target=''; this.form.action='{% url 'wiki:edit' path=urlpath.path article_id=article.id %}'">
         <span class="icon-ok"></span>
         {% trans "Save changes" %}
       </button>
-      <button type="submit" name="preview" value="1" class="btn btn-large" onclick="$('#previewModal').modal('show'); this.form.target = 'previewWindow'; this.form.action = '{% url 'wiki:preview' path=urlpath.path article_id=article.id %}';">
+      <a class="btn btn-large" id="previewButton" href="#previewModal" rel="leanModal"
+        onclick="
+          document.article_edit_form.target='previewWindow';
+          document.article_edit_form.action='{% url 'wiki:preview' path=urlpath.path article_id=article.id %}';
+          document.article_edit_form.submit();">
         <span class="icon-eye-open"></span>
         {% trans "Preview" %}
-      </button>
-      
+      </a>
+
       <a href="{% url 'wiki:delete' path=urlpath.path article_id=article.id %}" class="pull-right btn btn-danger">
         <span class="icon-trash"></span>
         {% trans "Delete article" %}
       </a>
-      
+
   </div>
-  <div class="modal hide fade" id="previewModal">
+  <section id="previewModal" class="modal" aria-hidden="true">
+    <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title">
+      <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
+
+      <header>
+        <h2 id="preview-title">{% trans "Wiki Preview" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+        <hr/>
+      </header>
+
     <div class="modal-body">
       <iframe name="previewWindow" frameborder="0"></iframe>
     </div>
@@ -34,16 +61,13 @@
         {% trans "Save changes" %}
       </button>
 
-      <a href="#" class="btn btn-large" data-dismiss="modal">
+      <a id="previewModalBackToEditor" href="#" class="btn btn-large">
         <span class="icon-circle-arrow-left"></span>
         {% trans "Back to editor" %}
       </a>
     </div>
-  </div>
+  </section>
   {% include "wiki/includes/cheatsheet.html" %}
 </form>
 
 {% endblock %}
-
-
-

lms/templates/wiki/includes/cheatsheet.html

@@ -59,7 +59,7 @@
 1. {% trans "Ordered" %}
 2. {% trans "List" %}</pre>
               <pre>
-> {% trans "Quotes" %}</pre>
+&gt; {% trans "Quotes" %}</pre>
           </section>
       </div>