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}"
-            ## 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) ):
+          <div class="field" aria-live="polite" aria-atomic="true">
             <%
-                if status == 'correct':
-                    correctness = 'correct'
-                elif status == 'partially-correct':
-                    correctness = 'partially-correct'
-                elif status == 'incorrect':
-                    correctness = 'incorrect'
-                else:
-                    correctness = None
+              label_class = 'response-label field-label label-inline'
             %>
-            % if correctness and not show_correctness == 'never':
-            class="choicegroup_${correctness}"
-            % endif
-            % endif
-            >
-            <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}"
-            ## 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"
-            % elif input_type != 'radio' and choice_id in value:
-            checked="true"
-            % endif
-            % if input_type != 'radio':
-            aria-multiselectable="true"
-            % endif
+            <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) ):
+                <%
+                    if status == 'correct':
+                        correctness = 'correct'
+                    elif status == 'partially-correct':
+                        correctness = 'partially-correct'
+                    elif status == 'incorrect':
+                        correctness = 'incorrect'
+                    else:
+                        correctness = None
+                %>
+                % if correctness and not show_correctness == 'never':
+                  <% label_class += ' choicegroup_${correctness}' %>
+                % endif
+                % endif
+                class="${label_class}"
+                >
+                <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"
+                % elif input_type != 'radio' and choice_id in value:
+                checked="true"
+                % endif
+                % if input_type != 'radio':
+                aria-multiselectable="true"
+                % endif
 
-            /> ${choice_description}
+                /> ${choice_description}
 
-            % 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>
-            % endif
-            % endif
-        </label>
+                % 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" id="${id}-{$choice_id}-labeltext">${choice_description|h} - ${status.display_name}</span>
+                % endif
+                % endif
+            </label>
+          </div>
         % endfor
         <span id="answer_${id}"></span>
     </fieldset>