AC-552 word cloud accessibility updates

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>