Cheatsheet modal is accessible.

Use the leanModal stuff to show the cheatsheet dialog in the wiki.

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').leanModal();
     });
-    
-    $('#cheatsheetModal .close-btn').click(function(e) {
-        $('#cheatsheetModal').modal('hide');
-    });
-});
+    accessible_modal("#cheatsheetLink", "#cheatsheetModal .close-modal", "#cheatsheetModal", ".content-wrapper");
+});
\ No newline at end of file

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>
-	<div id="cheatsheet-body" class="modal-body">
-		<div class="left-column">
-			<section>
-				<h2>{% trans "Wiki Syntax Help" %}</h2>
-				<p>{% trans "This wiki uses <strong>Markdown</strong> for styling. There are several useful guides online. See any of the links below for in-depth details:" %}</p>
-				<ul>
-					<li><a href="http://daringfireball.net/projects/markdown/basics" target="_blank">{% trans 'Markdown: Basics' %}</a></li>
-					<li><a href="http://greg.vario.us/doc/markdown.txt" target="_blank">{% trans 'Quick Markdown Syntax Guide' %}</a></li>
-					<li><a href="http://www.lowendtalk.com/discussion/6/miniature-markdown-guide" target="_blank">{% trans 'Miniature Markdown Guide' %}</a></li>
-				</ul>
-				<p>{% trans "To create a new wiki article, create a link to it. Clicking the link gives you the creation page." %}</p>
-                                <pre>{% trans "[Article Name](wiki:ArticleName)" %}</pre>
-			</section>
-			<section>
-				{% comment %}
-					Translators: Do not translate "edX"
-				{% endcomment %}
-				<h3>{% trans "edX Additions:" %}</h3>
-				<pre>
-circuit-schematic:</pre>
-				<pre>
-$LaTeX Math Expression$</pre>
-			</section>
-		</div>
+<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>
 
-		<div class="right-column">
-			<section>
-				<h3>{% trans "Useful examples:" %}</h3>
-				<pre>
+    <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>
+          <h2>{% trans "Wiki Syntax Help" %}</h2>
+          <p>{% trans "This wiki uses <strong>Markdown</strong> for styling. There are several useful guides online. See any of the links below for in-depth details:" %}</p>
+          <ul>
+              <li><a href="http://daringfireball.net/projects/markdown/basics" target="_blank">{% trans 'Markdown: Basics' %}</a></li>
+              <li><a href="http://greg.vario.us/doc/markdown.txt" target="_blank">{% trans 'Quick Markdown Syntax Guide' %}</a></li>
+              <li><a href="http://www.lowendtalk.com/discussion/6/miniature-markdown-guide" target="_blank">{% trans 'Miniature Markdown Guide' %}</a></li>
+          </ul>
+          <p>{% trans "To create a new wiki article, create a link to it. Clicking the link gives you the creation page." %}</p>
+          <pre>{% trans "[Article Name](wiki:ArticleName)" %}</pre>
+        </section>
+        <section>
+          {% comment %}
+              Translators: Do not translate "edX"
+          {% endcomment %}
+          <h3>{% trans "edX Additions:" %}</h3>
+          <pre>circuit-schematic:</pre>
+          <pre>$LaTeX Math Expression$</pre>
+        </section>
+      </div>
+
+      <div class="right-column">
+          <section>
+              <h3>{% trans "Useful examples:" %}</h3>
+              <pre>
 {% comment %}
-	Translators: Do not translate "edX" or "Wikipedia"
+  Translators: Do not translate "edX" or "Wikipedia"
 {% endcomment %}
 {% trans "http://wikipedia.org" %}
 {% trans "[Wikipedia](http://wikipedia.org)" %}
 {% trans "[edX Wiki](wiki:/edx/)" %}
-				</pre>
-				<pre>
+              </pre>
+              <pre>
 {% trans "Huge Header" %}
 ===========</pre>
-				<pre>
+              <pre>
 {% trans "Smaller Header" %}
 --------------</pre>
-				<pre>
+              <pre>
 {% trans "*emphasis* or _emphasis_" %}</pre>
-				<pre>
+              <pre>
 {% trans "**strong** or __strong__" %}</pre>
-				<pre>
+              <pre>
 - {% trans "Unordered List" %}
-	- {% trans "Sub Item 1" %}
-    	- {% trans "Sub Item 2" %}</pre>
-				<pre>
+  - {% trans "Sub Item 1" %}
+      - {% trans "Sub Item 2" %}</pre>
+              <pre>
 1. {% trans "Ordered" %}
 2. {% trans "List" %}</pre>
-				<pre>
+              <pre>
 > {% trans "Quotes" %}</pre>
-			</section>
-		</div>
+          </section>
+      </div>
 
-		</div>
-	</div>
-</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>