From 6ff762b63e3f22ccc167f1b2805600d76f852af6 Mon Sep 17 00:00:00 2001
From: muhammad-ammar <mammar@gmail.com>
Date: Mon, 19 Sep 2016 16:22:58 +0500
Subject: [PATCH] allow html inside label and descriptions

TNL-5557
---
 common/lib/capa/capa/capa_problem.py          |  22 +--
 common/lib/capa/capa/inputtypes.py            |   4 +-
 .../capa/templates/chemicalequationinput.html |   3 +-
 .../lib/capa/capa/templates/choicegroup.html  |   7 +-
 .../lib/capa/capa/templates/choicetext.html   |   3 +-
 .../capa/templates/formulaequationinput.html  |   2 +-
 .../lib/capa/capa/templates/optioninput.html  |   3 +-
 .../capa/capa/templates/schematicinput.html   |   3 +-
 common/lib/capa/capa/templates/textline.html  |   2 +-
 .../lib/capa/capa/tests/test_capa_problem.py  |  97 +++++-----
 .../lib/capa/capa/tests/test_html_render.py   |   2 +-
 .../capa/capa/tests/test_input_templates.py   | 172 ++++++++++++++----
 common/lib/capa/capa/tests/test_inputtypes.py |  53 +++---
 common/lib/capa/capa/tests/test_util.py       |  11 +-
 common/lib/capa/capa/util.py                  |  13 ++
 15 files changed, 259 insertions(+), 138 deletions(-)

diff --git a/common/lib/capa/capa/capa_problem.py b/common/lib/capa/capa/capa_problem.py
index 687bdd7e8e..548ccd43da 100644
--- a/common/lib/capa/capa/capa_problem.py
+++ b/common/lib/capa/capa/capa_problem.py
@@ -31,6 +31,8 @@ import capa.responsetypes as responsetypes
 from capa.util import contextualize_text, convert_files_to_filenames
 import capa.xqueue_interface as xqueue_interface
 from capa.safe_exec import safe_exec
+from openedx.core.djangolib.markup import HTML
+from xmodule.stringify import stringify_children
 
 
 # extra things displayed after "show answers" is pressed
@@ -926,7 +928,7 @@ class LoncapaProblem(object):
                 group_label_tag.tag = 'p'
                 group_label_tag.set('id', responsetype_id)
                 group_label_tag.set('class', 'multi-inputs-group-label')
-                group_label_tag_text = group_label_tag.text
+                group_label_tag_text = stringify_children(group_label_tag)
 
             for inputfield in inputfields:
                 problem_data[inputfield.get('id')] = {
@@ -938,7 +940,7 @@ class LoncapaProblem(object):
             # Extract label value from <label> tag or label attribute from inside the responsetype
             responsetype_label_tag = response.find('label')
             if responsetype_label_tag is not None:
-                label = responsetype_label_tag.text
+                label = stringify_children(responsetype_label_tag)
                 # store <label> tag containing question text to delete
                 # it later otherwise question will be rendered twice
                 element_to_be_deleted = responsetype_label_tag
@@ -950,21 +952,15 @@ class LoncapaProblem(object):
                 p_tag = response.xpath('preceding-sibling::*[1][self::p]')
 
                 if p_tag and p_tag[0].text == inputfields[0].attrib['label']:
-                    label = p_tag[0].text
-
-                    p_tag_children = list(p_tag[0])
-                    if len(p_tag_children) == 0:
-                        element_to_be_deleted = p_tag[0]
-                    else:
-                        # Delete the text from the p-tag, but leave the children.
-                        p_tag[0].text = ''
+                    label = stringify_children(p_tag[0])
+                    element_to_be_deleted = p_tag[0]
             else:
                 # In this case the problems don't have tag or label attribute inside the responsetype
                 # so we will get the first preceding label tag w.r.t to this responsetype.
                 # This will take care of those multi-question problems that are not using --- in their markdown.
                 label_tag = response.xpath('preceding-sibling::*[1][self::label]')
                 if label_tag:
-                    label = label_tag[0].text
+                    label = stringify_children(label_tag[0])
                     element_to_be_deleted = label_tag[0]
 
             # delete label or p element only if inputtype is fully accessible
@@ -978,11 +974,11 @@ class LoncapaProblem(object):
             for description in description_tags:
                 descriptions[
                     "description_%s_%i" % (responsetype_id, description_id)
-                ] = description.text
+                ] = HTML(stringify_children(description))
                 response.remove(description)
                 description_id += 1
 
             problem_data[inputfields[0].get('id')] = {
-                'label': label.strip() if label else '',
+                'label': HTML(label.strip()) if label else '',
                 'descriptions': descriptions
             }
diff --git a/common/lib/capa/capa/inputtypes.py b/common/lib/capa/capa/inputtypes.py
index 8816fc6556..1365fde94a 100644
--- a/common/lib/capa/capa/inputtypes.py
+++ b/common/lib/capa/capa/inputtypes.py
@@ -322,14 +322,14 @@ class InputTypeBase(object):
             'msg': self.msg,
             'response_data': self.response_data,
             'STATIC_URL': self.capa_system.STATIC_URL,
