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,
@@ -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,33 +81,29 @@
           }
           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(){
+  $(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');
+      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', '');
-          } else {
-              embed.data('src', embed.attr('src') + '?autoplay=1&rel=0');
-              embed.attr('src', '');
-          }
       }
     });
   });

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>
@@ -24,7 +43,15 @@
       </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/history.html

@@ -10,7 +10,7 @@
 <script type="text/javascript" src="{{ STATIC_URL }}wiki/js/diffview.js"></script>
 <script type="text/javascript">
 
-    $( document ).ready(function() {
+    $(document).ready(function() {
         $('.accordion input[disabled!="disabled"][type="radio"]').first().attr('checked', 'true');
 
         $('a.accordion-toggle').click(function(event) {
@@ -41,6 +41,20 @@
                 }
             });
         });
+
+        $(".previewRevisionButton").each(function () {
+            accessible_modal("#"+this.id, "#previewRevisionModal .close-modal", "#previewRevisionModal", ".content-wrapper");
+        });
+        $("#previewRevisionModalBackToHistory").click(function (e) {
+            $("#previewRevisionModal .close-modal").click();
+            e.preventDefault();
+        });
+
+        accessible_modal("#mergeButton", "#mergeModal .close-modal", "#mergeModal", ".content-wrapper");
+        $("#mergeModalBackToHistory").click(function (e) {
+            $("#mergeModal .close-modal").click();
+            e.preventDefault();
+        });
     });
 </script>
 {% endaddtoblock %}
@@ -81,7 +95,7 @@
   {% trans "Click each revision to see a list of edited lines. Click the Preview button to see how the article looked at this stage. At the bottom of this page, you can change to a particular revision or merge an old revision with the current one." %}
 </p>
 
-<form method="GET">
+<form method="GET" name="revisions_form">
   <div class="tab-content" style="overflow: visible;">
     {% for revision in revisions %}
       <div class="accordion" id="accordion{{ revision.revision_number }}">
@@ -107,14 +121,27 @@
             </div>
             <div class="pull-right" style="vertical-align: middle; margin: 8px 3px;">
               {% if not revision == article.current_revision %}
-              <button type="submit" class="btn" onclick="$('#previewModal').modal('show'); this.form.target='previewWindow'; this.form.r.value='{{ revision.id }}'; this.form.action='{% url 'wiki:preview_revision' article.id %}'; $('#previewModal .switch-to-revision').attr('href', '{% url 'wiki:change_revision' path=urlpath.path article_id=article.id revision_id=revision.id %}')">
+                <a class="btn previewRevisionButton"
+                    id="previewRevisionButton{{ revision.revision_number }}"
+                    href="#previewRevisionModal" rel="leanModal"
+                    onclick="
+                      document.revisions_form.target='previewWindow';
+                      document.revisions_form.r.value='{{ revision.id }}';
+                      document.revisions_form.action='{% url 'wiki:preview_revision' article.id %}';
+                      $('#previewRevisionModal .switch-to-revision').attr('href', '{% url 'wiki:change_revision' path=urlpath.path article_id=article.id revision_id=revision.id %}');
+                      document.revisions_form.submit();">
                   <span class="icon-eye-open"></span>
                   {% trans "Preview this revision" %}
-              </button>
-              {% endif %}
+                </a>
 
                 {% if article|can_write:user %}
-              <input type="radio"{% if revision == article.current_revision %} disabled="true"{% endif %} style="margin: 0 10px;" value="{{ revision.id }}" name="revision_id" switch-button-href="{% url 'wiki:change_revision' path=urlpath.path revision_id=revision.id %}" merge-button-href="{% url 'wiki:merge_revision_preview' article_id=article.id revision_id=revision.id %}" merge-button-commit-href="{% url 'wiki:merge_revision' path=urlpath.path article_id=article.id revision_id=revision.id %}" />
+                  <input type="radio" style="margin: 0 10px;" value="{{ revision.id }}" name="revision_id"
+                    switch-button-href="{% url 'wiki:change_revision' path=urlpath.path revision_id=revision.id %}"
+                    merge-button-href="{% url 'wiki:merge_revision_preview' article_id=article.id revision_id=revision.id %}"
+                    merge-button-commit-href="{% url 'wiki:merge_revision' path=urlpath.path article_id=article.id revision_id=revision.id %}"
+                  />
+                {% endif %}
+
               {% endif %}
 
             </div>
