Merge pull request #1302 from edx/fix/vik/oe-accessibility

Various open ended accessibility fixes

common/lib/xmodule/xmodule/js/src/combinedopenended/display.coffee

@@ -533,7 +533,7 @@ class @CombinedOpenEnded
   gentle_alert: (msg) =>
     if @$el.find(@oe_alert_sel).length
       @$el.find(@oe_alert_sel).remove()
-    alert_elem = "<div class='open-ended-alert'>" + msg + "</div>"
+    alert_elem = "<div class='open-ended-alert' role='alert'>" + msg + "</div>"
     @$el.find('.open-ended-action').after(alert_elem)
     @$el.find(@oe_alert_sel).css(opacity: 0).animate(opacity: 1, 700)
 

common/lib/xmodule/xmodule/open_ended_grading_classes/combined_open_ended_modulev1.py

@@ -819,10 +819,14 @@ class CombinedOpenEndedV1Module():
         Output: The status html to be rendered
         """
         status = []
+        current_task_human_name = ""
         for i in xrange(0, len(self.task_xml)):
             human_task_name = self.extract_human_name_from_task(self.task_xml[i])
 
-            task_data = {'task_number': i + 1, 'human_task' : human_task_name, 'current' : self.current_task_number==i}
+            # Extract the name of the current task for screen readers.
+            if self.current_task_number == i:
+                current_task_human_name = human_task_name
+            task_data = {'task_number': i + 1, 'human_task': human_task_name, 'current': self.current_task_number==i}
             status.append(task_data)
 
         context = {
@@ -830,6 +834,7 @@ class CombinedOpenEndedV1Module():
             'grader_type_image_dict': GRADER_TYPE_IMAGE_DICT,
             'legend_list': LEGEND_LIST,
             'render_via_ajax': render_via_ajax,
+            'current_task_human_name': current_task_human_name,
         }
         status_html = self.system.render_template("{0}/combined_open_ended_status.html".format(self.TEMPLATE_DIR),
                                                   context)

common/lib/xmodule/xmodule/open_ended_grading_classes/open_ended_module.py

@@ -696,6 +696,13 @@ class OpenEndedModule(openendedchild.OpenEndedChild):
             correct = ""
         previous_answer = self.get_display_answer()
 
+        # Use the module name as a unique id to pass to the template.
+        try:
+            module_id = self.system.location.name
+        except AttributeError:
+            # In cases where we don't have a system or a location, use a fallback.
+            module_id = "open_ended"
+
         context = {
             'prompt': self.child_prompt,
             'previous_answer': previous_answer,
@@ -703,7 +710,7 @@ class OpenEndedModule(openendedchild.OpenEndedChild):
             'allow_reset': self._allow_reset(),
             'rows': 30,
             'cols': 80,
-            'id': 'open_ended',
+            'module_id': module_id,
             'msg': post_assessment,
             'child_type': 'openended',
             'correct': correct,

common/lib/xmodule/xmodule/open_ended_grading_classes/self_assessment_module.py

@@ -57,6 +57,13 @@ class SelfAssessmentModule(openendedchild.OpenEndedChild):
         # set context variables and render template
         previous_answer = self.get_display_answer()
 
+        # Use the module name as a unique id to pass to the template.
+        try:
+            module_id = self.system.location.name
+        except AttributeError:
+            # In cases where we don't have a system or a location, use a fallback.
+            module_id = "self_assessment"
+
         context = {
             'prompt': self.child_prompt,
             'previous_answer': previous_answer,
@@ -66,6 +73,7 @@ class SelfAssessmentModule(openendedchild.OpenEndedChild):
             'allow_reset': self._allow_reset(),
             'child_type': 'selfassessment',
             'accept_file_upload': self.accept_file_upload,
+            'module_id': module_id,
         }
 
         html = system.render_template('{0}/self_assessment_prompt.html'.format(self.TEMPLATE_DIR), context)

lms/templates/combinedopenended/combined_open_ended_status.html

@@ -12,4 +12,5 @@
             </div>
         %endfor
     </section>
+    <div class="hidden">Current Assessment Type: ${current_task_human_name}</div>
 </div>

lms/templates/combinedopenended/openended/open_ended.html

 <%! from django.utils.translation import ugettext as _ %>
-<section id="openended_${id}" class="open-ended-child" data-state="${state}" data-child-type="${child_type}">
+<section id="openended_${module_id}" class="open-ended-child" data-state="${state}" data-child-type="${child_type}">
    <div class="error"></div>
    <div class="prompt">
     ${prompt|n}
@@ -7,9 +7,9 @@
     <div class="visibility-control visibility-control-response">
         <div class="inner">
         </div>
-        <span class="section-header section-header-response">${_("Response")}</span>
+        <label class="section-header section-header-response" for="answer_${module_id}">Response</label>
     </div>
-  <textarea rows="${rows}" cols="${cols}" name="answer" class="answer short-form-response" id="input_${id}">${previous_answer|h}</textarea>
+  <textarea rows="${rows}" cols="${cols}" name="answer" class="answer short-form-response" id="answer_${module_id}">${previous_answer|h}</textarea>
 
   <div class="message-wrapper"></div>
   <div class="grader-status">

lms/templates/combinedopenended/openended/open_ended_rubric.html

@@ -11,7 +11,7 @@
         % for i in range(len(categories)):
         <% category = categories[i] %>
         <% m = randint(0,1000) %>
-            <span class="rubric-category">${category['description']}</span>
+            <span class="rubric-category" tabindex="${i}">${category['description']}</span>
             <ul class="rubric-list">
                 % for j in range(len(category['options'])):
                 <% option = category['options'][j] %>

lms/templates/combinedopenended/selfassessment/self_assessment_prompt.html

 <%! from django.utils.translation import ugettext as _ %>
-<section id="self_assessment_${id}" class="open-ended-child" data-ajax-url="${ajax_url}"
+<section id="self_assessment_${module_id}" class="open-ended-child" data-ajax-url="${ajax_url}"
          data-id="${id}" data-state="${state}" data-allow_reset="${allow_reset}" data-child-type="${child_type}">
     <div class="error"></div>
     <div class="prompt">
@@ -8,10 +8,10 @@
     <div class="visibility-control visibility-control-response">
         <div class="inner">
         </div>
-        <span class="section-header section-header-response">${_("Response")}</span>
+        <label class="section-header section-header-response" for="answer_${module_id}">Response</label>
     </div>
     <div>
-    <textarea name="answer" class="answer short-form-response" cols="70" rows="20">${previous_answer|n}</textarea>
+    <textarea name="answer" class="answer short-form-response" cols="70" rows="20" id="answer_${module_id}">${previous_answer|n}</textarea>
 
     <div class="message-wrapper"></div>
     <div class="grader-status"></div>