-            'describedby': '',
+            'describedby_html': '',
         }
 
         # Don't add aria-describedby attribute if there are no descriptions
         if self.response_data.get('descriptions'):
             description_ids = ' '.join(self.response_data.get('descriptions').keys())
             context.update(
-                {'describedby': 'aria-describedby="{}"'.format(description_ids)}
+                {'describedby_html': 'aria-describedby="{}"'.format(description_ids)}
             )
 
         context.update(
diff --git a/common/lib/capa/capa/templates/chemicalequationinput.html b/common/lib/capa/capa/templates/chemicalequationinput.html
index 944560a55f..380e4b6e8d 100644
--- a/common/lib/capa/capa/templates/chemicalequationinput.html
+++ b/common/lib/capa/capa/templates/chemicalequationinput.html
@@ -1,9 +1,10 @@
+<%! from capa.util import remove_markup %>
 <div id="chemicalequationinput_${id}" class="chemicalequationinput">
     <div class="script_placeholder" data-src="${previewer}"/>
 
     <div class="${status.classname}" id="status_${id}">
 
-    <input type="text" name="input_${id}" id="input_${id}" aria-label="${response_data['label']}" aria-describedby="answer_${id}" data-input-id="${id}" value="${value|h}"
+    <input type="text" name="input_${id}" id="input_${id}" aria-label="${remove_markup(response_data['label'])}" aria-describedby="answer_${id}" data-input-id="${id}" value="${value|h}"
    % if size:
    size="${size}"
    % endif
diff --git a/common/lib/capa/capa/templates/choicegroup.html b/common/lib/capa/capa/templates/choicegroup.html
index ff6377ff55..bcad73897a 100644
--- a/common/lib/capa/capa/templates/choicegroup.html
+++ b/common/lib/capa/capa/templates/choicegroup.html
@@ -1,3 +1,4 @@
+<%page expression_filter="h"/>
 <%! from openedx.core.djangolib.markup import HTML %>
 <%
   def is_radio_input(choice_id):
@@ -6,7 +7,7 @@
     ))
 %>
 <form class="choicegroup capa_inputtype" id="inputtype_${id}">
-    <fieldset ${describedby}>
+    <fieldset ${HTML(describedby_html)}>
       % if response_data['label']:
         <legend id="${id}-legend" class="response-fieldset-legend field-group-hd">${response_data['label']}</legend>
       % endif
@@ -36,7 +37,7 @@
                     % endif
                 % endif
                 class="${label_class}"
-                ${describedby}
+                ${HTML(describedby_html)}
                 >
                 <input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" class="field-input input-${input_type}" value="${choice_id}"
                 ## If the student selected this choice...
@@ -45,7 +46,7 @@
                 % elif input_type != 'radio' and choice_id in value:
                 checked="true"
                 % endif
-                /> ${choice_label}
+                /> ${HTML(choice_label)}
 
                 % if is_radio_input(choice_id):
                   % if status in ('correct', 'partially-correct', 'incorrect') and not show_correctness == 'never':
diff --git a/common/lib/capa/capa/templates/choicetext.html b/common/lib/capa/capa/templates/choicetext.html
index ca2d3ff5a9..0199a2f8d0 100644
--- a/common/lib/capa/capa/templates/choicetext.html
+++ b/common/lib/capa/capa/templates/choicetext.html
@@ -1,3 +1,4 @@
+<%! from capa.util import remove_markup %>
 <%! from django.utils.translation import ugettext as _ %>
 <% element_checked = False %>
 % for choice_id, _ in choices:
@@ -10,7 +11,7 @@
 <form class="choicetextgroup capa_inputtype" id="inputtype_${id}">
     <div class="script_placeholder" data-src="${STATIC_URL}js/capa/choicetextinput.js"/>
 
-    <fieldset aria-label="${response_data['label']}">
+    <fieldset aria-label="${remove_markup(response_data['label'])}">
         % for choice_id, choice_description in choices:
         <% choice_id = choice_id %>
         <section id="forinput${choice_id}"
diff --git a/common/lib/capa/capa/templates/formulaequationinput.html b/common/lib/capa/capa/templates/formulaequationinput.html
index 124e6633ab..8a857b58a0 100644
--- a/common/lib/capa/capa/templates/formulaequationinput.html
+++ b/common/lib/capa/capa/templates/formulaequationinput.html
@@ -11,7 +11,7 @@
         % endfor
         <input type="text" name="input_${id}" id="input_${id}"
             data-input-id="${id}" value="${value}"
-            ${describedby | n, decode.utf8}
+            ${HTML(describedby_html)}
             % if size:
             size="${size}"
             % endif
diff --git a/common/lib/capa/capa/templates/optioninput.html b/common/lib/capa/capa/templates/optioninput.html
index 58962eb997..f32544145b 100644
--- a/common/lib/capa/capa/templates/optioninput.html
+++ b/common/lib/capa/capa/templates/optioninput.html
@@ -1,3 +1,4 @@
+<%page expression_filter="h"/>
 <%! from openedx.core.djangolib.markup import HTML %>
 <% doinline = "inline" if inline else "" %>
 
@@ -10,7 +11,7 @@
     <p class="question-description" id="${description_id}">${description_text}</p>
   % endfor
 
