make numerical and math expression input accessible

TNL-4973

common/lib/capa/capa/templates/annotationinput.html

@@ -1,3 +1,4 @@
+<%! from openedx.core.djangolib.markup import HTML %>
 <form class="annotation-input">
 <div class="script_placeholder" data-src="${STATIC_URL}js/capa/annotationinput.js"/>
 
@@ -59,6 +60,5 @@
 </form>
 
 % if msg:
-<span class="message">${msg|n}</span>
+<span class="message">${HTML(msg)}</span>
 % endif
-

common/lib/capa/capa/templates/choicegroup.html

@@ -1,3 +1,4 @@
+<%! from openedx.core.djangolib.markup import HTML %>
 <%
   def is_radio_input(choice_id):
     return input_type == 'radio' and ((isinstance(value, basestring) and (choice_id == value)) or (
@@ -73,6 +74,6 @@
     <div class="capa_alert">${submitted_message}</div>
     %endif
     % if msg:
-    <span class="message">${msg|n}</span>
+    <span class="message">${HTML(msg)}</span>
     % endif
 </form>

common/lib/capa/capa/templates/drag_and_drop_input.html

@@ -1,3 +1,4 @@
+<%! from openedx.core.djangolib.markup import HTML %>
 <div id="inputtype_${id}" class="capa_inputtype">
     <div class="drag_and_drop_problem_div" id="drag_and_drop_div_${id}"
      data-plain-id="${id}">
@@ -23,7 +24,7 @@
     <p id="answer_${id}" class="answer"></p>
 
     % if msg:
-        <span class="message">${msg|n}</span>
+        <span class="message">${HTML(msg)}</span>
     % endif
 
     % if status in ['unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete']:

common/lib/capa/capa/templates/filesubmission.html

@@ -1,3 +1,4 @@
+<%! from openedx.core.djangolib.markup import HTML %>
 <section id="filesubmission_${id}" class="filesubmission">
   <div class="grader-status file">
 
@@ -9,5 +10,5 @@
 
     <input type="file" name="input_${id}" id="input_${id}" value="${value}" multiple="multiple" data-required_files="${required_files|h}" data-allowed_files="${allowed_files|h}" aria-label="${response_data['label']}"/>
   </div>
-    <div class="message">${msg|n}</div>
+    <div class="message">${HTML(msg)}</div>
 </section>

common/lib/capa/capa/templates/formulaequationinput.html

@@ -1,34 +1,38 @@
 <%page expression_filter="h"/>
 <%! from openedx.core.djangolib.markup import HTML %>
 <% doinline = 'style="display:inline-block;vertical-align:top"' if inline else "" %>
-<section id="formulaequationinput_${id}" class="inputtype formulaequationinput" ${doinline | n}>
-  <div class="${status.classname}" id="status_${id}">
-    <input type="text" name="input_${id}" id="input_${id}"
-        data-input-id="${id}" value="${value}"
-        ${describedby| n}
-        % if size:
-        size="${size}"
-        % endif
-        />
-    <span class="trailing_text">${trailing_text}</span>
+<div id="formulaequationinput_${id}" class="inputtype formulaequationinput" ${doinline | n}>
+    <div class="${status.classname}" id="status_${id}">
+        <label class="problem-group-label" for="input_${id}">${response_data['label']}</label>
+        % for description_id, description_text in response_data['descriptions'].items():
+            <p class="question-description" id="${description_id}">${description_text}</p>
+        % endfor
+        <input type="text" name="input_${id}" id="input_${id}"
+            data-input-id="${id}" value="${value}"
+            ${describedby| n}
+            % if size:
+            size="${size}"
+            % endif
+            />
+        <span class="trailing_text">${trailing_text}</span>
 
-      <span class="status" id="${id}_status" data-tooltip="${status.display_tooltip}">
-        <span class="sr">
-          ${status.display_name}
+        <span class="status" id="${id}_status" data-tooltip="${status.display_tooltip}">
+            <span class="sr">
+                ${status.display_name}
+            </span>
         </span>
-      </span>
 
-      <p id="answer_${id}" class="answer"></p>
+        <p id="answer_${id}" class="answer"></p>
 
-      <div id="input_${id}_preview" class="equation">
-        \(\)
-        <img src="${STATIC_URL}images/spinner.gif" class="loading" alt="Loading"/>
-      </div>
-  </div>
+        <div id="input_${id}_preview" class="equation">
+            \(\)
+            <img src="${STATIC_URL}images/spinner.gif" class="loading" alt="Loading"/>
+        </div>
+    </div>
 
-  <div class="script_placeholder" data-src="${previewer}"/>
+    <div class="script_placeholder" data-src="${previewer}"/>
 
   % if msg:
       <span class="message">${HTML(msg)}</span>
   % endif
-</section>
+</div>

common/lib/capa/capa/templates/optioninput.html

@@ -1,3 +1,4 @@
+<%! from openedx.core.djangolib.markup import HTML %>
 <% doinline = "inline" if inline else "" %>
 
 <form class="inputtype option-input ${doinline}">
@@ -29,6 +30,6 @@
   </div>
   <p class="answer" id="answer_${id}"></p>
   % if msg:
-      <span class="message">${msg|n}</span>
+      <span class="message">${HTML(msg)}</span>
   % endif
 </form>

common/lib/capa/capa/templates/vsepr_input.html

@@ -1,3 +1,4 @@
+<%! from openedx.core.djangolib.markup import HTML %>
 <section id="inputtype_${id}" class="capa_inputtype" >
      <table><tr><td height='600'>
     <div id="vsepr_div_${id}" style="position:relative;" data-molecules="${molecules}" data-geometries="${geometries}">
@@ -26,7 +27,7 @@
   <p id="answer_${id}" class="answer"></p>
 
   % if msg:
-      <span class="message">${msg|n}</span>
+      <span class="message">${HTML(msg)}</span>
   % endif
 % if status in ['unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete']:
 </div>

common/lib/capa/capa/tests/test_input_templates.py

@@ -579,7 +579,7 @@ class FormulaEquationInputTemplateTest(TemplateTestCase):
         Test that correct description information is set on desired elements.
         """
         xpaths = ['//input/@aria-describedby']
-        self.assert_description(xpaths, descriptions=False)
+        self.assert_description(xpaths)
         self.assert_describedby_attribute(xpaths)