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,10 +10,13 @@
 
 .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;

common/lib/xmodule/xmodule/js/src/word_cloud/word_cloud_main.js

@@ -12,7 +12,15 @@
  */
 
 (function(requirejs, require, define) {
-    define('WordCloudMain', [], function() {
+    'use strict';
+    define('WordCloudMain', [
+        'gettext',
+        'edx-ui-toolkit/js/utils/html-utils'
+    ], function(gettext, HtmlUtils) {
+        function generateUniqueId(wordCloudId, counter) {
+            return '_wc_' + wordCloudId + '_' + counter;
+        }
+
         /**
          * @function WordCloudMain
          *
@@ -44,11 +52,9 @@
             // Retriveing response from the server as an AJAX request. Attach a callback that will
             // be fired on server's response.
             $.postWithPrefix(
-            _this.ajax_url + '/' + 'get_state', null,
+                _this.ajax_url + '/get_state', null,
                 function(response) {
                     if (response.status !== 'success') {
-                    console.log('ERROR: ' + response.error);
-
                         return;
                     }
 
@@ -66,10 +72,10 @@
                 }
             });
 
-            $(el).find('input.save').on('click', function() {
+            $(el).find('.save').on('click', function() {
                 _this.submitAnswer();
             });
-        }; // End-of: var WordCloudMain = function (el) {
+        }; // End-of: var WordCloudMain = function(el) {
 
         /**
          * @function submitAnswer
@@ -90,18 +96,16 @@
             // Send the data to the server as an AJAX request. Attach a callback that will
             // be fired on server's response.
             $.postWithPrefix(
-            _this.ajax_url + '/' + 'submit', $.param(data),
+                _this.ajax_url + '/submit', $.param(data),
                 function(response) {
                     if (response.status !== 'success') {
-                    console.log('ERROR: ' + response.error);
-
                         return;
                     }
 
                     _this.showWordCloud(response);
                 }
             );
-        }; // End-of: WordCloudMain.prototype.submitAnswer = function () {
+        }; // End-of: WordCloudMain.prototype.submitAnswer = function() {
 
         /**
          * @function showWordCloud
@@ -124,7 +128,7 @@
             minSize = 10000;
             scaleFactor = 1;
             maxFontSize = 200;
-            minFontSize = 15;
+            minFontSize = 16;
 
             // Find the word with the maximum percentage. I.e. the most popular word.
             $.each(words, function(index, word) {
@@ -171,12 +175,12 @@
 
                     return size;
                 })
-            .on('end', function(words, bounds) {
+                .on('end', function(words, bounds) { // eslint-disable-line no-shadow
                     // Draw the word cloud.
                     _this.drawWordCloud(response, words, bounds);
                 })
                 .start();
-        }; // End-of: WordCloudMain.prototype.showWordCloud = function (response) {
+        }; // End-of: WordCloudMain.prototype.showWordCloud = function(response) {
 
         /**
          * @function drawWordCloud
@@ -213,7 +217,10 @@
                 cloudSectionEl = this.wordCloudEl.find('.result_cloud_section'),
 
                 // Needed for caсhing of d3 group elements
-                groupEl;
+                groupEl,
+
+                // Iterator for word cloud count for uniqueness
+                wcCount = 0;
 
             // If bounding rectangle is given, scale based on the bounding box of all the words.
             if (bounds) {
@@ -228,15 +235,40 @@
             $.each(response.student_words, function(word, stat) {
                 var percent = (response.display_student_percents) ? ' ' + (Math.round(100 * (stat / response.total_count))) + '%' : '';
 
-                studentWordsKeys.push('<strong>' + word + '</strong>' + percent);
+                studentWordsKeys.push(HtmlUtils.interpolateHtml(
+                    '{listStart}{startTag}{word}{endTag}{percent}{listEnd}',
+                    {
+                        listStart: HtmlUtils.HTML('<li>'),
+                        startTag: HtmlUtils.HTML('<strong>'),
+                        word: word,
+                        endTag: HtmlUtils.HTML('</strong>'),
+                        percent: percent,
+                        listEnd: HtmlUtils.HTML('</li>')
+                    }
+                ).toString());
             });
-            studentWordsStr = '' + studentWordsKeys.join(', ');
+
+            studentWordsStr = '' + studentWordsKeys.join('');
 
             cloudSectionEl
-            .addClass('active')
-            .find('.your_words').html(studentWordsStr)
-            .end()
-            .find('.total_num_words').html(response.total_count);
+                .addClass('active');
+
+            HtmlUtils.setHtml(
+                cloudSectionEl.find('.your_words'),
+                HtmlUtils.HTML(studentWordsStr)
+            );
+
+            HtmlUtils.setHtml(
+                cloudSectionEl.find('.your_words').end().find('.total_num_words'),
+                HtmlUtils.interpolateHtml(
+                    gettext('{start_strong}{total}{end_strong} words submitted in total.'),
+                    {
+                        start_strong: HtmlUtils.HTML('<strong>'),
+                        end_strong: HtmlUtils.HTML('</strong>'),
+                        total: response.total_count
+                    }
+                )
+            );
 
             $(cloudSectionEl.attr('id') + ' .word_cloud').empty();
 
@@ -248,10 +280,31 @@
                     .attr('transform', 'translate(' + (0.5 * this.width) + ',' + (0.5 * this.height) + ')')
                     .selectAll('text')
                     .data(words)
-                .enter().append('g');
+                    .enter()
+                    .append('g')
+                    .attr('data-id', function() {
+                        wcCount = wcCount + 1;
+                        return wcCount;
+                    })
+                    .attr('aria-describedby', function() {
+                        return HtmlUtils.interpolateHtml(
+                            gettext('text_word_{uniqueId} title_word_{uniqueId}'),
+                            {
+                                uniqueId: generateUniqueId(cloudSectionEl.attr('id'), $(this).data('id'))
+                            }
+                        );
+                    });
 
             groupEl
                 .append('title')
+                .attr('id', function() {
+                    return HtmlUtils.interpolateHtml(
+                        gettext('title_word_{uniqueId}'),
+                        {
+                            uniqueId: generateUniqueId(cloudSectionEl.attr('id'), $(this).parent().data('id'))
+                        }
+                    );
+                })
                 .text(function(d) {
                     var res = '';
 
@@ -268,6 +321,14 @@
 
             groupEl
                 .append('text')
+                .attr('id', function() {
+                    return HtmlUtils.interpolateHtml(
+                        gettext('text_word_{uniqueId}'),
+                        {
+                            uniqueId: generateUniqueId(cloudSectionEl.attr('id'), $(this).parent().data('id'))
+                        }
+                    );
+                })
                 .style('font-size', function(d) {
                     return d.size + 'px';
                 })
@@ -282,8 +343,7 @@
                 .text(function(d) {
                     return d.text;
                 });
-        }; // End-of: WordCloudMain.prototype.drawWordCloud = function (words, bounds) {
-
+        }; // End-of: WordCloudMain.prototype.drawWordCloud = function(words, bounds) {
         return WordCloudMain;
-    }); // End-of: define('WordCloudMain', [], function () {
-}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define) {
+    }); // End-of: define('WordCloudMain', [], function() {
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function(requirejs, require, define) {

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):
+            <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>