-   <select name="input_${id}" id="input_${id}" ${describedby}>
+   <select name="input_${id}" id="input_${id}" ${HTML(describedby_html)}>
       <option value="option_${id}_dummy_default">${default_option_text}</option>
       % for option_id, option_description in options:
           <option value="${option_id}"
diff --git a/common/lib/capa/capa/templates/schematicinput.html b/common/lib/capa/capa/templates/schematicinput.html
index 3fc6c6ffe2..bd1d2097cd 100644
--- a/common/lib/capa/capa/templates/schematicinput.html
+++ b/common/lib/capa/capa/templates/schematicinput.html
@@ -1,3 +1,4 @@
+<%! from capa.util import remove_markup %>
 <div>
   <div class="script_placeholder" data-src="${setup_script}"/>
   <input type="hidden"
@@ -8,7 +9,7 @@
     analyses="${analyses}"
     name="input_${id}"
     id="input_${id}"
-    aria-label="${response_data['label']}"
+    aria-label="${remove_markup(response_data['label'])}"
     aria-describedby="answer_${id}"
     value="${value|h}"
     initial_value="${initial_value|h}"
diff --git a/common/lib/capa/capa/templates/textline.html b/common/lib/capa/capa/templates/textline.html
index 111396a1bd..de4d2740bc 100644
--- a/common/lib/capa/capa/templates/textline.html
+++ b/common/lib/capa/capa/templates/textline.html
@@ -23,7 +23,7 @@
 % 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}" ${describedby | n, decode.utf8} value="${value}"
+<input type="text" name="input_${id}" id="input_${id}" ${HTML(describedby_html)} value="${value}"
     % if do_math:
         class="math"
     % endif
diff --git a/common/lib/capa/capa/tests/test_capa_problem.py b/common/lib/capa/capa/tests/test_capa_problem.py
index 8a65b0f1d5..381f0d0722 100644
--- a/common/lib/capa/capa/tests/test_capa_problem.py
+++ b/common/lib/capa/capa/tests/test_capa_problem.py
@@ -13,7 +13,12 @@ from capa.tests.helpers import new_loncapa_problem
 class CAPAProblemTest(unittest.TestCase):
     """ CAPA problem related tests"""
 
-    def test_label_and_description_inside_responsetype(self):
+    @ddt.unpack
+    @ddt.data(
+        {'question': 'Select the correct synonym of paranoid?'},
+        {'question': 'Select the correct <em>synonym</em> of <strong>paranoid</strong>?'},
+    )
+    def test_label_and_description_inside_responsetype(self, question):
         """
         Verify that
         * label is extracted
@@ -25,7 +30,7 @@ class CAPAProblemTest(unittest.TestCase):
         xml = """
         <problem>
             <choiceresponse>
-                <label>Select the correct synonym of paranoid?</label>
+                <label>{question}</label>
                 <description>Only the paranoid survive.</description>
                 <checkboxgroup>
                     <choice correct="true">over-suspicious</choice>
@@ -33,25 +38,35 @@ class CAPAProblemTest(unittest.TestCase):
                 </checkboxgroup>
             </choiceresponse>
         </problem>
-        """
+        """.format(question=question)
         problem = new_loncapa_problem(xml)
         self.assertEqual(
             problem.problem_data,
             {
                 '1_2_1':
                 {
-                    'label': 'Select the correct synonym of paranoid?',
+                    'label': question,
                     'descriptions': {'description_1_1_1': 'Only the paranoid survive.'}
                 }
             }
         )
         self.assertEqual(len(problem.tree.xpath('//label')), 0)
 
-    def test_legacy_problem(self):
+    @ddt.unpack
+    @ddt.data(
+        {
+            'question': 'Once we become predictable, we become ______?',
+            'label_attr': 'Once we become predictable, we become ______?'
+        },
+        {
+            'question': 'Once we become predictable, we become ______?<img src="img/src"/>',
+            'label_attr': 'Once we become predictable, we become ______?'
+        },
+    )
+    def test_legacy_problem(self, question, label_attr):
         """
         Verify that legacy problem is handled correctly.
         """
-        question = "Once we become predictable, we become ______?"
         xml = """
         <problem>
             <p>Be sure to check your spelling.</p>
@@ -60,7 +75,7 @@ class CAPAProblemTest(unittest.TestCase):
                 <textline label="{}" size="40"/>
             </stringresponse>
         </problem>
-        """.format(question, question)
+        """.format(question, label_attr)
         problem = new_loncapa_problem(xml)
         self.assertEqual(
             problem.problem_data,
@@ -77,7 +92,18 @@ class CAPAProblemTest(unittest.TestCase):
             0
         )
 
-    def test_neither_label_tag_nor_attribute(self):
+    @ddt.unpack
+    @ddt.data(
+        {
+            'question1': 'People who say they have nothing to ____ almost always do?',
+            'question2': 'Select the correct synonym of paranoid?'
+        },
+        {
+            'question1': '<b>People</b> who say they have <mark>nothing</mark> to ____ almost always do?',
+            'question2': 'Select the <sup>correct</sup> synonym of <mark>paranoid</mark>?'
+        },
+    )
+    def test_neither_label_tag_nor_attribute(self, question1, question2):
         """
         Verify that label is extracted correctly.
 
