Skip to content

E
edx-platform
Commit c023797b by Ned Batchelder
Options

Merge pull request #1583 from edx/ned/fix/lms-1337 

Make remaining dialogs in wiki accessible.
parents f3aa720c cccd61eb
Showing with 178 additions and 103 deletions
CHANGELOG.rst
...@@ -79,6 +79,9 @@ key in course settings. (BLD-426) ...@@ -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. 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 LMS: Change bulk email implementation to use less memory, and to better handle
duplicate tasks in celery. duplicate tasks in celery.
...@@ -95,8 +98,8 @@ client error are correctly passed through to the client. ...@@ -95,8 +98,8 @@ client error are correctly passed through to the client.
LMS: Improve performance of page load and thread list load for LMS: Improve performance of page load and thread list load for
discussion tab discussion tab
LMS: The wiki markup cheatsheet dialog is now accessible to people with LMS: The wiki markup cheatsheet dialog is now accessible to screen readers.
disabilites. (LMS-1303) (LMS-1303)
Common: Add skip links for accessibility to CMS and LMS. (LMS-1311) 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): ...@@ -60,5 +60,4 @@ class CodeMirror(BaseEditor):
"js/vendor/CodeMirror/mitx_markdown.js", "js/vendor/CodeMirror/mitx_markdown.js",
"js/wiki/accessible.js", "js/wiki/accessible.js",
"js/wiki/CodeMirror.init.js", "js/wiki/CodeMirror.init.js",
"js/wiki/cheatsheet.js",
) )
lms/static/js/toggle_login_modal.js
(function($){ (function($){
$.fn.extend({ $.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) { leanModal: function(options) {
var defaults = { var defaults = {
top: 100, top: 100,
...@@ -13,7 +23,7 @@ ...@@ -13,7 +23,7 @@
$("body").append(overlay); $("body").append(overlay);
} }
options = $.extend(defaults, options); options = $.extend(defaults, options);
return this.each(function() { return this.each(function() {
var o = options; var o = options;
...@@ -23,7 +33,7 @@ ...@@ -23,7 +33,7 @@
$(".modal").hide(); $(".modal").hide();
var modal_id = $(this).attr("href"); var modal_id = $(this).attr("href");
if ($(modal_id).hasClass("video-modal")) { if ($(modal_id).hasClass("video-modal")) {
//Video modals need to be cloned before being presented as a 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. //This is because actions on the video get recorded in the history.
...@@ -34,13 +44,12 @@ ...@@ -34,13 +44,12 @@
modal_id = '#modal_clone'; modal_id = '#modal_clone';
} }
$("#lean_overlay").click(function(e) {
$("#lean_overlay").click(function() { close_modal(modal_id, e);
close_modal(modal_id);
}); });
$(o.closeButton).click(function() { $(o.closeButton).click(function(e) {
close_modal(modal_id); close_modal(modal_id, e);
}); });
var modal_height = $(modal_id).outerHeight(); var modal_height = $(modal_id).outerHeight();
...@@ -72,34 +81,30 @@ ...@@ -72,34 +81,30 @@
} }
window.scrollTo(0, 0); window.scrollTo(0, 0);
e.preventDefault(); e.preventDefault();
}); });
}); });
function close_modal(modal_id){ function close_modal(modal_id, e) {
$("#lean_overlay").fadeOut(200); $("#lean_overlay").fadeOut(200);
$('iframe', modal_id).attr('src', ''); $('iframe', modal_id).attr('src', '');
$(modal_id).css({ 'display' : 'none' }); $(modal_id).css({ 'display' : 'none' });
if (modal_id == '#modal_clone') { if (modal_id == '#modal_clone') {
$(modal_id).remove(); $(modal_id).remove();
} }
e.preventDefault();
} }
} }
}); });
$(document).ready(function($) { $(document).ready(function ($) {
$("a[rel*=leanModal]").each(function(){ $("a[rel*=leanModal]").each(function () {
$(this).leanModal({ top : 120, overlay: 1, closeButton: ".close-modal", position: 'absolute' }); $(this).leanModal({ top : 120, overlay: 1, closeButton: ".close-modal", position: 'absolute' });
embed = $($(this).attr('href')).find('iframe') embed = $($(this).attr('href')).find('iframe')
if(embed.length > 0) { if (embed.length > 0 && embed.attr('src')) {
if(embed.attr('src').indexOf("?") > 0) { var sep = (embed.attr('src').indexOf("?") > 0) ? '&' : '?';
embed.data('src', embed.attr('src') + '&autoplay=1&rel=0'); embed.data('src', embed.attr('src') + sep + 'autoplay=1&rel=0');
embed.attr('src', ''); embed.attr('src', '');
} else { }
embed.data('src', embed.attr('src') + '?autoplay=1&rel=0'); });
embed.attr('src', '');
}
}
});
}); });
})(jQuery); })(jQuery);
lms/static/js/wiki/cheatsheet.js deleted 100644 → 0
$(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 { ...@@ -536,8 +536,12 @@ section.wiki {
} }
.modal-header { .modal-header {
border: 1px solid $danger-red;
padding: ($baseline/2) ($baseline/2) 0 ($baseline/2);
margin-bottom: ($baseline/2);
h1, p { h1, p {
color: #fff; color: $base-font-color;
} }
h1 { h1 {
......
lms/static/sass/shared/_modal.scss
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
overflow: hidden; overflow: hidden;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
padding-bottom: 30px; padding-bottom: 10px;
position: relative; position: relative;
z-index: 2; z-index: 2;
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
form { form {
margin-bottom: 12px; margin-bottom: 12px;
padding: 0px 40px; padding: 0px 40px 20px;
position: relative; position: relative;
z-index: 2; z-index: 2;
......
lms/templates/wiki/edit.html
{% extends "wiki/article.html" %} {% extends "wiki/article.html" %}
{% load wiki_tags i18n %} {% load wiki_tags i18n sekizai_tags %}
{% load url from future %} {% load url from future %}
{% block pagetitle %}{% trans "Edit" %}: {{ article.current_revision.title }}{% endblock %} {% block pagetitle %}{% trans "Edit" %}: {{ article.current_revision.title }}{% endblock %}
{% block wiki_contents_tab %} {% 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" %} {% include "wiki/includes/editor.html" %}
<div class="form-actions"> <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 %}'"> <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> <span class="icon-ok"></span>
{% trans "Save changes" %} {% trans "Save changes" %}
</button> </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> <span class="icon-eye-open"></span>
{% trans "Preview" %} {% trans "Preview" %}
</button> </a>
<a href="{% url 'wiki:delete' path=urlpath.path article_id=article.id %}" class="pull-right btn btn-danger"> <a href="{% url 'wiki:delete' path=urlpath.path article_id=article.id %}" class="pull-right btn btn-danger">
<span class="icon-trash"></span> <span class="icon-trash"></span>
{% trans "Delete article" %} {% trans "Delete article" %}
</a> </a>
</div> </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"> <div class="modal-body">
<iframe name="previewWindow" frameborder="0"></iframe> <iframe name="previewWindow" frameborder="0"></iframe>
</div> </div>
...@@ -34,16 +61,13 @@ ...@@ -34,16 +61,13 @@
{% trans "Save changes" %} {% trans "Save changes" %}
</button> </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> <span class="icon-circle-arrow-left"></span>
{% trans "Back to editor" %} {% trans "Back to editor" %}
</a> </a>
</div> </div>
</div> </section>
{% include "wiki/includes/cheatsheet.html" %} {% include "wiki/includes/cheatsheet.html" %}
</form> </form>
{% endblock %} {% endblock %}
lms/templates/wiki/history.html
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<script type="text/javascript" src="{{ STATIC_URL }}wiki/js/diffview.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}wiki/js/diffview.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$( document ).ready(function() { $(document).ready(function() {
$('.accordion input[disabled!="disabled"][type="radio"]').first().attr('checked', 'true'); $('.accordion input[disabled!="disabled"][type="radio"]').first().attr('checked', 'true');
$('a.accordion-toggle').click(function(event) { $('a.accordion-toggle').click(function(event) {
...@@ -41,6 +41,20 @@ ...@@ -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> </script>
{% endaddtoblock %} {% endaddtoblock %}
...@@ -81,7 +95,7 @@ ...@@ -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." %} {% 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> </p>
<form method="GET"> <form method="GET" name="revisions_form">
<div class="tab-content" style="overflow: visible;"> <div class="tab-content" style="overflow: visible;">
{% for revision in revisions %} {% for revision in revisions %}
<div class="accordion" id="accordion{{ revision.revision_number }}"> <div class="accordion" id="accordion{{ revision.revision_number }}">
...@@ -107,16 +121,29 @@ ...@@ -107,16 +121,29 @@
</div> </div>
<div class="pull-right" style="vertical-align: middle; margin: 8px 3px;"> <div class="pull-right" style="vertical-align: middle; margin: 8px 3px;">
{% if not revision == article.current_revision %} {% 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"
<span class="icon-eye-open"></span> id="previewRevisionButton{{ revision.revision_number }}"
{% trans "Preview this revision" %} href="#previewRevisionModal" rel="leanModal"
</button> onclick="
{% endif %} document.revisions_form.target='previewWindow';
document.revisions_form.r.value='{{ revision.id }}';
{% if article|can_write:user %} document.revisions_form.action='{% url 'wiki:preview_revision' article.id %}';
<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 %}" /> $('#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" %}
</a>
{% if article|can_write:user %}
<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 %} {% endif %}
</div> </div>
<div style="clear: both"></div> <div style="clear: both"></div>
</div> </div>
...@@ -140,84 +167,103 @@ ...@@ -140,84 +167,103 @@
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
{% include "wiki/includes/pagination.html" %} {% include "wiki/includes/pagination.html" %}
{% if revisions.count > 1 %} {% if revisions.count > 1 %}
<div class="form-actions"> <div class="form-actions">
<div class="pull-right"> <div class="pull-right">
{% if article|can_write:user %} {% 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> <span class="icon-random"></span>
{% trans "Merge selected with current..." %} {% trans "Merge selected with current..." %}
</button> </a>
{% else %} {% else %}
<button type="submit" disabled="true" name="preview" value="1" class="btn btn-large"> <button type="submit" disabled="true" name="preview" value="1" class="btn btn-large">
<span class="icon-lock"></span> <span class="icon-lock"></span>
{% trans "Merge selected with current..." %} {% trans "Merge selected with current..." %}
</button> </button>
{% endif %} {% 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> <span class="icon-flag"></span>
{% trans "Switch to selected version" %} {% trans "Switch to selected version" %}
</button> </button>
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<input type="hidden" name="r" value="" /> <input type="hidden" name="r" value="" />
<div class="modal hide fade" id="previewModal"> <section id="previewRevisionModal" class="modal" aria-hidden="true">
<div class="modal-body"> <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title">
<iframe name="previewWindow"></iframe> <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
</div>
<div class="modal-footer"> <header>
<a href="#" class="btn btn-large" data-dismiss="modal"> <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 id="previewRevisionModalBackToHistory" href="#" class="btn btn-large" data-dismiss="modal">
<span class="icon-circle-arrow-left"></span> <span class="icon-circle-arrow-left"></span>
{% trans "Back to history view" %} {% trans "Back to history view" %}
</a> </a>
{% if article|can_write:user %} {% if article|can_write:user %}
<a href="#" class="btn btn-large btn-primary switch-to-revision"> <a href="#" class="btn btn-large btn-primary switch-to-revision">
<span class="icon-flag"></span> <span class="icon-flag"></span>
{% trans "Switch to this version" %} {% trans "Switch to this version" %}
</a> </a>
{% else %} {% else %}
<a href="#" class="btn btn-large btn-primary disabled"> <a href="#" class="btn btn-large btn-primary disabled">
<span class="icon-lock"></span> <span class="icon-lock"></span>
{% trans "Switch to this version" %} {% trans "Switch to this version" %}
</a> </a>
{% endif %} {% endif %}
</div>
</div> </div>
</div> </section>
<div class="modal hide fade" id="mergeModal"> <section id="mergeModal" class="modal" aria-hidden="true">
<div class="modal-header"> <div class="inner-wrapper" role="dialog" aria-labelledby="merge-title">
<h1>{% trans "Merge with current" %}</h1> <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
<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>
</div> <header>
<div class="modal-body"> <h2 id="merge-title">{% trans "Merge Revision" %}<span class="sr">, {% trans "modal open" %}</span></h2>
<iframe name="mergeWindow"></iframe> <hr/>
</div> </header>
<div class="modal-footer"> <div class="modal-header">
<a href="#" class="btn btn-large" data-dismiss="modal"> <h1>{% trans "Merge with current" %}</h1>
<span class="icon-circle-arrow-left"></span> <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>
{% trans "Back to history view" %} </div>
</a> <div class="modal-body">
{% if article|can_write:user %} <iframe name="mergeWindow"></iframe>
<a href="#" class="btn btn-large btn-primary merge-revision-commit"> </div>
<span class="icon-file"></span> <div class="modal-footer">
{% trans "Create new merged version" %} <a id="mergeModalBackToHistory" href="#" class="btn btn-large" data-dismiss="modal">
</a> <span class="icon-circle-arrow-left"></span>
{% else %} {% trans "Back to history view" %}
<a href="#" class="btn btn-large btn-primary disabled"> </a>
<span class="icon-lock"></span> {% if article|can_write:user %}
<a href="#" class="btn btn-large btn-primary merge-revision-commit">
<span class="icon-file"></span>
{% trans "Create new merged version" %} {% trans "Create new merged version" %}
</a> </a>
{% endif %} {% else %}
<a href="#" class="btn btn-large btn-primary disabled">
<span class="icon-lock"></span>
{% trans "Create new merged version" %}
</a>
{% endif %}
</div>
</div> </div>
</div> </div>
</form> </form>
{% endblock %}
{% endblock %}
lms/templates/wiki/includes/cheatsheet.html
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
1. {% trans "Ordered" %} 1. {% trans "Ordered" %}
2. {% trans "List" %}</pre> 2. {% trans "List" %}</pre>
<pre> <pre>
> {% trans "Quotes" %}</pre> &gt; {% trans "Quotes" %}</pre>
</section> </section>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment