Heading restructure (#144)

Amended headings to ensure accessibility.

* Amended templates - h2 elements to h3, h3 to h4 and associated CSS.
* Bumped version to 2.6.8

problem_builder/public/css/problem-builder.css

@@ -41,7 +41,7 @@
     margin-top: 10px;
 }
 
-.xblock .mentoring h3 {
+.xblock .mentoring h4 {
     margin-top: 0px;
     margin-bottom: 7px;
 }

problem_builder/public/themes/apros.css

@@ -12,12 +12,12 @@
     font-size: 16px;
 }
 
-.mentoring .title h2 {
-	/* Same as h2.main in Apros */
+.mentoring .title h3 {
+	/* Same as h2.main in Apros, amended to h3 */
 	color: #66a5b5;
 }
 
-.mentoring h3 {
+.mentoring h4 {
     text-transform: uppercase;
 }
 

problem_builder/templates/html/answer_editable.html

 {% load i18n %}
 <div class="xblock-answer" data-completed="{{ self.completed }}">
-  {% if not hide_header %}<h3 class="question-title">{{ self.display_name_with_default }}</h3>{% endif %}
+  {% if not hide_header %}<h4 class="question-title">{{ self.display_name_with_default }}</h4>{% endif %}
   <label><p>{{ self.question|safe }}</p>
     <textarea
        class="answer editable" cols="50" rows="10" name="input"

problem_builder/templates/html/answer_read_only.html

 {% load i18n %}
 <div class="xblock-answer">
-  {% if not hide_header %}<h3 class="question-title">{{ title }}</h3>{% endif %}
+  {% if not hide_header %}<h4 class="question-title">{{ title }}</h4>{% endif %}
   {% if description %}<p>{{ description|safe }}</p>{% endif %}
   <blockquote class="answer read_only">
     {% if student_input %}

problem_builder/templates/html/completion.html

 {% load i18n %}
 <div class="xblock-pb-completion">
-  {% if not hide_header %}<h3 class="question-title">{{ title }}</h3>{% endif %}
+  {% if not hide_header %}<h4 class="question-title">{{ title }}</h4>{% endif %}
   <div class="clearfix">
     <p>{{ question|safe }}</p>
     <p>

problem_builder/templates/html/dashboard.html

 {% load i18n %}
 <div class="pb-dashboard">
   <div class="dashboard-report">
-    <h2>{{display_name}}</h2>
+    <h3>{{display_name}}</h3>
 
     {% if header_html %}
     <div class="report-header">

problem_builder/templates/html/instructor_tool.html

 {% load i18n %}
-<h2>{% trans "Instructor Tool" %}</h3>
+<h4>{% trans "Instructor Tool" %}</h4>
 
 <div class="data-export-options">
   <div class="data-export-header">
-    <h3>{% trans "Filters" %}</h3>
+    <h4>{% trans "Filters" %}</h4>
   </div>
   <div class="data-export-row">
     <div class="data-export-field-container">

problem_builder/templates/html/mcqblock.html

 {% load i18n %}
 {% if not hide_header %}
-<h3 class="question-title" id="heading_{{ self.html_id }}">{{ self.display_name_with_default }}</h3>
+<h4 class="question-title" id="heading_{{ self.html_id }}">{{ self.display_name_with_default }}</h4>
 {% endif %}
 <fieldset class="choices questionnaire" id="{{ self.html_id }}">
   <legend class="question field-group-hd">{{ self.question|safe }}</legend>

problem_builder/templates/html/mentoring.html

@@ -11,7 +11,7 @@
 
   {% if show_title and title %}
   <div class="title">
-    <h2>{{ title }}</h2>
+    <h3>{{ title }}</h3>
   </div>
   {% endif %}
 

problem_builder/templates/html/mentoring_assessment_templates.html

 <script type="text/template" id="xblock-grade-template">
   <div class="grade-result">
-    <h2>
+    <h4>
       <%= _.template(gettext("You scored {percent}% on this assessment."), {percent: score}, {interpolate: /\{(.+?)\}/g}) %>
-    </h2>
+    </h4>
     <hr/>
 
     <span class="assessment-checkmark icon-2x checkmark-correct icon-ok fa fa-check"></span>

problem_builder/templates/html/mentoring_with_steps.html

@@ -3,7 +3,7 @@
 
   {% if show_title and title %}
   <div class="title">
-    <h2>{{ title }}</h2>
+    <h3>{{ title }}</h3>
   </div>
   {% endif %}
 

problem_builder/templates/html/mrqblock.html

 {% load i18n %}
 {% if not hide_header %}
-<h3 class="question-title" id="heading_{{ self.html_id }}">{{ self.display_name_with_default }}</h3>
+<h4 class="question-title" id="heading_{{ self.html_id }}">{{ self.display_name_with_default }}</h4>
 {% endif %}
 <fieldset class="choices questionnaire" id="{{ self.html_id }}"
   data-hide_results="{{ self.hide_results }}" data-hide_prev_answer="{{ hide_prev_answer }}">

problem_builder/templates/html/overlay.html

 {% load i18n %}
 <div class="sb-plot-overlay">
   {% if self.plot_label and self.point_color %}
-    <h3 style="color: {{ self.point_color }};">{{ self.plot_label }} {% trans "Overlay" %}</h3>
+    <h4 style="color: {{ self.point_color }};">{{ self.plot_label }} {% trans "Overlay" %}</h4>
   {% endif %}
   <p>
     <strong>{% trans "Description:" %}</strong>

problem_builder/templates/html/plot.html

@@ -15,7 +15,7 @@
   </div>
 
   <div class="overlays">
-    <h3>{% trans "Compare your plot to others!" %}</h3>
+    <h4>{% trans "Compare your plot to others!" %}</h4>
 
     <input type="button"
            class="plot-default"

problem_builder/templates/html/ratingblock.html

 {% load i18n %}
 {% if not hide_header %}
-<h3 class="question-title" id="heading_{{ self.html_id }}">{{ self.display_name_with_default }}</h3>
+<h4 class="question-title" id="heading_{{ self.html_id }}">{{ self.display_name_with_default }}</h4>
 {% endif %}
 <fieldset class="rating questionnaire" id="{{ self.html_id }}">
   <legend class="question field-group-hd">{{ self.question|safe }}</legend>

problem_builder/templates/html/sb-review-score.html

@@ -2,7 +2,7 @@
 
 <div class="sb-review-score">
   <div class="grade-result">
-    <h2>{% blocktrans %}You scored {{score}}% on this assessment. {% endblocktrans %}</h2>
+    <h4>{% blocktrans %}You scored {{score}}% on this assessment. {% endblocktrans %}</h4>
     {% if show_extended_review %}
       <p class="review-links-explanation">
         {% trans "Click a question to review feedback on your response." %}

problem_builder/templates/html/slider.html

 {% load i18n %}
 <div class="xblock-pb-slider">
-  {% if not hide_header %}<h3 class="question-title">{{ title }}</h3>{% endif %}
+  {% if not hide_header %}<h4 class="question-title">{{ title }}</h4>{% endif %}
   <div class="pb-slider-box clearfix">
     <p><label>{{ question|safe }} <span class="sr">({{instructions_string}})</span>
       <input type="range" id="{{ slider_id }}" class="pb-slider-range"

problem_builder/templates/html/step.html

@@ -2,13 +2,13 @@
      data-next-button-label="{{ self.next_button_label }}" {% if self.has_question %} data-has-question="true" {% endif %}>
   {% if show_title %}
   <div class="title">
-    <h3>
+    <h4>
       {% if title %}
         {{ title }}
       {% else %}
         {{ self.display_name_with_default }}
       {% endif %}
-    </h3>
+    </h4>
   </div>
   {% endif %}
 

problem_builder/tests/integration/base_test.py

@@ -281,7 +281,7 @@ class MentoringAssessmentBaseTest(ProblemBuilderBaseTest):
         self.wait_until_text_in(question_text, mentoring)
         question_div = None
         for xblock_div in mentoring.find_elements_by_css_selector('div.xblock-v1'):
-            header_text = xblock_div.find_elements_by_css_selector('h3.question-title')
+            header_text = xblock_div.find_elements_by_css_selector('h4.question-title')
             if header_text and question_text in header_text[0].text:
                 question_div = xblock_div
                 self.assertTrue(xblock_div.is_displayed())

problem_builder/tests/integration/test_titles.py

@@ -48,12 +48,12 @@ class TitleTest(SeleniumXBlockTest):
         self.set_scenario_xml(xml)
         pb_element = self.go_to_view()
         if expected_title is not None:
-            h2 = pb_element.find_element_by_css_selector('h2')
-            self.assertEqual(h2.text, expected_title)
+            h3 = pb_element.find_element_by_css_selector('h3')
+            self.assertEqual(h3.text, expected_title)
         else:
-            # No <h2> element should be present:
-            all_h2s = pb_element.find_elements_by_css_selector('h2')
-            self.assertEqual(len(all_h2s), 0)
+            # No <h3> element should be present:
+            all_h3s = pb_element.find_elements_by_css_selector('h3')
+            self.assertEqual(len(all_h3s), 0)
 
 
 class StepTitlesTest(SeleniumXBlockTest):
@@ -145,9 +145,9 @@ class StepTitlesTest(SeleniumXBlockTest):
                     self.set_scenario_xml(xml)
                     pb_element = self.go_to_view()
                     if expected_title:
-                        h3 = pb_element.find_element_by_css_selector('h3')
-                        self.assertEqual(h3.text, expected_title)
+                        h4 = pb_element.find_element_by_css_selector('h4')
+                        self.assertEqual(h4.text, expected_title)
                     else:
-                        # No <h3> element should be present:
-                        all_h3s = pb_element.find_elements_by_css_selector('h3')
-                        self.assertEqual(len(all_h3s), 0)
+                        # No <h4> element should be present:
+                        all_h4s = pb_element.find_elements_by_css_selector('h4')
+                        self.assertEqual(len(all_h4s), 0)

problem_builder/v1/tests/xml/v1_upgrade_b_new.xml

 <problem-builder enforce_dependency="false" followed_by="past_attempts" show_title="false">
   <html>
-    <h3>Checking your improvement frog</h3>
+    <h4>Checking your improvement frog</h4>
     <p>Now, let's make sure your frog meets the criteria for a strong column 1. Here is your frog:</p>
   </html>
   <pb-answer-recap name="improvement-frog"/>

problem_builder/v1/tests/xml/v1_upgrade_b_old.xml

@@ -7,7 +7,7 @@ This contains a typical problem taken from a live course (content changed)
         <![CDATA[
         <mentoring enforce_dependency="false" followed_by="past_attempts">
           <html>
-            <h3>Checking your improvement frog</h3>
+            <h4>Checking your improvement frog</h4>
             <p>Now, let's make sure your frog meets the criteria for a strong column 1. Here is your frog:</p>
           </html>
           <answer name="improvement-frog" read_only="true"/>

setup.py

@@ -71,7 +71,7 @@ BLOCKS = [
 
 setup(
     name='xblock-problem-builder',
-    version='2.6.7',
+    version='2.6.8',
     description='XBlock - Problem Builder',
     packages=['problem_builder', 'problem_builder.v1'],
     install_requires=[