From cccd61ebf35c5424e424d0f1285fb65cdc4d1f7a Mon Sep 17 00:00:00 2001 From: Ned Batchelder Date: Mon, 4 Nov 2013 15:12:31 -0500 Subject: [PATCH] Make remaining dialogs in wiki accessible. All the dialogs in the wiki are now accessible to screen readers. Also, the "Switch to selected version" button did the odd thing of reloading the page with the new version selected, but inside a dialog. That is now fixed. The merge dialog has a warning that looks kind of funky still, but you can read it, unlike the previous code. LMS-1337 --- CHANGELOG.rst | 7 +- lms/djangoapps/course_wiki/editors.py | 1 - lms/static/js/toggle_login_modal.js | 51 ++++--- lms/static/js/wiki/cheatsheet.js | 6 - lms/static/sass/course/wiki/_wiki.scss | 6 +- lms/static/sass/shared/_modal.scss | 4 +- lms/templates/wiki/edit.html | 48 ++++-- lms/templates/wiki/history.html | 156 +++++++++++++------- lms/templates/wiki/includes/cheatsheet.html | 2 +- 9 files changed, 178 insertions(+), 103 deletions(-) delete mode 100644 lms/static/js/wiki/cheatsheet.js diff --git a/CHANGELOG.rst b/CHANGELOG.rst index a6c335db14..8e2ff9f896 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -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) diff --git a/lms/djangoapps/course_wiki/editors.py b/lms/djangoapps/course_wiki/editors.py index e823bfdafa..ab68c0572c 100644 --- a/lms/djangoapps/course_wiki/editors.py +++ b/lms/djangoapps/course_wiki/editors.py @@ -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", ) diff --git a/lms/static/js/toggle_login_modal.js b/lms/static/js/toggle_login_modal.js index 063da6998e..28bec08988 100644 --- a/lms/static/js/toggle_login_modal.js +++ b/lms/static/js/toggle_login_modal.js @@ -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 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); diff --git a/lms/static/js/wiki/cheatsheet.js b/lms/static/js/wiki/cheatsheet.js deleted file mode 100644 index bbf8377a32..0000000000 --- a/lms/static/js/wiki/cheatsheet.js +++ /dev/null @@ -1,6 +0,0 @@ -$(document).ready(function () { - $('#cheatsheetLink').click(function() { - $('#cheatsheetModal').leanModal(); - }); - accessible_modal("#cheatsheetLink", "#cheatsheetModal .close-modal", "#cheatsheetModal", ".content-wrapper"); -}); diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss index 76da4ed7a1..8a512223d7 100644 --- a/lms/static/sass/course/wiki/_wiki.scss +++ b/lms/static/sass/course/wiki/_wiki.scss @@ -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 { diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss index 07c9f3c61c..f9c3027ddf 100644 --- a/lms/static/sass/shared/_modal.scss +++ b/lms/static/sass/shared/_modal.scss @@ -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; diff --git a/lms/templates/wiki/edit.html b/lms/templates/wiki/edit.html index 65378da4e4..1f27157620 100644 --- a/lms/templates/wiki/edit.html +++ b/lms/templates/wiki/edit.html @@ -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 %} -
+{% addtoblock "js" %} + +{% endaddtoblock %} + + {% include "wiki/includes/editor.html" %}
- - + + {% trans "Delete article" %} - +
- + {% include "wiki/includes/cheatsheet.html" %}
{% endblock %} - - - diff --git a/lms/templates/wiki/history.html b/lms/templates/wiki/history.html index 5488abb97d..798b030c03 100644 --- a/lms/templates/wiki/history.html +++ b/lms/templates/wiki/history.html @@ -10,7 +10,7 @@ {% 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." %}

-
+
{% for revision in revisions %}
@@ -107,16 +121,29 @@
{% if not revision == article.current_revision %} - + + + {% trans "Preview this revision" %} + + + {% if article|can_write:user %} + + {% endif %} + {% endif %} - - {% if article|can_write:user %} - - {% endif %} - +
@@ -140,84 +167,103 @@ {% endfor %} - + {% include "wiki/includes/pagination.html" %} - + {% if revisions.count > 1 %}
{% if article|can_write:user %} - + {% else %} {% endif %} -
- {% endif %} - + -