wrapping labels according to sample html

common/lib/capa/capa/responsetypes.py

@@ -251,7 +251,9 @@ class LoncapaResponse(object):
           - response_msg: a message displayed at the end of the Response
         """
         # render ourself as a <span> + our content
-        tree = etree.Element('span')
+        tree = etree.Element('section')
+        tree.set('class', 'wrapper-problem-response')
+        tree.set('tabindex', '-1')
 
         # problem author can make this span display:inline
         if self.xml.get('inline', ''):

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

-<form class="choicegroup capa_inputtype" id="inputtype_${id}">
+<form class="choicegroup capa_inputtype" id="${id}-form">
     <fieldset role="${input_type}group" aria-label="${label}">
       % if response_data['label']:
-        <legend id="${id}-legend" class="response-fieldset-legend">${response_data['label']}</legend>
+        <legend id="${id}-legend" class="response-fieldset-legend field-group-hd">${response_data['label']}</legend>
       % endif
         % for choice_id, choice_description in choices:
-        <label for="input_${id}_${choice_id}"
+          <div class="field" aria-live="polite" aria-atomic="true">
+            <%
+              label_class = 'response-label field-label label-inline'
+            %>
+            <label id="${id}-{$choice_id}-label"
                 ## If the student has selected this choice...
                 % if input_type == 'radio' and ( (isinstance(value, basestring) and (choice_id == value))  or  (not isinstance(value, basestring) and choice_id in value) ):
                 <%
@@ -18,11 +22,12 @@
                         correctness = None
                 %>
                 % if correctness and not show_correctness == 'never':
-            class="choicegroup_${correctness}"
+                  <% label_class += ' choicegroup_${correctness}' %>
                 % endif
                 % endif
+                class="${label_class}"
                 >
-            <input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" aria-role="radio" aria-describedby="answer_${id}" value="${choice_id}"
+                <input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" class="field-input input-${input_type}" aria-role="radio" aria-describedby="answer_${id}" value="${choice_id}"
                 ## If the student selected this choice...
                 % if input_type == 'radio' and ( (isinstance(value, basestring) and (choice_id == value))  or  (not isinstance(value, basestring) and choice_id in value) ):
                 checked="true"
@@ -37,10 +42,11 @@
 
                 % if input_type == 'radio' and ( (isinstance(value, basestring) and (choice_id == value))  or  (not isinstance(value, basestring) and choice_id in value) ):
                 % if status in ('correct', 'partially-correct', 'incorrect') and not show_correctness=='never':
-            <span class="sr status">${choice_description|h} - ${status.display_name}</span>
+                <span class="sr status" id="${id}-{$choice_id}-labeltext">${choice_description|h} - ${status.display_name}</span>
                 % endif
                 % endif
             </label>
+          </div>
         % endfor
         <span id="answer_${id}"></span>
     </fieldset>