@@ -86,8 +112,6 @@ class CAPAProblemTest(unittest.TestCase):
         tag and label attribute inside responsetype. But we have a label tag
         before the responsetype.
         """
-        question1 = 'People who say they have nothing to ____ almost always do?'
-        question2 = 'Select the correct synonym of paranoid?'
         xml = """
         <problem>
             <p>Be sure to check your spelling.</p>
@@ -131,17 +155,19 @@ class CAPAProblemTest(unittest.TestCase):
         """
         Verify that multiple descriptions are handled correctly.
         """
+        desc1 = "The problem with trying to be the <em>bad guy</em>, there's always someone <strong>worse</strong>."
+        desc2 = "Anyone who looks the world as if it was a game of chess deserves to lose."
         xml = """
         <problem>
             <p>Be sure to check your spelling.</p>
             <stringresponse answer="War" type="ci">
                 <label>___ requires sacrifices.</label>
-                <description>The problem with trying to be the bad guy, there's always someone worse.</description>
-                <description>Anyone who looks the world as if it was a game of chess deserves to lose.</description>
+                <description>{}</description>
+                <description>{}</description>
                 <textline size="40"/>
             </stringresponse>
         </problem>
-        """
+        """.format(desc1, desc2)
         problem = new_loncapa_problem(xml)
         self.assertEqual(
             problem.problem_data,
@@ -150,8 +176,8 @@ class CAPAProblemTest(unittest.TestCase):
                 {
                     'label': '___ requires sacrifices.',
                     'descriptions': {
-                        'description_1_1_1': "The problem with trying to be the bad guy, there's always someone worse.",
-                        'description_1_1_2': "Anyone who looks the world as if it was a game of chess deserves to lose."
+                        'description_1_1_1': desc1,
+                        'description_1_1_2': desc2
                     }
                 }
             }
@@ -298,11 +324,15 @@ class CAPAProblemTest(unittest.TestCase):
             1
         )
 
-    def test_multiple_inputtypes(self):
+    @ddt.unpack
+    @ddt.data(
+        {'group_label': 'Choose the correct color'},
+        {'group_label': 'Choose the <b>correct</b> <mark>color</mark>'},
+    )
+    def test_multiple_inputtypes(self, group_label):
         """
         Verify that group label and labels for individual inputtypes are extracted correctly.
         """
-        group_label = 'Choose the correct color'
         input1_label = 'What color is the sky?'
         input2_label = 'What color are pine needles?'
         xml = """
@@ -424,39 +454,6 @@ class CAPAProblemTest(unittest.TestCase):
         self.assert_question_tag(question1, question2, tag='label', label_attr=False)
         self.assert_question_tag(question1, question2, tag='p', label_attr=True)
 
-    def test_question_tag_child_left(self):
-        """
-        If the "old" question tag has children, don't delete the children when
-        transforming to the new label tag.
-        """
-        xml = """
-            <problem>
-                <p>Question<img src='img/src'/></p>
-                <choiceresponse>
-                    <checkboxgroup label="Question">
-                        <choice correct="true">choice1</choice>
-                        <choice correct="false">choice2</choice>
-                    </checkboxgroup>
-                </choiceresponse>
-            </problem>
-            """
-
-        problem = new_loncapa_problem(xml)
-        self.assertEqual(
-            problem.problem_data,
-            {
-                '1_2_1':
-                    {
-                        'label': "Question",
-                        'descriptions': {}
-                    }
-            }
-        )
-        # img tag is still present within the paragraph, but p text has been deleted
-        self.assertEqual(len(problem.tree.xpath('//p')), 1)
-        self.assertEqual(problem.tree.xpath('//p')[0].text, '')
-        self.assertEqual(len(problem.tree.xpath('//p/img')), 1)
-
 
 @ddt.ddt
 class CAPAMultiInputProblemTest(unittest.TestCase):
diff --git a/common/lib/capa/capa/tests/test_html_render.py b/common/lib/capa/capa/tests/test_html_render.py
index 3b9b2db62c..d446bce228 100644
--- a/common/lib/capa/capa/tests/test_html_render.py
+++ b/common/lib/capa/capa/tests/test_html_render.py
@@ -186,7 +186,7 @@ class CapaHtmlRenderTest(unittest.TestCase):
             'trailing_text': '',
             'size': None,
             'response_data': {'label': '', 'descriptions': {}},
-            'describedby': ''
+            'describedby_html': ''
         }
 
         expected_solution_context = {'id': '1_solution_1'}
diff --git a/common/lib/capa/capa/tests/test_input_templates.py b/common/lib/capa/capa/tests/test_input_templates.py
index ad411dde60..0c70f79f13 100644
--- a/common/lib/capa/capa/tests/test_input_templates.py
+++ b/common/lib/capa/capa/tests/test_input_templates.py
@@ -11,6 +11,7 @@ from lxml import etree
 from mako.template import Template as MakoTemplate
 from mako import exceptions
 from capa.inputtypes import Status
+from xmodule.stringify import stringify_children
 
 
 class TemplateError(Exception):
@@ -31,7 +32,12 @@ class TemplateTestCase(unittest.TestCase):
     # for example: choicegroup.html
     TEMPLATE_NAME = None
     DESCRIBEDBY = 'aria-describedby="desc-1 desc-2"'
