Merge pull request #14421 from edx/christina/wiki

Wiki accessibility fixes.

lms/static/js/wiki/CodeMirror.init.js

@@ -10,6 +10,12 @@ $(document).ready(function() {
   // Store the inital contents so we can compare for unsaved changes
     var initial_contents = editor.getValue();
 
+    // The Wiki associates a label with the text area that has ID "id_content". However, when we swap in
+    // CodeMirror, that text area is hidden. We need to associate the label with visible CodeMirror text area
+    // (and there is JS code in the wiki that depends on "id_content" interact with the content, so we have
+    // to leave that alone).
+    editor.getInputField().setAttribute('id', 'id_codemirror_content');
+    $(".control-label[for='id_content']")[0].setAttribute('for', 'id_codemirror_content');
     window.onbeforeunload = function askConfirm() { // Warn the user before they navigate away
         if (editor.getValue() != initial_contents) {
             return 'You have made changes to the article that have not been saved yet.';

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

@@ -1,5 +1,4 @@
-section.wiki {
-  padding-top: 25px;
+.wiki-wrapper section.wiki {
 
   .pull-left {
     float: left;
@@ -9,20 +8,17 @@ section.wiki {
     float: right;
   }
 
-  .wiki-wrapper {
-    @include clearfix();
+  @include clearfix();
 
-    > header {
-      height: 33px;
-      padding: 24px 0 26px;
-      border-bottom: 1px solid $gray-l3;
-      border-radius: 3px 3px 0 0;
-      background-color: $sidebar-color;
-    }
+  .breadcrumbs-header {
+    height: 33px;
+    padding: 24px 0 26px;
+    border-bottom: 1px solid $gray-l3;
+    border-radius: 3px 3px 0 0;
+    background-color: $sidebar-color;
   }
 
 
-
   /*-----------------
 
     Breadcrumbs
@@ -126,10 +122,6 @@ section.wiki {
 
   -----------------*/
 
-  .article-wrapper {
-
-  }
-
   h1 {
     font-weight: bold;
     letter-spacing: 0;
@@ -238,7 +230,7 @@ section.wiki {
 
       .label {
         font-size: 0.7em;
-        color: #aaa;
+        color: $uxpl-gray-base;
         text-transform: uppercase;
       }
 
@@ -261,8 +253,8 @@ section.wiki {
         line-height: 25px;
 
         &:hover, &:focus {
-          background-color: $gray-l6;
-          text-decoration: none;
+          color: $uxpl-blue-hover-active;
+          font-weight: bold;
         }
       }
     }
@@ -276,9 +268,11 @@ section.wiki {
     li {
       &.active {
         a {
-          color: $link-color;
+          color: $uxpl-blue-hover-active;
           font-weight: bold;
-          background-color: $gray-l4;
+          background-color: $light-gray1;
+          border-color: $uxpl-blue-hover-active;
+          border-left: 4px solid
         }
       }
     }
@@ -301,8 +295,8 @@ section.wiki {
       }
 
       &:hover, &:focus {
-        background-color: $gray-l6;
-        text-decoration: none;
+        color: $uxpl-blue-hover-active;
+        font-weight: bold;
       }
     }
   }
@@ -322,7 +316,7 @@ section.wiki {
     font-weight: bold;
     font-style: normal;
     text-transform: uppercase;
-    color: #aaa;
+    color: $uxpl-gray-base;
   }
 
   input {
@@ -380,7 +374,7 @@ section.wiki {
       left: 7px;
       font-family: $sans-serif;
       font-size: 0.75em;
-      color: #aaa;
+      color: $uxpl-gray-base;
       pointer-events: none;
     }
   }
@@ -422,7 +416,7 @@ section.wiki {
     }
 
     &.btn-primary {
-      @include button;
+      @include button(simple, $btn-default-color);
       font-size: 0.8em;
     }
 
@@ -606,7 +600,7 @@ section.wiki {
 
   .accordion small {
     font-size: 0.8em;
-    color: #aaa;
+    color: $uxpl-gray-base;
   }
 
   .accordion-toggle div {
@@ -747,7 +741,7 @@ section.wiki {
 
     + p {
       font-size: 0.9em;
-      color: #aaa;
+      color: $uxpl-gray-base;
     }
   }
 
@@ -757,7 +751,7 @@ section.wiki {
     font-size: .9em;
 
     a {
-      color: #aaa;
+      color: $uxpl-gray-base;
 
       &:hover, &:focus {
         color: #777;
@@ -831,7 +825,7 @@ section.wiki {
         float: right;
         font-size: 0.6em;
         line-height: 20px;
-        color: #aaa;
+        color: $uxpl-gray-base;
       }
     }
 

lms/templates/wiki/base.html

@@ -56,29 +56,31 @@
   {% endwith %}
   {% endif %}
 
-<main id="main" aria-label="Content" tabindex="-1">
-  <section class="container wiki {{ selected_tab }}" id="wiki-content">
-    <div class="wiki-wrapper">
-      {% block wiki_body %}
+<div class="container">
+  <div class="wiki-wrapper">
+    <main id="main" aria-label="Content" tabindex="-1">
+      <section class="wiki {{ selected_tab }}" id="wiki-content">
+        {% block wiki_body %}
 
-        {% block wiki_breadcrumbs %}{% endblock %}
+          {% block wiki_breadcrumbs %}{% endblock %}
 
-        {% if messages %}
-          {% for message in messages %}
-            <div class="alert alert-{{ message.tags }}">
-              <a class="close" data-dismiss="alert" href="#">&times;</a>
-              {{ message }}
-            </div>
-          {% endfor %}
-        {% endif %}
+          {% if messages %}
+            {% for message in messages %}
+              <div class="alert alert-{{ message.tags }}">
+                <a class="close" data-dismiss="alert" href="#">&times;</a>
+                {{ message }}
+              </div>
+            {% endfor %}
+          {% endif %}
 
-        {% block wiki_contents %}{% endblock %}
+          {% block wiki_contents %}{% endblock %}
 
-      {% endblock %}
-    </div>
+        {% endblock %}
 
-  </section>
-</main>
+      </section>
+    </main>
+  </div>
+</div>
 
 {% endblock %}
 {% endwith %}

lms/templates/wiki/edit.html

@@ -43,8 +43,8 @@
       </a>
 
   </div>
-  <section id="previewModal" class="modal" aria-hidden="true">
-    <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title">
+  <div id="previewModal" class="modal" aria-hidden="true">
+    <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title" aria-modal=true>
       <button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button>
 
       <header>
@@ -52,21 +52,23 @@
         <hr/>
       </header>
 
-    <div class="modal-body">
-      <iframe name="previewWindow" frameborder="0"></iframe>
-    </div>
-    <div class="modal-footer">
-      <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 fa fa-check-square-o" aria-hidden="true"></span>
-        {% trans "Save changes" %}
-      </button>
 
-      <a id="previewModalBackToEditor" href="#" class="btn btn-large">
-        <span class="icon fa fa-circle-arrow-left" aria-hidden="true"></span>
-        {% trans "Back to editor" %}
-      </a>
+      <div class="modal-body">
+        <iframe name="previewWindow" frameborder="0"></iframe>
+      </div>
+      <div class="modal-footer">
+        <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 fa fa-check-square-o" aria-hidden="true"></span>
+          {% trans "Save changes" %}
+        </button>
+
+        <a id="previewModalBackToEditor" href="#" class="btn btn-large">
+          <span class="icon fa fa-circle-arrow-left" aria-hidden="true"></span>
+          {% trans "Back to editor" %}
+        </a>
+      </div>
     </div>
-  </section>
+  </div>
   {% include "wiki/includes/cheatsheet.html" %}
 </form>
 

lms/templates/wiki/history.html

@@ -199,8 +199,8 @@
 
   </div>
   <input type="hidden" name="r" value="" />
-  <section id="previewRevisionModal" class="modal" aria-hidden="true">
-    <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title">
+  <div id="previewRevisionModal" class="modal" aria-hidden="true">
+    <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title" aria-modal=true>
       <button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button>
 
       <header>
@@ -228,10 +228,10 @@
       {% endif %}
       </div>
     </div>
-  </section>
+  </div>
 
-  <section id="mergeModal" class="modal" aria-hidden="true">
-    <div class="inner-wrapper" role="dialog" aria-labelledby="merge-title">
+  <div id="mergeModal" class="modal" aria-hidden="true">
+    <div class="inner-wrapper" role="dialog" aria-labelledby="merge-title" aria-modal=true>
       <button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button>
 
       <header>

lms/templates/wiki/includes/breadcrumbs.html

@@ -6,7 +6,8 @@
 %>
 
 %if urlpath is not Undefined and urlpath:
-<header>
+<header class="breadcrumbs-header">
+  <h2 class="sr">${_("Course Wiki")}</h2>
   <ul class="breadcrumb pull-left" class="">
     <%
       # The create button links to the highest ancestor we have edit priveleges to

lms/templates/wiki/includes/cheatsheet.html

@@ -1,6 +1,6 @@
 {% load i18n %}
-<section id="cheatsheetModal" class="modal" aria-hidden="true">
-  <div class="inner-wrapper" role="dialog" aria-labelledby="cheatsheet-title">
+<div id="cheatsheetModal" class="modal" aria-hidden="true">
+  <div class="inner-wrapper" role="dialog" aria-labelledby="cheatsheet-title" aria-modal=true>
     <button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button>
 
     <header>
@@ -60,4 +60,4 @@ http://wikipedia.org
 
     </div>
   </div>
-</section>
+</div>

lms/templates/wiki/includes/editor.html

@@ -9,34 +9,3 @@
   });
 </script>
 </div>
-
-<div>
-  <div>
-    {% for plugin in sidebar %}
-
-    <div class="accordion" id="accordion_{{ plugin.slug }}">
-
-      <div class="accordion-group">
-        
-        <div class="accordion-heading">
-          <a class="accordion-toggle" href="#collapse_{{ plugin.slug }}" data-toggle="collapse">
-            <h2>{{ plugin.sidebar.headline }} <span class="{{ plugin.sidebar.icon_class }}"></span></h2>
-          </a>
-        </div>
-        
-        <div id="collapse_{{ plugin.slug }}" class="accordion-body collapse{% if form_images.errors %} in{% endif %}">
-          <div class="accordion-inner form-vertical">
-            {% if plugin.sidebar.template %}
-              {% with form_images as form and plugin as plugin %}
-                {% include plugin.sidebar.template %}
-              {% endwith %}
-            {% endif %}
-          </div>
-        </div>
-      
-      </div>
-    </div>
-
-    {% endfor %}
-  </div>
-</div>