Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Make remaining dialogs in wiki accessible.
This commit is contained in:
Ned Batchelder
2013-11-25 13:33:18 -08:00
parent f3aa720c16 cccd61ebf3
commit c023797bd0
9 changed files with 178 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.rst
View File

@@ -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)

1
lms/djangoapps/course_wiki/editors.py
View File

@@ -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",
)

51
lms/static/js/toggle_login_modal.js
View File

@@ -1,5 +1,15 @@
(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,
@@ -13,7 +23,7 @@
$("body").append(overlay);
}
options = $.extend(defaults, options);
options = $.extend(defaults, options);
return this.each(function() {
var o = options;
@@ -23,7 +33,7 @@
$(".modal").hide();
var modal_id = $(this).attr("href");
if ($(modal_id).hasClass("video-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.
@@ -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,34 +81,30 @@
}
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(){
$(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');
embed.attr('src', '');
} else {
embed.data('src', embed.attr('src') + '?autoplay=1&rel=0');
embed.attr('src', '');
}
}
});
$(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 && embed.attr('src')) {
var sep = (embed.attr('src').indexOf("?") > 0) ? '&' : '?';
embed.data('src', embed.attr('src') + sep + 'autoplay=1&rel=0');
embed.attr('src', '');
}
});
});
})(jQuery);

6
lms/static/js/wiki/cheatsheet.js
View File

@@ -1,6 +0,0 @@
$(document).ready(function () {
$('#cheatsheetLink').click(function() {
$('#cheatsheetModal').leanModal();
});
accessible_modal("#cheatsheetLink", "#cheatsheetModal .close-modal", "#cheatsheetModal", ".content-wrapper");
});

6
lms/static/sass/course/wiki/_wiki.scss
View File

@@ -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 {

4
lms/static/sass/shared/_modal.scss
View File

@@ -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;

48
lms/templates/wiki/edit.html
View File

@@ -1,30 +1,57 @@
{% 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>
{% trans "Delete article" %}
</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 %}

156
lms/templates/wiki/history.html
View File

@@ -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,16 +121,29 @@
</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 %}')">
<span class="icon-eye-open"></span>
{% trans "Preview this revision" %}
</button>
<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" %}
</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 %}
{% 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 %}" />
{% endif %}
</div>
<div style="clear: both"></div>
</div>
@@ -140,84 +167,103 @@
</div>
</div>
{% endfor %}
{% include "wiki/includes/pagination.html" %}
{% if revisions.count > 1 %}
<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">
<div class="modal-body">
<iframe name="previewWindow"></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-large" data-dismiss="modal">
<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 id="previewRevisionModalBackToHistory" href="#" class="btn btn-large" data-dismiss="modal">
<span class="icon-circle-arrow-left"></span>
{% trans "Back to history view" %}
</a>
{% if article|can_write:user %}
<a href="#" class="btn btn-large btn-primary switch-to-revision">
<span class="icon-flag"></span>
{% trans "Switch to this version" %}
</a>
<a href="#" class="btn btn-large btn-primary switch-to-revision">
<span class="icon-flag"></span>
{% trans "Switch to this version" %}
</a>
{% else %}
<a href="#" class="btn btn-large btn-primary disabled">
<span class="icon-lock"></span>
{% trans "Switch to this version" %}
</a>
</a>
{% endif %}
</div>
</div>
</div>
</section>
<div class="modal hide fade" id="mergeModal">
<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>
</div>
<div class="modal-body">
<iframe name="mergeWindow"></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-large" data-dismiss="modal">
<span class="icon-circle-arrow-left"></span>
{% trans "Back to history view" %}
</a>
{% 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" %}
</a>
{% else %}
<a href="#" class="btn btn-large btn-primary disabled">
<span class="icon-lock"></span>
<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>
<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>
</div>
<div class="modal-body">
<iframe name="mergeWindow"></iframe>
</div>
<div class="modal-footer">
<a id="mergeModalBackToHistory" href="#" class="btn btn-large" data-dismiss="modal">
<span class="icon-circle-arrow-left"></span>
{% trans "Back to history view" %}
</a>
{% 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" %}
</a>
{% endif %}
</a>
{% 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>
</form>
{% endblock %}
{% endblock %}

2
lms/templates/wiki/includes/cheatsheet.html
View File

@@ -59,7 +59,7 @@
1. {% trans "Ordered" %}
2. {% trans "List" %}</pre>
<pre>
> {% trans "Quotes" %}</pre>
&gt; {% trans "Quotes" %}</pre>
</section>
</div>