-    DESCRIPTIONS = OrderedDict([('desc-1', 'description text 1'), ('desc-2', 'description text 2')])
+    DESCRIPTIONS = OrderedDict(
+        [
+            ('desc-1', 'description text 1'),
+            ('desc-2', '<em>description</em> <mark>text</mark> 2')
+        ]
+    )
     DESCRIPTION_IDS = ' '.join(DESCRIPTIONS.keys())
     RESPONSE_DATA = {
         'label': 'question text 101',
@@ -48,7 +54,7 @@ class TemplateTestCase(unittest.TestCase):
                                           'templates',
                                           self.TEMPLATE_NAME)
         with open(self.template_path) as f:
-            self.template = MakoTemplate(f.read())
+            self.template = MakoTemplate(f.read(), default_filters=['decode.utf8'])
 
         self.context = {}
 
@@ -118,27 +124,24 @@ class TemplateTestCase(unittest.TestCase):
         self.assertGreater(len(element_list), 0, "Could not find element at '%s'" % str(xpath))
 
         if exact:
-            self.assertEqual(text, element_list[0].text)
+            self.assertEqual(text, element_list[0].text.strip())
         else:
-            self.assertIn(text, element_list[0].text)
+            self.assertIn(text, element_list[0].text.strip())
 
-    def assert_description(self, describedby_xpaths, descriptions=True):
+    def assert_description(self, describedby_xpaths):
         """
         Verify that descriptions information is correct.
 
         Arguments:
             describedby_xpaths (list): list of xpaths to check aria-describedby attribute
-            descriptions (bool): tells whether we need to check description <p> tags
         """
         xml = self.render_to_xml(self.context)
 
-        # TODO! This check should be removed once description <p> tags are added into all templates.
-        if descriptions:
-            # Verify that each description <p> tag has correct id, text and order
-            descriptions = OrderedDict(
-                (tag.get('id'), tag.text) for tag in xml.xpath('//p[@class="question-description"]')
-            )
-            self.assertEqual(self.DESCRIPTIONS, descriptions)
+        # Verify that each description <p> tag has correct id, text and order
+        descriptions = OrderedDict(
+            (tag.get('id'), stringify_children(tag)) for tag in xml.xpath('//p[@class="question-description"]')
+        )
+        self.assertEqual(self.DESCRIPTIONS, descriptions)
 
         # for each xpath verify that description_ids are set correctly
         for describedby_xpath in describedby_xpaths:
@@ -157,7 +160,7 @@ class TemplateTestCase(unittest.TestCase):
         Arguments:
             describedby_xpaths (list): list of xpaths to check aria-describedby attribute
         """
-        self.context['describedby'] = ''
+        self.context['describedby_html'] = ''
         xml = self.render_to_xml(self.context)
 
         # for each xpath verify that description_ids are set correctly
@@ -199,6 +202,44 @@ class TemplateTestCase(unittest.TestCase):
                 self.context['status'].display_tooltip
             )
 
+    def assert_label(self, xpath=None, aria_label=False):
+        """
+        Verify label is rendered correctly.
+
+        Arguments:
+            xpath (str): xpath expression for label element
+            aria_label (bool): check aria-label attribute value
+        """
+        labels = [
+            {
+                'actual': "You see, but you do not observe. The distinction is clear.",
+                'expected': "You see, but you do not observe. The distinction is clear.",
+            },
+            {
+                'actual': "I choose to have <mark>faith</mark> because without that, I have <em>nothing</em>.",
+                'expected': "I choose to have faith because without that, I have nothing.",
+            }
+        ]
+
+        response_data = {
+            'response_data': {
+                'descriptions': {},
+                'label': ''
+            }
+        }
+        self.context.update(response_data)
+
+        for label in labels:
+            self.context['response_data']['label'] = label['actual']
+            xml = self.render_to_xml(self.context)
+
+            if aria_label:
+                self.assert_has_xpath(xml, "//*[@aria-label='%s']" % label['expected'], self.context)
+            else:
+                element_list = xml.xpath(xpath)
+                self.assertEqual(len(element_list), 1)
+                self.assertEqual(stringify_children(element_list[0]), label['actual'])
+
 
 class ChoiceGroupTemplateTest(TemplateTestCase):
     """
@@ -218,7 +259,7 @@ class ChoiceGroupTemplateTest(TemplateTestCase):
             'name_array_suffix': '1',
             'value': '3',
             'response_data': self.RESPONSE_DATA,
-            'describedby': self.DESCRIBEDBY,
+            'describedby_html': self.DESCRIBEDBY,
         }
 
     def test_problem_marked_correct(self):
@@ -429,9 +470,10 @@ class ChoiceGroupTemplateTest(TemplateTestCase):
             self.assert_no_xpath(xml, "//div[@class='capa_alert']", self.context)
 
     def test_label(self):
