Merge pull request #1509 from edx/ned/fix/lms-1303

Cheatsheet modal is accessible. LMS-1303

CHANGELOG.rst

@@ -5,11 +5,14 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
-Common: Add skip links for accessibility to CMS and LMS (LMS-1311)
+LMS: The wiki markup cheatsheet dialog is now accessible to people with
+disabilites.  (LMS-1303)
 
-Studio: Change course overview page, checklists, assets, and course staff management
-page URLs to a RESTful interface. Also removed "\listing", which duplicated
-"\index".
+Common: Add skip links for accessibility to CMS and LMS. (LMS-1311)
+
+Studio: Change course overview page, checklists, assets, and course staff
+management page URLs to a RESTful interface. Also removed "\listing", which
+duplicated "\index".
 
 Blades: When start time and end time are specified for a video, a visual range
 will be shown on the time slider to highlight the place in the video that will
@@ -71,8 +74,8 @@ editing capability for a course's list of tabs.
 Studio and LMS: add ability to lock assets (cannot be viewed unless registered
 for class).
 
-Studio: add restful interface for paging assets (no UX yet, but just add /start/45/max/50 to end of url to get
-items 45-95, e.g.)
+Studio: add restful interface for paging assets (no UX yet, but just add
+/start/45/max/50 to end of url to get items 45-95, e.g.)
 
 LMS: First round of improvements to New (beta) Instructor Dash:
 improvements, fixes, and internationalization to the Student Info section.

lms/static/js/wiki/cheatsheet.js

 $(document).ready(function () {
     $('#cheatsheetLink').click(function() {
-        $('#cheatsheetModal').modal('show');
-    });
-    
-    $('#cheatsheetModal .close-btn').click(function(e) {
-        $('#cheatsheetModal').modal('hide');
+        $('#cheatsheetModal').leanModal();
     });
+    accessible_modal("#cheatsheetLink", "#cheatsheetModal .close-modal", "#cheatsheetModal", ".content-wrapper");
 });

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

@@ -586,9 +586,7 @@ section.wiki {
   }
 
   #cheatsheetModal {
-    width: 950px;
-    margin-left: -450px;
-    margin-top: -100px;
+    width: 972px;
 
     .left-column {
       margin-right: 10px;
@@ -599,23 +597,6 @@ section.wiki {
       float: left;
       width: 450px;
     }
-
-    .close-btn {
-      display: block;
-      position: absolute;
-      top: -8px;
-      right: -8px;
-      width: 30px;
-      height: 30px;
-      border-radius: 30px;
-      border: 1px solid #ccc;
-      @include linear-gradient(top, #eee, #d2d2d2);
-      font-size: 22px;
-      line-height: 28px;
-      color: #333;
-      text-align: center;
-      box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .2);
-    }
   }
 
   #cheatsheet-body {

lms/templates/wiki/includes/cheatsheet.html

 {% load i18n %}
-<div class="modal hide fade" id="cheatsheetModal">
-	<a href="#" class="close-btn">×</a>
+<section id="cheatsheetModal" class="modal" aria-hidden="true">
+  <div class="inner-wrapper" role="dialog" aria-labelledby="cheatsheet-title">
+    <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
+
+    <header>
+      <h2 id="cheatsheet-title">{% trans "Wiki Cheatsheet" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+      <hr/>
+    </header>
     <div id="cheatsheet-body" class="modal-body">
       <div class="left-column">
         <section>
@@ -19,10 +25,8 @@
               Translators: Do not translate "edX"
           {% endcomment %}
           <h3>{% trans "edX Additions:" %}</h3>
-				<pre>
-circuit-schematic:</pre>
-				<pre>
-$LaTeX Math Expression$</pre>
+          <pre>circuit-schematic:</pre>
+          <pre>$LaTeX Math Expression$</pre>
         </section>
       </div>
 
@@ -61,4 +65,4 @@ $LaTeX Math Expression$</pre>
 
     </div>
   </div>
-</div>
+</section>

lms/templates/wiki/includes/editor_widget.html

@@ -4,7 +4,7 @@
 	{% comment %}
 		Translators: Do not translate 'cheatsheetLink'
 	{% endcomment %}
-	{% blocktrans with start_link="<a id='cheatsheetLink' href='#'>" end_link="</a>" %}
+	{% blocktrans with start_link="<a id='cheatsheetLink' href='#cheatsheetModal' rel='leanModal'>" end_link="</a>" %}
 	    Markdown syntax is allowed. See the {{ start_link }}cheatsheet{{ end_link }} for help.
 	{% endblocktrans %}
 </p>