Skip to content

E
edx-platform
Commit fec2fb4e by Christina Roberts Committed by GitHub
Options

Merge pull request #14421 from edx/christina/wiki 

Wiki accessibility fixes.
parents a46aec9b 95672ec2
Showing with 197 additions and 117 deletions
common/test/acceptance/pages/lms/course_wiki.py
...@@ -21,11 +21,25 @@ class CourseWikiPage(CoursePage): ...@@ -21,11 +21,25 @@ class CourseWikiPage(CoursePage):
def open_editor(self): def open_editor(self):
""" """
Replace content of a wiki article with new content Display the editor for a wiki article.
""" """
edit_button = self.q(css='.fa-pencil') edit_button = self.q(css='.fa-pencil')
edit_button.click() edit_button.click()
def show_history(self):
"""
Show the change history for a wiki article.
"""
edit_button = self.q(css='.fa-clock-o')
edit_button.click()
def show_children(self):
"""
Show the children of a wiki article.
"""
children_link = self.q(css='.see-children>a')
children_link.click()
@property @property
def article_name(self): def article_name(self):
""" """
...@@ -34,17 +48,15 @@ class CourseWikiPage(CoursePage): ...@@ -34,17 +48,15 @@ class CourseWikiPage(CoursePage):
return str(self.q(css='.main-article h1').text[0]) return str(self.q(css='.main-article h1').text[0])
class CourseWikiEditPage(CoursePage): class CourseWikiSubviewPage(CoursePage): # pylint: disable=abstract-method
""" """ Abstract base page for subviews within the wiki. """
Editor page
"""
def __init__(self, browser, course_id, course_info): def __init__(self, browser, course_id, course_info):
""" """
Course ID is currently of the form "edx/999/2013_Spring" Course ID is currently of the form "edx/999/2013_Spring"
but this format could change. but this format could change.
""" """
super(CourseWikiEditPage, self).__init__(browser, course_id) super(CourseWikiSubviewPage, self).__init__(browser, course_id)
self.course_id = course_id self.course_id = course_id
self.course_info = course_info self.course_info = course_info
self.article_name = "{org}.{course_number}.{course_run}".format( self.article_name = "{org}.{course_number}.{course_run}".format(
...@@ -53,6 +65,12 @@ class CourseWikiEditPage(CoursePage): ...@@ -53,6 +65,12 @@ class CourseWikiEditPage(CoursePage):
course_run=self.course_info['run'] course_run=self.course_info['run']
) )
class CourseWikiEditPage(CourseWikiSubviewPage):
"""
Editor page
"""
@property @property
def url_path(self): def url_path(self):
""" """
...@@ -79,3 +97,41 @@ class CourseWikiEditPage(CoursePage): ...@@ -79,3 +97,41 @@ class CourseWikiEditPage(CoursePage):
""" """
self.q(css='button[name="save"]').click() self.q(css='button[name="save"]').click()
self.wait_for_element_presence('.alert-success', 'wait for the article to be saved') self.wait_for_element_presence('.alert-success', 'wait for the article to be saved')
class CourseWikiHistoryPage(CourseWikiSubviewPage):
"""
Course wiki change history page.
"""
def is_browser_on_page(self):
"""
Return if the browser is on the history page.
"""
return self.q(css='section.history').present
@property
def url_path(self):
"""
Construct a URL to the page within the course.
"""
return "/wiki/" + self.article_name + "/_history"
class CourseWikiChildrenPage(CourseWikiSubviewPage):
"""
Course wiki "All Children" page.
"""
def is_browser_on_page(self):
"""
Return if the browser is on the wiki children page (which contains a search widget).
"""
return self.q(css='.form-search').present
@property
def url_path(self):
"""
Construct a URL to the page within the course.
"""
return "/wiki/" + self.article_name + "/_dir"
common/test/acceptance/tests/lms/test_lms.py
...@@ -38,7 +38,9 @@ from common.test.acceptance.pages.studio.settings import SettingsPage ...@@ -38,7 +38,9 @@ from common.test.acceptance.pages.studio.settings import SettingsPage
from common.test.acceptance.pages.lms.login_and_register import CombinedLoginAndRegisterPage, ResetPasswordPage from common.test.acceptance.pages.lms.login_and_register import CombinedLoginAndRegisterPage, ResetPasswordPage
from common.test.acceptance.pages.lms.track_selection import TrackSelectionPage from common.test.acceptance.pages.lms.track_selection import TrackSelectionPage
from common.test.acceptance.pages.lms.pay_and_verify import PaymentAndVerificationFlow, FakePaymentPage from common.test.acceptance.pages.lms.pay_and_verify import PaymentAndVerificationFlow, FakePaymentPage
from common.test.acceptance.pages.lms.course_wiki import CourseWikiPage, CourseWikiEditPage from common.test.acceptance.pages.lms.course_wiki import (
CourseWikiPage, CourseWikiEditPage, CourseWikiHistoryPage, CourseWikiChildrenPage
)
from common.test.acceptance.fixtures.course import CourseFixture, XBlockFixtureDesc, CourseUpdateDesc from common.test.acceptance.fixtures.course import CourseFixture, XBlockFixtureDesc, CourseUpdateDesc
...@@ -543,7 +545,6 @@ class PayAndVerifyTest(EventsTestMixin, UniqueCourseTest): ...@@ -543,7 +545,6 @@ class PayAndVerifyTest(EventsTestMixin, UniqueCourseTest):
self.assertEqual(enrollment_mode, 'verified') self.assertEqual(enrollment_mode, 'verified')
@attr(shard=1)
class CourseWikiTest(UniqueCourseTest): class CourseWikiTest(UniqueCourseTest):
""" """
Tests that verify the course wiki. Tests that verify the course wiki.
...@@ -580,6 +581,14 @@ class CourseWikiTest(UniqueCourseTest): ...@@ -580,6 +581,14 @@ class CourseWikiTest(UniqueCourseTest):
self.course_wiki_page.open_editor() self.course_wiki_page.open_editor()
self.course_wiki_edit_page.wait_for_page() self.course_wiki_edit_page.wait_for_page()
def _check_for_accessibility_errors(self, page, custom_rules=None):
""" Run accessibility check with custom rules, if provided """
if custom_rules is not None:
page.a11y_audit.config.set_rules(custom_rules)
page.a11y_audit.check_for_accessibility_errors()
@attr(shard=1)
def test_edit_course_wiki(self): def test_edit_course_wiki(self):
""" """
Wiki page by default is editable for students. Wiki page by default is editable for students.
...@@ -596,6 +605,47 @@ class CourseWikiTest(UniqueCourseTest): ...@@ -596,6 +605,47 @@ class CourseWikiTest(UniqueCourseTest):
actual_content = unicode(self.course_wiki_page.q(css='.wiki-article p').text[0]) actual_content = unicode(self.course_wiki_page.q(css='.wiki-article p').text[0])
self.assertEqual(content, actual_content) self.assertEqual(content, actual_content)
@attr('a11y')
def test_view_a11y(self):
"""
Verify the basic accessibility of the wiki page as initially displayed.
"""
self._check_for_accessibility_errors(self.course_wiki_page)
@attr('a11y')
def test_edit_a11y(self):
"""
Verify the basic accessibility of edit wiki page.
"""
self._open_editor()
self._check_for_accessibility_errors(self.course_wiki_edit_page)
@attr('a11y')
def test_changes_a11y(self):
"""
Verify the basic accessibility of changes wiki page.
"""
self.course_wiki_page.show_history()
history_page = CourseWikiHistoryPage(self.browser, self.course_id, self.course_info)
history_page.wait_for_page()
self._check_for_accessibility_errors(history_page)
@attr('a11y')
def test_children_a11y(self):
"""
Verify the basic accessibility of changes wiki page.
"""
self.course_wiki_page.show_children()
children_page = CourseWikiChildrenPage(self.browser, self.course_id, self.course_info)
children_page.wait_for_page()
custom_rules = {
'ignore': [
'label', # TNL-6440
'data-table' # TNL-6439
]
}
self._check_for_accessibility_errors(children_page, custom_rules)
@attr(shard=1) @attr(shard=1)
class HighLevelTabTest(UniqueCourseTest): class HighLevelTabTest(UniqueCourseTest):
......
lms/static/js/wiki/CodeMirror.init.js
...@@ -10,6 +10,12 @@ $(document).ready(function() { ...@@ -10,6 +10,12 @@ $(document).ready(function() {
// Store the inital contents so we can compare for unsaved changes // Store the inital contents so we can compare for unsaved changes
var initial_contents = editor.getValue(); var initial_contents = editor.getValue();
// The Wiki associates a label with the text area that has ID "id_content". However, when we swap in
// CodeMirror, that text area is hidden. We need to associate the label with visible CodeMirror text area
// (and there is JS code in the wiki that depends on "id_content" interact with the content, so we have
// to leave that alone).
editor.getInputField().setAttribute('id', 'id_codemirror_content');
$(".control-label[for='id_content']")[0].setAttribute('for', 'id_codemirror_content');
window.onbeforeunload = function askConfirm() { // Warn the user before they navigate away window.onbeforeunload = function askConfirm() { // Warn the user before they navigate away
if (editor.getValue() != initial_contents) { if (editor.getValue() != initial_contents) {
return 'You have made changes to the article that have not been saved yet.'; return 'You have made changes to the article that have not been saved yet.';
......
lms/static/sass/course/wiki/_wiki.scss
section.wiki { .wiki-wrapper section.wiki {
padding-top: 25px;
.pull-left { .pull-left {
float: left; float: left;
...@@ -9,20 +8,17 @@ section.wiki { ...@@ -9,20 +8,17 @@ section.wiki {
float: right; float: right;
} }
.wiki-wrapper { @include clearfix();
@include clearfix();
> header { .breadcrumbs-header {
height: 33px; height: 33px;
padding: 24px 0 26px; padding: 24px 0 26px;
border-bottom: 1px solid $gray-l3; border-bottom: 1px solid $gray-l3;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
background-color: $sidebar-color; background-color: $sidebar-color;
}
} }
/*----------------- /*-----------------
Breadcrumbs Breadcrumbs
...@@ -126,10 +122,6 @@ section.wiki { ...@@ -126,10 +122,6 @@ section.wiki {
-----------------*/ -----------------*/
.article-wrapper {
}
h1 { h1 {
font-weight: bold; font-weight: bold;
letter-spacing: 0; letter-spacing: 0;
...@@ -238,7 +230,7 @@ section.wiki { ...@@ -238,7 +230,7 @@ section.wiki {
.label { .label {
font-size: 0.7em; font-size: 0.7em;
color: #aaa; color: $uxpl-gray-base;
text-transform: uppercase; text-transform: uppercase;
} }
...@@ -261,8 +253,8 @@ section.wiki { ...@@ -261,8 +253,8 @@ section.wiki {
line-height: 25px; line-height: 25px;
&:hover, &:focus { &:hover, &:focus {
background-color: $gray-l6; color: $uxpl-blue-hover-active;
text-decoration: none; font-weight: bold;
} }
} }
} }
...@@ -276,9 +268,11 @@ section.wiki { ...@@ -276,9 +268,11 @@ section.wiki {
li { li {
&.active { &.active {
a { a {
color: $link-color; color: $uxpl-blue-hover-active;
font-weight: bold; font-weight: bold;
background-color: $gray-l4; background-color: $light-gray1;
border-color: $uxpl-blue-hover-active;
border-left: 4px solid
} }
} }
} }
...@@ -301,8 +295,8 @@ section.wiki { ...@@ -301,8 +295,8 @@ section.wiki {
} }
&:hover, &:focus { &:hover, &:focus {
background-color: $gray-l6; color: $uxpl-blue-hover-active;
text-decoration: none; font-weight: bold;
} }
} }
} }
...@@ -322,7 +316,7 @@ section.wiki { ...@@ -322,7 +316,7 @@ section.wiki {
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
text-transform: uppercase; text-transform: uppercase;
color: #aaa; color: $uxpl-gray-base;
} }
input { input {
...@@ -380,7 +374,7 @@ section.wiki { ...@@ -380,7 +374,7 @@ section.wiki {
left: 7px; left: 7px;
font-family: $sans-serif; font-family: $sans-serif;
font-size: 0.75em; font-size: 0.75em;
color: #aaa; color: $uxpl-gray-base;
pointer-events: none; pointer-events: none;
} }
} }
...@@ -422,7 +416,7 @@ section.wiki { ...@@ -422,7 +416,7 @@ section.wiki {
} }
&.btn-primary { &.btn-primary {
@include button; @include button(simple, $btn-default-color);
font-size: 0.8em; font-size: 0.8em;
} }
...@@ -606,7 +600,7 @@ section.wiki { ...@@ -606,7 +600,7 @@ section.wiki {
.accordion small { .accordion small {
font-size: 0.8em; font-size: 0.8em;
color: #aaa; color: $uxpl-gray-base;
} }
.accordion-toggle div { .accordion-toggle div {
...@@ -747,7 +741,7 @@ section.wiki { ...@@ -747,7 +741,7 @@ section.wiki {
+ p { + p {
font-size: 0.9em; font-size: 0.9em;
color: #aaa; color: $uxpl-gray-base;
} }
} }
...@@ -757,7 +751,7 @@ section.wiki { ...@@ -757,7 +751,7 @@ section.wiki {
font-size: .9em; font-size: .9em;
a { a {
color: #aaa; color: $uxpl-gray-base;
&:hover, &:focus { &:hover, &:focus {
color: #777; color: #777;
...@@ -831,7 +825,7 @@ section.wiki { ...@@ -831,7 +825,7 @@ section.wiki {
float: right; float: right;
font-size: 0.6em; font-size: 0.6em;
line-height: 20px; line-height: 20px;
color: #aaa; color: $uxpl-gray-base;
} }
} }
......
lms/templates/wiki/base.html
...@@ -56,29 +56,31 @@ ...@@ -56,29 +56,31 @@
{% endwith %} {% endwith %}
{% endif %} {% endif %}
<main id="main" aria-label="Content" tabindex="-1"> <div class="container">
<section class="container wiki {{ selected_tab }}" id="wiki-content"> <div class="wiki-wrapper">
<div class="wiki-wrapper"> <main id="main" aria-label="Content" tabindex="-1">
{% block wiki_body %} <section class="wiki {{ selected_tab }}" id="wiki-content">
{% block wiki_body %}
{% block wiki_breadcrumbs %}{% endblock %}
{% block wiki_breadcrumbs %}{% endblock %}
{% if messages %}
{% for message in messages %} {% if messages %}
<div class="alert alert-{{ message.tags }}"> {% for message in messages %}
<a class="close" data-dismiss="alert" href="#">&times;</a> <div class="alert alert-{{ message.tags }}">
{{ message }} <a class="close" data-dismiss="alert" href="#">&times;</a>
</div> {{ message }}
{% endfor %} </div>
{% endif %} {% endfor %}
{% endif %}
{% block wiki_contents %}{% endblock %}
{% block wiki_contents %}{% endblock %}
{% endblock %}
</div> {% endblock %}
</section> </section>
</main> </main>
</div>
</div>
{% endblock %} {% endblock %}
{% endwith %} {% endwith %}
lms/templates/wiki/edit.html
...@@ -43,8 +43,8 @@ ...@@ -43,8 +43,8 @@
</a> </a>
</div> </div>
<section id="previewModal" class="modal" aria-hidden="true"> <div id="previewModal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="preview-title"> <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title" aria-modal=true>
<button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button> <button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button>
<header> <header>
...@@ -52,21 +52,23 @@ ...@@ -52,21 +52,23 @@
<hr/> <hr/>
</header> </header>
<div class="modal-body">
<iframe name="previewWindow" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<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 fa fa-check-square-o" aria-hidden="true"></span>
{% trans "Save changes" %}
</button>
<a id="previewModalBackToEditor" href="#" class="btn btn-large"> <div class="modal-body">
<span class="icon fa fa-circle-arrow-left" aria-hidden="true"></span> <iframe name="previewWindow" frameborder="0"></iframe>
{% trans "Back to editor" %} </div>
</a> <div class="modal-footer">
<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 fa fa-check-square-o" aria-hidden="true"></span>
{% trans "Save changes" %}
</button>
<a id="previewModalBackToEditor" href="#" class="btn btn-large">
<span class="icon fa fa-circle-arrow-left" aria-hidden="true"></span>
{% trans "Back to editor" %}
</a>
</div>
</div> </div>
</section> </div>
{% include "wiki/includes/cheatsheet.html" %} {% include "wiki/includes/cheatsheet.html" %}
</form> </form>
......
lms/templates/wiki/history.html
...@@ -199,8 +199,8 @@ ...@@ -199,8 +199,8 @@
</div> </div>
<input type="hidden" name="r" value="" /> <input type="hidden" name="r" value="" />
<section id="previewRevisionModal" class="modal" aria-hidden="true"> <div id="previewRevisionModal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="preview-title"> <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title" aria-modal=true>
<button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button> <button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button>
<header> <header>
...@@ -228,10 +228,10 @@ ...@@ -228,10 +228,10 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
</section> </div>
<section id="mergeModal" class="modal" aria-hidden="true"> <div id="mergeModal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="merge-title"> <div class="inner-wrapper" role="dialog" aria-labelledby="merge-title" aria-modal=true>
<button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button> <button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button>
<header> <header>
......
lms/templates/wiki/includes/breadcrumbs.html
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
%> %>
%if urlpath is not Undefined and urlpath: %if urlpath is not Undefined and urlpath:
<header> <header class="breadcrumbs-header">
<h2 class="sr">${_("Course Wiki")}</h2>
<ul class="breadcrumb pull-left" class=""> <ul class="breadcrumb pull-left" class="">
<% <%
# The create button links to the highest ancestor we have edit priveleges to # The create button links to the highest ancestor we have edit priveleges to
......
lms/templates/wiki/includes/cheatsheet.html
{% load i18n %} {% load i18n %}
<section id="cheatsheetModal" class="modal" aria-hidden="true"> <div id="cheatsheetModal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="cheatsheet-title"> <div class="inner-wrapper" role="dialog" aria-labelledby="cheatsheet-title" aria-modal=true>
<button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button> <button class="close-modal"><span class="icon fa fa-remove" aria-hidden="true"></span> <span class="sr">{% trans 'Close' %}</span></button>
<header> <header>
...@@ -60,4 +60,4 @@ http://wikipedia.org ...@@ -60,4 +60,4 @@ http://wikipedia.org
</div> </div>
</div> </div>
</section> </div>
lms/templates/wiki/includes/editor.html
...@@ -9,34 +9,3 @@ ...@@ -9,34 +9,3 @@
}); });
</script> </script>
</div> </div>
<div>
<div>
{% for plugin in sidebar %}
<div class="accordion" id="accordion_{{ plugin.slug }}">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapse_{{ plugin.slug }}" data-toggle="collapse">
<h2>{{ plugin.sidebar.headline }} <span class="{{ plugin.sidebar.icon_class }}"></span></h2>
</a>
</div>
<div id="collapse_{{ plugin.slug }}" class="accordion-body collapse{% if form_images.errors %} in{% endif %}">
<div class="accordion-inner form-vertical">
{% if plugin.sidebar.template %}
{% with form_images as form and plugin as plugin %}
{% include plugin.sidebar.template %}
{% endwith %}
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
package.json
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
"underscore.string": "~3.3.4" "underscore.string": "~3.3.4"
}, },
"devDependencies": { "devDependencies": {
"edx-custom-a11y-rules": "0.1.2", "edx-custom-a11y-rules": "0.1.3",
"eslint": "^2.13.1", "eslint": "^2.13.1",
"eslint-config-edx": "^1.2.1", "eslint-config-edx": "^1.2.1",
"jasmine-core": "^2.4.1", "jasmine-core": "^2.4.1",
......
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