ORA CSS fixes

Updates to account for recent CSS changes in platform. Changes made include:
- Removing h3 element response__submission__status__title, this is more properly just a div
- Removing style %t-subheading, as %t-titlecase breaks a11y so %t-heading may be used everywhere
- Adding staff-assessment__display__header and staff__grade__title to _shame.css
- Modifying acceptance tests to account for loss of %t-titlecase

openassessment/templates/openassessmentblock/response/oa_response.html

@@ -99,22 +99,22 @@
 
                         <ul class="list list--actions">
                             <li class="list--actions__item">
-                                <button type="submit" id="submission__save" class="action action--save submission__save is--disabled">{% trans "Save your progress" %}</button>
+                                <button type="submit" id="submission__save" class="action action--save submission__save is--disabled" aria-describedby="response__save_status">
+                                    {% trans "Save your progress" %}
+                                </button>
 
-                                <div id="response__save_status" class="response__submission__status">
-                                    <h3 class="response__submission__status__title">
-                                        <span class="sr">{% trans "Your Submission Status" %}:</span>
-                                        {{ save_status }}
-                                    </h3>
+                                <div id="response__save_status" class="response__submission__label">
+                                    <span class="sr">{% trans "Your Submission Status" %}:</span>
+                                    {{ save_status }}
                                 </div>
                             </li>
                             {% if allow_latex %}
                                 <li class="list--actions__item">
-                                    <button type="submit" id="submission__preview" class="action action--save submission__save is--disabled">{% trans "Preview in LaTeX"%}</button>
-                                    <div id="response__preview_explanation" class="response__submission__status">
-                                        <h3 class="response__submission__status__title">
-                                            {% trans "Click to preview your submission in LaTeX"%}
-                                        </h3>
+                                    <button type="submit" id="submission__preview" class="action action--save submission__save is--disabled" aria-describedby="response__preview_explanation">
+                                        {% trans "Preview in LaTeX"%}
+                                    </button>
+                                    <div id="response__preview_explanation" class="response__submission__label">
+                                        {% trans "Click to preview your submission in LaTeX"%}
                                     </div>
                                 </li>
                                 <li id = "submission__preview__item" class="list--actions__item">

openassessment/xblock/static/js/src/lms/oa_response.js

@@ -225,7 +225,7 @@ OpenAssessment.ResponseView.prototype = {
      string: The current status message.
      **/
     saveStatus: function(msg) {
-        var sel = $('#response__save_status h3', this.element);
+        var sel = $('#response__save_status', this.element);
         if (typeof msg === 'undefined') {
             return sel.text();
         } else {

openassessment/xblock/static/sass/oa/elements/_staff.scss

@@ -51,8 +51,7 @@
   }
 
   .ui-staff__subtitle {
-    @extend %t-subheading;
-    @extend %t-strong;
+    @extend %t-heading;
     @include fontSize($f-size-medium);
     // We want to keep the collapsible headers within the staff assessment block blue
     // (because they are being displayed in the LMS color scheme). Unfortunately because of

openassessment/xblock/static/sass/oa/utilities/_extends.scss

@@ -16,12 +16,6 @@
 %t-heading {
   @extend %hd-4;
   @extend %t-strong;
-  @extend %t-titlecase;
-}
-
-%t-subheading {
-  @extend %hd-4;
-  @extend %t-strong;
 }
 
 %t-score {

openassessment/xblock/static/sass/oa/utilities/_shame.scss

@@ -3,6 +3,11 @@
 
 // NOTES: use for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css)
 
+.wrapper--xblock .openassessment h3.staff__grade__title {
+  font-size: inherit;
+  margin-bottom: 5px;
+}
+
 .openassessment {
 
   // --------------------
@@ -11,11 +16,12 @@
   // rules to overcome any poorly defined, scoped, or architected edX LMS-based CSS. Ideally this file will be removed when the LMS Front End is re-visited.
 
   // headers
-  .self-assessment__display__header, .peer-assessment__display__header, .step__header {
+  .self-assessment__display__header, .peer-assessment__display__header, .step__header,
+  .staff-assessment__display__header, .submission__answer__display__header, .student-training__display__header {
     margin-bottom: 0 !important;
     border-radius: 0 !important;
     padding-bottom: 0 !important;
-    font-size: inherit !important;
+    font-size: initial !important;
     border-bottom: none !important;
   }
 

openassessment/xblock/static/sass/oa/views/_oa-base.scss

@@ -501,7 +501,7 @@
   }
 
   .submission__answer__part__text__title {
-    @extend %t-subheading;
+    @extend %t-heading;
   }
 
   div.submission__answer__part__text__value {
@@ -542,7 +542,9 @@
       }
     }
 
-    .response__submission__status {
+    .response__submission__label {
+      @extend %t-score;
+      color: $action-secondary-color;
       display: inline-block;
       vertical-align: middle;
       @include margin-left(($baseline-h/4));
@@ -552,11 +554,6 @@
       }
     }
 
-    .response__submission__status__title {
-      @extend %t-score;
-      color: $action-secondary-color;
-    }
-
     .response__submission__actions {
 
       .list--actions__item {

test/acceptance/tests.py

@@ -82,8 +82,8 @@ class OpenAssessmentTest(WebAppTest):
     OPTIONS_SELECTED = [1, 2]
     STAFF_OVERRIDE_OPTIONS_SELECTED = [0, 1]
     STAFF_OVERRIDE_SCORE = 1
-    STAFF_GRADE_EXISTS = "COMPLETE"
-    STAFF_OVERRIDE_LEARNER_STEPS_NOT_COMPLETE = "YOU MUST COMPLETE THE STEPS ABOVE TO VIEW YOUR GRADE"
+    STAFF_GRADE_EXISTS = "Complete"
+    STAFF_OVERRIDE_LEARNER_STEPS_NOT_COMPLETE = "You Must Complete the Steps Above to View Your Grade"
     STAFF_AREA_SCORE = "Final grade: {} out of 8"
     STAFF_OVERRIDE_STAFF_AREA_NOT_COMPLETE = "The problem has not been completed."
     EXPECTED_SCORE = 6
@@ -323,14 +323,14 @@ class StaffAssessmentTest(OpenAssessmentTest):
         self.submission_page.visit()
 
         # Verify that staff grade step is shown initially
-        self._verify_staff_grade_section("NOT AVAILABLE", None)
+        self._verify_staff_grade_section("Not Available", None)
 
         # User submits a response
         self.submission_page.submit_response(self.SUBMISSION)
         self.assertTrue(self.submission_page.has_submitted)
 
         # Verify staff grade section appears as expected
-        self._verify_staff_grade_section("NOT AVAILABLE", "WAITING FOR A STAFF GRADE")
+        self._verify_staff_grade_section("Not Available", "Waiting for a Staff Grade")
 
         # Perform staff assessment
         self.staff_area_page = StaffAreaPage(self.browser, self.problem_loc)