-        xml = self.render_to_xml(self.context)
-        xpath = "//legend"
-        self.assert_has_text(xml, xpath, self.context['response_data']['label'])
+        """
+        Verify label element value rendering.
+        """
+        self.assert_label(xpath="//legend")
 
     def test_description(self):
         """
@@ -464,7 +506,7 @@ class TextlineTemplateTest(TemplateTestCase):
             'preprocessor': None,
             'trailing_text': None,
             'response_data': self.RESPONSE_DATA,
-            'describedby': self.DESCRIBEDBY,
+            'describedby_html': self.DESCRIBEDBY,
         }
 
     def test_section_class(self):
@@ -487,8 +529,10 @@ class TextlineTemplateTest(TemplateTestCase):
         self.assert_status(status_div=True)
 
     def test_label(self):
-        xml = self.render_to_xml(self.context)
-        self.assert_has_xpath(xml, "//label[@class='problem-group-label']", self.RESPONSE_DATA['label'])
+        """
+        Verify label element value rendering.
+        """
+        self.assert_label(xpath="//label[@class='problem-group-label']")
 
     def test_hidden(self):
         self.context['hidden'] = True
@@ -588,7 +632,7 @@ class FormulaEquationInputTemplateTest(TemplateTestCase):
             'reported_status': 'REPORTED_STATUS',
             'trailing_text': None,
             'response_data': self.RESPONSE_DATA,
-            'describedby': self.DESCRIBEDBY,
+            'describedby_html': self.DESCRIBEDBY,
         }
 
     def test_no_size(self):
@@ -615,6 +659,12 @@ class FormulaEquationInputTemplateTest(TemplateTestCase):
         """
         self.assert_status(status_div=True)
 
+    def test_label(self):
+        """
+        Verify label element value rendering.
+        """
+        self.assert_label(xpath="//label[@class='problem-group-label']")
+
 
 class AnnotationInputTemplateTest(TemplateTestCase):
     """
@@ -802,13 +852,13 @@ class OptionInputTemplateTest(TemplateTestCase):
             'value': 0,
             'default_option_text': 'Select an option',
             'response_data': self.RESPONSE_DATA,
-            'describedby': self.DESCRIBEDBY,
+            'describedby_html': self.DESCRIBEDBY,
         }
 
     def test_select_options(self):
 
         # Create options 0-4, and select option 2
-        self.context['options'] = [(id_num, '<b>Option {0}</b>'.format(id_num))
+        self.context['options'] = [(id_num, 'Option {0}'.format(id_num))
                                    for id_num in range(5)]
         self.context['value'] = 2
 
@@ -818,15 +868,12 @@ class OptionInputTemplateTest(TemplateTestCase):
         xpath = "//option[@value='option_2_dummy_default']"
         self.assert_has_xpath(xml, xpath, self.context)
 
-        # Should have each of the options, with the correct description
-        # The description HTML should NOT be escaped
-        # (that's why we descend into the <b> tag)
         for id_num in range(5):
-            xpath = "//option[@value='{0}']/b".format(id_num)
+            xpath = "//option[@value='{0}']".format(id_num)
             self.assert_has_text(xml, xpath, 'Option {0}'.format(id_num))
 
         # Should have the correct option selected
-        xpath = "//option[@selected='true']/b"
+        xpath = "//option[@selected='true']"
         self.assert_has_text(xml, xpath, 'Option 2')
 
     def test_status(self):
@@ -836,9 +883,10 @@ class OptionInputTemplateTest(TemplateTestCase):
         self.assert_status(status_class=True)
 
     def test_label(self):
-        xml = self.render_to_xml(self.context)
-        xpath = "//label[@class='problem-group-label']"
-        self.assert_has_xpath(xml, xpath, self.RESPONSE_DATA['label'])
+        """
+        Verify label element value rendering.
+        """
+        self.assert_label(xpath="//label[@class='problem-group-label']")
 
     def test_description(self):
         """
@@ -1077,7 +1125,59 @@ class ChoiceTextGroupTemplateTest(TemplateTestCase):
             xpath = "//div[@class='indicator-container']/span"
             self.assert_no_xpath(xml, xpath, self.context)
 