@@ -147,33 +174,44 @@
     <div class="form-actions">
       <div class="pull-right">
         {% if article|can_write:user %}
-          <button type="submit" name="preview" value="1" class="btn btn-large" onclick="$('#mergeModal').modal('show'); this.form.target='mergeWindow'; this.form.action=$('input[type=radio]:checked').attr('merge-button-href'); $('.merge-revision-commit').attr('href', $('input[type=radio]:checked').attr('merge-button-commit-href'))">
+          <a class="btn btn-large" id="mergeButton" href="#mergeModal" rel="leanModal"
+            onclick="
+              document.revisions_form.target='mergeWindow';
+              document.revisions_form.action=$('input[type=radio]:checked').attr('merge-button-href');
+              $('.merge-revision-commit').attr('href', $('input[type=radio]:checked').attr('merge-button-commit-href'));
+              document.revisions_form.submit();">
             <span class="icon-random"></span>
             {% trans "Merge selected with current..." %}
-          </button>
+          </a>
         {% else %}
           <button type="submit" disabled="true" name="preview" value="1" class="btn btn-large">
             <span class="icon-lock"></span>
             {% trans "Merge selected with current..." %}
           </button>
         {% endif %}
-        <button type="submit" name="save" value="1" class="btn btn-large btn-primary" onclick="$('#previewModal').modal('show'); this.form.target='previewWindow'; this.form.action=$('input[type=radio]:checked').attr('switch-button-href')">
+        <button type="submit" name="save" value="1" class="btn btn-large btn-primary" onclick="this.form.action=$('input[type=radio]:checked').attr('switch-button-href')">
           <span class="icon-flag"></span>
           {% trans "Switch to selected version" %}
         </button>
       </div>
     </div>
-    
     {% endif %}
 
   </div>
   <input type="hidden" name="r" value="" />
-  <div class="modal hide fade" id="previewModal">
+  <section id="previewRevisionModal" 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 Revision Preview" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+        <hr/>
+      </header>
       <div class="modal-body">
         <iframe name="previewWindow"></iframe>
       </div>
       <div class="modal-footer">
-      <a href="#" class="btn btn-large" data-dismiss="modal">
+      <a id="previewRevisionModalBackToHistory" href="#" class="btn btn-large" data-dismiss="modal">
         <span class="icon-circle-arrow-left"></span>
         {% trans "Back to history view" %}
       </a>
@@ -190,8 +228,16 @@
       {% endif %}
       </div>
     </div>
+  </section>
+
+  <section id="mergeModal" class="modal" aria-hidden="true">
+    <div class="inner-wrapper" role="dialog" aria-labelledby="merge-title">
+      <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
 
-  <div class="modal hide fade" id="mergeModal">
+      <header>
+        <h2 id="merge-title">{% trans "Merge Revision" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+        <hr/>
+      </header>
       <div class="modal-header">
         <h1>{% trans "Merge with current" %}</h1>
         <p class="lead"><span class="icon-info-sign"></span> {% trans "When you merge a revision with the current, all data will be retained from both versions and merged at its approximate location from each revision." %} <strong>{% trans "After this, it's important to do a manual review." %}</strong></p>
@@ -200,7 +246,7 @@
         <iframe name="mergeWindow"></iframe>
       </div>
       <div class="modal-footer">
-      <a href="#" class="btn btn-large" data-dismiss="modal">
+        <a id="mergeModalBackToHistory" href="#" class="btn btn-large" data-dismiss="modal">
           <span class="icon-circle-arrow-left"></span>
           {% trans "Back to history view" %}
         </a>
@@ -217,7 +263,7 @@
         {% endif %}
       </div>
     </div>
+  </div>
 </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>