Skip to content

E
edx-platform
Commit 2255b5c8 by Chris Rodriguez
Options

AC-552 word cloud accessibility updates

parent a81b3b36
Showing with 123 additions and 36 deletions
cms/static/sass/elements/_controls.scss
......@@ -188,6 +188,39 @@
}
}
// LMS-style CAPA button for consistency with LMS buttons
%btn-lms-style {
border: 1px solid $btn-lms-border;
border-radius: 3px;
box-shadow: inset 0 1px 0 0 $white;
color: $gray-d3;
display: inline-block;
font-size: inherit;
font-weight: bold;
background-color: $btn-lms-background;
background-image: -webkit-linear-gradient($btn-lms-background,$btn-lms-gradient);
background-image: linear-gradient($btn-lms-background,$btn-lms-gradient);
padding: 7px 18px;
text-decoration: none;
text-shadow: 0 1px 0 $btn-lms-shadow;
background-clip: padding-box;
font-size: 0.8125em;
&:focus,
&:hover {
box-shadow: inset 0 1px 0 0 $btn-lms-shadow-hover;
cursor: pointer;
background-color: $btn-lms-background-hover;
background-image: -webkit-linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
background-image: linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
}
&:active {
border: 1px solid $btn-lms-border;
box-shadow: inset 0 0 8px 4px $btn-lms-shadow-active,inset 0 0 8px 4px $btn-lms-shadow-active;
}
}
// +Button Element
// ====================
.button {
......
cms/static/sass/elements/_xblocks.scss
......@@ -248,6 +248,15 @@
color: $color-visibility-set;
}
}
.action {
.save {
// taking styles from LMS for these Save buttons to maintain consistency
// there is no studio-specific style for these LMS-styled buttons
@extend %btn-lms-style;
}
}
}
// +Messaging - Xblocks
......
cms/static/sass/partials/_variables.scss
......@@ -82,6 +82,17 @@ $gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%);
// These define button styles similar to LMS
// The goal here is consistency (until we can overhaul all of this...)
$btn-lms-border: #d2c9c9;
$btn-lms-background: #f1f1f1;
$btn-lms-gradient: #d9d1d1;
$btn-lms-shadow: #fcfbfb;
$btn-lms-shadow-hover: #fefefe;
$btn-lms-background-hover: #e4e4e4;
$btn-lms-gradient-hover: #d1c9c9;
$btn-lms-shadow-active: #cac2c2;
$blue: rgb(0, 159, 230);
$blue-l1: tint($blue,20%);
$blue-l2: tint($blue,40%);
......
common/lib/xmodule/xmodule/css/word_cloud/display.scss
......@@ -10,12 +10,15 @@
.result_cloud_section.active {
display: block;
width: 635px;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
h3 {
font-size: 100%;
}
}
.your_words{
font-size: 0.85em;
display: block;
}
\ No newline at end of file
}
common/lib/xmodule/xmodule/word_cloud_module.py
......@@ -37,20 +37,25 @@ class WordCloudFields(object):
"""XFields for word cloud."""
display_name = String(
display_name=_("Display Name"),
help=_("Display name for this module"),
help=_("The label for this word cloud on the course page."),
scope=Scope.settings,
default="Word cloud"
)
instructions = String(
display_name=_("Instructions"),
help=_("Add instructions to help learners understand how to use the word cloud. Clear instructions are important, especially for learners who have accessibility requirements."), # nopep8 pylint: disable=C0301
scope=Scope.settings,
)
num_inputs = Integer(
display_name=_("Inputs"),
help=_("Number of text boxes available for students to input words/sentences."),
help=_("The number of text boxes available for learners to add words and sentences."),
scope=Scope.settings,
default=5,
values={"min": 1}
)
num_top_words = Integer(
display_name=_("Maximum Words"),
help=_("Maximum number of words to be displayed in generated word cloud."),
help=_("The maximum number of words displayed in the generated word cloud."),
scope=Scope.settings,
default=250,
values={"min": 1}
......@@ -64,7 +69,7 @@ class WordCloudFields(object):
# Fields for descriptor.
submitted = Boolean(
help=_("Whether this student has posted words to the cloud."),
help=_("Whether this learner has posted words to the cloud."),
scope=Scope.user_state,
default=False
)
......@@ -74,7 +79,7 @@ class WordCloudFields(object):
default=[]
)
all_words = Dict(
help=_("All possible words from all students."),
help=_("All possible words from all learners."),
scope=Scope.user_state_summary
)
top_words = Dict(
......@@ -235,11 +240,14 @@ class WordCloudModule(WordCloudFields, XModule):
def get_html(self):
"""Template rendering."""
context = {
'element_id': self.location.html_id(),
'element_class': self.location.category,
'ajax_url': self.system.ajax_url,
'display_name': self.display_name,
'display_name_default': WordCloudFields.display_name.default,
'instructions': self.instructions,
'element_class': self.location.category,
'element_id': self.location.html_id(),
'num_inputs': self.num_inputs,
'submitted': self.submitted
'submitted': self.submitted,
}
self.content = self.system.render_template('word_cloud.html', context)
return self.content
......
common/test/acceptance/pages/lms/instructor_dashboard.py
......@@ -942,8 +942,8 @@ class SpecialExamsPageAttemptsSection(PageObject):
Clicks the "x" to remove the Student's attempt.
"""
with self.handle_alert(confirm=True):
self.q(css="a.remove-attempt").first.click()
self.wait_for_element_absence("a.remove-attempt", "exam attempt")
self.q(css=".remove-attempt").first.click()
self.wait_for_element_absence(".remove-attempt", "exam attempt")
class DataDownloadPage(PageObject):
......
lms/djangoapps/courseware/features/word_cloud.py
......@@ -20,7 +20,7 @@ def view_word_cloud(_step):
@step('I press the Save button')
def press_the_save_button(_step):
button_css = '.input_cloud_section input.save'
button_css = '.input_cloud_section .save'
world.css_click(button_css)
......
lms/djangoapps/courseware/tests/test_word_cloud.py
......@@ -241,14 +241,16 @@ class TestWordCloud(BaseTestXmodule):
)
def test_word_cloud_constructor(self):
"""Make sure that all parameters extracted correclty from xml"""
"""Make sure that all parameters extracted correctly from xml"""
fragment = self.runtime.render(self.item_descriptor, STUDENT_VIEW)
expected_context = {
'ajax_url': self.item_descriptor.xmodule_runtime.ajax_url,
'display_name': self.item_descriptor.display_name,
'display_name_default': 'Word cloud',
'instructions': self.item_descriptor.instructions,
'element_class': self.item_descriptor.location.category,
'element_id': self.item_descriptor.location.html_id(),
'num_inputs': 5, # default value
'submitted': False # default value
'submitted': False, # default value
}
self.assertEqual(fragment.content, self.runtime.render_template('word_cloud.html', expected_context))
lms/templates/word_cloud.html
<%page expression_filter="h"/>
<%! from django.utils.translation import ugettext as _ %>
<section
<div
id="word_cloud_${element_id}"
class="${element_class}"
data-ajax-url="${ajax_url}"
>
<section class="input_cloud_section">
% if display_name:
<h3 class="hd hd-3" id="word_cloud_${element_id}_heading">${display_name}</h3>
% endif
% if instructions is not None:
<div class="input_cloud_section" role="group" aria-labelledby="word_cloud_${element_id}_instructions">
% elif display_name:
<div class="input_cloud_section" role="group" aria-labelledby="word_cloud_${element_id}_heading">
% else:
<div class="input_cloud_section" role="group">
% endif
% if instructions is not None:
<div class="input_cloud_instructions" id="word_cloud_${element_id}_instructions">
${instructions}
</div>
% endif
% for row in range(num_inputs):
<input
class="input-cloud"
${'style="display: none;"' if submitted else ''}
type="text"
size="40"
/>
<label>
<span class="sr">${_('{num} of {total}').format(num=row+1, total=num_inputs)}</span>
<input
class="input-cloud"
${'style="display: none;"' if submitted else ''}
type="text"
size="40"
/>
</label>
% endfor
<section class="action">
<input class="save" type="button" value="${_('Save')}" />
</section>
</section>
<div class="action">
<button class="save" type="button">${_('Save')}</button>
</div>
</div>
<section id="result_cloud_section_${element_id}" class="result_cloud_section">
<h3>${_('Your words:')} <span class="your_words"></span></h3>
<h3>${_('Total number of words:')} <span class="total_num_words"></span></h3>
<div id="result_cloud_section_${element_id}" class="result_cloud_section">
<div class="word_cloud"></div>
</section>
<p class="total_num_words"></p>
<p>${_('Your words were:')}</p>
<ul class="your_words"></ul>
</div>
</section>
</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