AC-551 word cloud accessibility updates

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

@@ -126,7 +126,7 @@ define('WordCloudMain', [], function () {
         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) {
@@ -250,10 +250,17 @@ define('WordCloudMain', [], function () {
                 .attr('transform', 'translate(' + (0.5 * this.width) + ',' + (0.5 * this.height) + ')')
                 .selectAll('text')
                 .data(words)
-                .enter().append('g');
+                .enter()
+                .append('g')
+                .attr('aria-describedby', function(d) {
+                    return 'text_word_' + d.text + ' ' + 'title_word_' + d.text;
+                });
 
         groupEl
             .append('title')
+            .attr('id', function(d) {
+                return 'title_word_' + d.text
+            })
             .text(function (d) {
                 var res = '';
 
@@ -270,6 +277,9 @@ define('WordCloudMain', [], function () {
 
         groupEl
             .append('text')
+            .attr('id', function(d) {
+                return 'text_word_' + d.text
+            })
             .style('font-size', function (d) {
                 return d.size + 'px';
             })

common/lib/xmodule/xmodule/word_cloud_module.py

@@ -41,6 +41,12 @@ class WordCloudFields(object):
         scope=Scope.settings,
         default="Word cloud"
     )
+    instructions = String(
+        display_name=_("Instructions"),
+        help=_("Add instructions for this word cloud"),
+        scope=Scope.settings,
+        default="List your five favorite foods."
+    )
     num_inputs = Integer(
         display_name=_("Inputs"),
         help=_("Number of text boxes available for students to input words/sentences."),
@@ -239,7 +245,8 @@ class WordCloudModule(WordCloudFields, XModule):
             'element_class': self.location.category,
             'ajax_url': self.system.ajax_url,
             'num_inputs': self.num_inputs,
-            'submitted': self.submitted
+            'submitted': self.submitted,
+            'instructions': self.instructions
         }
         self.content = self.system.render_template('word_cloud.html', context)
         return self.content

lms/templates/word_cloud.html

 <%! 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">
+    <div class="input_cloud_instructions" id="word_cloud_${element_id}_instructions">
+        ${instructions}
+    </div>
+
+    <div class="input_cloud_section" role="group">
         % for row in range(num_inputs):
+            <label for="word_cloud_${element_id}_input_${row}" class="sr">${_('Word')} ${row + 1} ${_('of')} ${num_inputs}</label>
             <input
+                id="word_cloud_${element_id}_input_${row}"
                 class="input-cloud"
                 ${'style="display: none;"' if submitted else ''}
                 type="text"
                 size="40"
+                aria-describedby="word_cloud_${element_id}_instructions"
             />
         % endfor
 
-        <section class="action">
+        <div class="action">
             <input class="save" type="button" value="${_('Save')}" />
-        </section>
-    </section>
+        </div>
+    </div>
 
-    <section id="result_cloud_section_${element_id}" class="result_cloud_section">
+    <div 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 class="word_cloud"></div>
-    </section>
+    </div>
 
-</section>
+</div>