-    def test_label(self):
-        xml = self.render_to_xml(self.context)
-        xpath = "//fieldset[@aria-label='%s']" % self.context['response_data']['label']
-        self.assert_has_xpath(xml, xpath, self.context)
+    def test_aria_label(self):
+        """
+        Verify aria-label attribute rendering.
+        """
+        self.assert_label(aria_label=True)
+
+
+class ChemicalEquationTemplateTest(TemplateTestCase):
+    """Test mako template for `<chemicalequationinput>` input"""
+
+    TEMPLATE_NAME = 'chemicalequationinput.html'
+
+    def setUp(self):
+        super(ChemicalEquationTemplateTest, self).setUp()
+        self.context = {
+            'id': '1',
+            'status': Status('correct'),
+            'previewer': 'dummy.js',
+            'value': '101',
+        }
+
+    def test_aria_label(self):
+        """
+        Verify aria-label attribute rendering.
+        """
+        self.assert_label(aria_label=True)
+
+
+class SchematicInputTemplateTest(TemplateTestCase):
+    """Test mako template for `<schematic>` input"""
+
+    TEMPLATE_NAME = 'schematicinput.html'
+
+    def setUp(self):
+        super(SchematicInputTemplateTest, self).setUp()
+        self.context = {
+            'id': '1',
+            'status': Status('correct'),
+            'previewer': 'dummy.js',
+            'value': '101',
+            'STATIC_URL': '/dummy-static/',
+            'msg': '',
+            'initial_value': 'two large batteries',
+            'width': '100',
+            'height': '100',
+            'parts': 'resistors, capacitors, and flowers',
+            'setup_script': '/dummy-static/js/capa/schematicinput.js',
+            'analyses': 'fast, slow, and pink',
+            'submit_analyses': 'maybe',
+        }
+
+    def test_aria_label(self):
+        """
+        Verify aria-label attribute rendering.
+        """
+        self.assert_label(aria_label=True)
diff --git a/common/lib/capa/capa/tests/test_inputtypes.py b/common/lib/capa/capa/tests/test_inputtypes.py
index e6dfc88a01..01122c1df3 100644
--- a/common/lib/capa/capa/tests/test_inputtypes.py
+++ b/common/lib/capa/capa/tests/test_inputtypes.py
@@ -78,7 +78,7 @@ class OptionInputTest(unittest.TestCase):
             'id': 'sky_input',
             'default_option_text': 'Select an option',
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.assertEqual(context, expected)
@@ -147,7 +147,7 @@ class ChoiceGroupTest(unittest.TestCase):
             'submitted_message': 'Answer received.',
             'name_array_suffix': expected_suffix,   # what is this for??
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.assertEqual(context, expected)
@@ -201,7 +201,7 @@ class JavascriptInputTest(unittest.TestCase):
             'display_class': display_class,
             'problem_state': problem_state,
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.assertEqual(context, expected)
@@ -239,7 +239,7 @@ class TextLineTest(unittest.TestCase):
             'trailing_text': '',
             'preprocessor': None,
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
         self.assertEqual(context, expected)
 
@@ -278,7 +278,7 @@ class TextLineTest(unittest.TestCase):
                 'script_src': script,
             },
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
         self.assertEqual(context, expected)
 
@@ -323,7 +323,7 @@ class TextLineTest(unittest.TestCase):
                 'trailing_text': expected_text,
                 'preprocessor': None,
                 'response_data': RESPONSE_DATA,
-                'describedby': DESCRIBEDBY
+                'describedby_html': DESCRIBEDBY
             }
             self.assertEqual(context, expected)
 
@@ -366,7 +366,7 @@ class FileSubmissionTest(unittest.TestCase):
             'allowed_files': '["runme.py", "nooooo.rb", "ohai.java"]',
             'required_files': '["cookies.py"]',
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.assertEqual(context, expected)
@@ -422,7 +422,7 @@ class CodeInputTest(unittest.TestCase):
             'tabsize': int(tabsize),
             'queue_len': '3',
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.assertEqual(context, expected)
@@ -484,7 +484,7 @@ class MatlabTest(unittest.TestCase):
             'queue_len': '3',
             'matlab_editor_js': '/dummy-static/js/vendor/CodeMirror/octave.js',
             'response_data': {},
-            'describedby': ''
+            'describedby_html': ''
         }
 
         self.assertEqual(context, expected)
@@ -519,7 +519,7 @@ class MatlabTest(unittest.TestCase):
             'queue_len': '3',
             'matlab_editor_js': '/dummy-static/js/vendor/CodeMirror/octave.js',
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.assertEqual(context, expected)
@@ -553,7 +553,7 @@ class MatlabTest(unittest.TestCase):
                 'queue_len': '0',
                 'matlab_editor_js': '/dummy-static/js/vendor/CodeMirror/octave.js',
                 'response_data': RESPONSE_DATA,
-                'describedby': DESCRIBEDBY
+                'describedby_html': DESCRIBEDBY
             }
 
             self.assertEqual(context, expected)
@@ -587,7 +587,7 @@ class MatlabTest(unittest.TestCase):
             'queue_len': '1',
             'matlab_editor_js': '/dummy-static/js/vendor/CodeMirror/octave.js',
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.assertEqual(context, expected)
@@ -705,13 +705,14 @@ class MatlabTest(unittest.TestCase):
             textwrap.dedent("""
             <div>{\'status\': Status(\'queued\'), \'button_enabled\': True,
             \'rows\': \'10\', \'queue_len\': \'3\', \'mode\': \'\',
-            \'tabsize\': 4, \'cols\': \'80\', \'STATIC_URL\': \'/dummy-static/\',
-            \'describedby\': \'\', \'queue_msg\': \'\',
+            \'tabsize\': 4, \'cols\': \'80\',
+            \'STATIC_URL\': \'/dummy-static/\', \'linenumbers\': \'true\', \'queue_msg\': \'\',
             \'value\': \'print "good evening"\',
             \'msg\': u\'Submitted. As soon as a response is returned,
             this message will be replaced by that feedback.\',
             \'matlab_editor_js\': \'/dummy-static/js/vendor/CodeMirror/octave.js\',
-            \'hidden\': \'\', \'linenumbers\': \'true\', \'id\': \'prob_1_2\', \'response_data\': {}}</div>
+            \'hidden\': \'\', \'id\': \'prob_1_2\', \'describedby_html\': \'\',
+            \'response_data\': {}}</div>
             """).replace('\n', ' ').strip()
         )
 
