Merge pull request #7751 from edx/ahsan/tnl-1677-numerical-input-accessibility-problem

Numerical Input assessment has multiple accessibilty issues

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

@@ -4,23 +4,14 @@
     <input type="text" name="input_${id}" id="input_${id}"
         data-input-id="${id}" value="${value|h}"
         aria-label="${label}"
+        aria-describedby="${id}_status"
         % if size:
         size="${size}"
         % endif
         />
 
-      <p class="status" 
-         %if status != 'unsubmitted':
-         aria-hidden="true"
-         %endif
-         >
-          <span class="sr equation">
-              %if value:
-              ${value|h}
-              % else:
-              ${label}
-              %endif
-          </span> - ${status.display_name}
+      <p class="status" id="${id}_status">
+           ${status.display_name}
       </p>
 
       <div id="input_${id}_preview" class="equation">

common/templates/mathjax_include.html

@@ -29,6 +29,23 @@
   });
 </script>
 %endif
+<script type="text/x-mathjax-config">
+  window.HUB = MathJax.Hub;
+  MathJax.Hub.signal.Interest(function(message) {
+    if(message[0] === "End Math") {
+        set_mathjax_display_div_settings();
+    }
+  });
+  function set_mathjax_display_div_settings() {
+    $('.MathJax_Display').each(function( index ) {
+      this.setAttribute('tabindex', '0');
+      this.setAttribute('aria-live', 'off');
+      this.removeAttribute('role');
+      this.removeAttribute('aria-readonly');
+    });
+  }
+</script>
+
 
 <!-- This must appear after all mathjax-config blocks, so it is after the imports from the other templates.
      It can't be run through static.url because MathJax uses crazy url introspection to do lazy loading of