@@ -818,7 +819,7 @@ class MatlabTest(unittest.TestCase):
             'queue_len': '3',
             'matlab_editor_js': '/dummy-static/js/vendor/CodeMirror/octave.js',
             'response_data': {},
-            'describedby': ''
+            'describedby_html': ''
         }
 
         self.assertEqual(context, expected)
@@ -929,7 +930,7 @@ class SchematicTest(unittest.TestCase):
             'analyses': analyses,
             'submit_analyses': submit_analyses,
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.assertEqual(context, expected)
@@ -975,7 +976,7 @@ class ImageInputTest(unittest.TestCase):
             'gy': egy,
             'msg': '',
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.assertEqual(context, expected)
@@ -1031,7 +1032,7 @@ class CrystallographyTest(unittest.TestCase):
             'width': width,
             'height': height,
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.assertEqual(context, expected)
@@ -1079,7 +1080,7 @@ class VseprTest(unittest.TestCase):
             'molecules': molecules,
             'geometries': geometries,
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.assertEqual(context, expected)
@@ -1115,7 +1116,7 @@ class ChemicalEquationTest(unittest.TestCase):
             'size': self.size,
             'previewer': '/dummy-static/js/capa/chemical_equation_preview.js',
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
         self.assertEqual(context, expected)
 
@@ -1210,7 +1211,7 @@ class FormulaEquationTest(unittest.TestCase):
             'inline': False,
             'trailing_text': '',
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
         self.assertEqual(context, expected)
 
@@ -1256,7 +1257,7 @@ class FormulaEquationTest(unittest.TestCase):
                 'inline': False,
                 'trailing_text': expected_text,
                 'response_data': RESPONSE_DATA,
-                'describedby': DESCRIBEDBY
+                'describedby_html': DESCRIBEDBY
             }
 
             self.assertEqual(context, expected)
@@ -1388,7 +1389,7 @@ class DragAndDropTest(unittest.TestCase):
             'msg': '',
             'drag_and_drop_json': json.dumps(user_input),
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         # as we are dumping 'draggables' dicts while dumping user_input, string
@@ -1457,7 +1458,7 @@ class AnnotationInputTest(unittest.TestCase):
             'debug': False,
             'return_to_annotation': True,
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
 
         self.maxDiff = None
@@ -1522,7 +1523,7 @@ class TestChoiceText(unittest.TestCase):
             'show_correctness': 'always',
             'submitted_message': 'Answer received.',
             'response_data': RESPONSE_DATA,
-            'describedby': DESCRIBEDBY
+            'describedby_html': DESCRIBEDBY
         }
         expected.update(state)
         the_input = lookup_tag(tag)(test_capa_system(), element, state)
diff --git a/common/lib/capa/capa/tests/test_util.py b/common/lib/capa/capa/tests/test_util.py
index eee0cfcf3b..f8e0504781 100644
--- a/common/lib/capa/capa/tests/test_util.py
+++ b/common/lib/capa/capa/tests/test_util.py
@@ -5,7 +5,7 @@ import unittest
 from lxml import etree
 
 from capa.tests.helpers import test_capa_system
-from capa.util import compare_with_tolerance, sanitize_html, get_inner_html_from_xpath
+from capa.util import compare_with_tolerance, sanitize_html, get_inner_html_from_xpath, remove_markup
 
 
 class UtilTest(unittest.TestCase):
@@ -126,3 +126,12 @@ class UtilTest(unittest.TestCase):
         """
         xpath_node = etree.XML('<hint style="smtng">aa<a href="#">bb</a>cc</hint>')
         self.assertEqual(get_inner_html_from_xpath(xpath_node), 'aa<a href="#">bb</a>cc')
+
+    def test_remove_markup(self):
+        """
+        Test for markup removal with bleach.
+        """
+        self.assertEqual(
+            remove_markup("The <mark>Truth</mark> is <em>Out There</em> & you need to <strong>find</strong> it"),
+            "The Truth is Out There &amp; you need to find it"
+        )
diff --git a/common/lib/capa/capa/util.py b/common/lib/capa/capa/util.py
index 47b21259b4..6dd0e35adb 100644
--- a/common/lib/capa/capa/util.py
+++ b/common/lib/capa/capa/util.py
@@ -8,6 +8,7 @@ from calc import evaluator
 from cmath import isinf, isnan
 import re
 from lxml import etree
+from openedx.core.djangolib.markup import HTML
 #-----------------------------------------------------------------------------
 #
 # Utility functions used in CAPA responsetypes
@@ -195,3 +196,15 @@ def get_inner_html_from_xpath(xpath_node):
     # strips outer tag from html string
     inner_html = re.sub('(?ms)<%s[^>]*>(.*)</%s>' % (xpath_node.tag, xpath_node.tag), '\\1', html)
     return inner_html.strip()
+
+
+def remove_markup(html):
+    """
+    Return html with markup stripped and text HTML-escaped.
+
+    >>> bleach.clean("<b>Rock & Roll</b>", tags=[], strip=True)
+    u'Rock &amp; Roll'
+    >>> bleach.clean("<b>Rock &amp; Roll</b>", tags=[], strip=True)
+    u'Rock &amp; Roll'
+    """
+    return HTML(bleach.clean(html, tags=[], strip=True))