Make collapsible features accessible.

TNL-4002

openassessment/templates/openassessmentblock/staff_area/oa_staff_area.html

@@ -3,14 +3,14 @@
 <div class="openassessment__staff-area wrapper--staff-area">
 
     <div class="wrapper--staff-toolbar">
-        <button class="ui-staff__button button-staff-tools" data-panel="openassessment__staff-tools">{% trans "Manage Individual Learners" %}</button>
-        <button class="ui-staff__button button-staff-info" data-panel="openassessment__staff-info">{% trans "View Assignment Statistics" %}</button>
+        <button class="ui-staff__button button-staff-tools" aria-expanded="false" data-panel="openassessment__staff-tools">{% trans "Manage Individual Learners" %}</button>
+        <button class="ui-staff__button button-staff-info" aria-expanded="false" data-panel="openassessment__staff-info">{% trans "View Assignment Statistics" %}</button>
         {% if staff_assessment_required %}
-            <button class="ui-staff__button button-staff-grading" data-panel="openassessment__staff-grading">{% trans "Grade Available Responses" %}</button>
+            <button class="ui-staff__button button-staff-grading" aria-expanded="false" data-panel="openassessment__staff-grading">{% trans "Grade Available Responses" %}</button>
         {% endif %}
     </div>
 
-    <div class="openassessment__staff-tools wrapper--staff-tools wrapper--ui-staff is--hidden">
+    <div class="openassessment__staff-tools wrapper--staff-tools wrapper--ui-staff">
         <div class="staff-info ui-staff">
             <h2 class="staff-info__title ui-staff__title">
                 <span class="staff-info__title__copy">{% trans "Manage Individual Learners" %}</span>
@@ -22,7 +22,7 @@
                 <div class="staff-info__student">
                     <div class="wrapper--input" class="staff-info__student__form">
                         <form class="openassessment_student_info_form">
-                            <div class="form--error"></div>
+                            <div class="form--error" tabindex="-1"></div>
                             <label class="label">{% trans "Enter an individual learner's username or email" %}
                                 <input type="text" class="openassessment__student_username value" maxlength="255">
                             </label>
@@ -82,7 +82,7 @@
         </div>
     </div>
 
-    <div class="openassessment__staff-info wrapper--staff-info wrapper--ui-staff is--hidden">
+    <div class="openassessment__staff-info wrapper--staff-info wrapper--ui-staff">
         <div class="staff-info ui-staff">
             <h2 class="staff-info__title ui-staff__title">
                 <span class="staff-info__title__copy">{% trans "View Assignment Statistics" %}</span>
@@ -164,7 +164,7 @@
     </div>
 
     {% if staff_assessment_required %}
-    <div class="openassessment__staff-grading wrapper--staff-grading wrapper--ui-staff is--hidden">
+    <div class="openassessment__staff-grading wrapper--staff-grading wrapper--ui-staff">
         <div class="staff-grading ui-staff">
             <h2 class="staff-grading__title ui-staff__title">
                 <span class="staff-info__title__copy">{% trans "Grade Available Responses" %}</span>

openassessment/templates/openassessmentblock/staff_area/oa_staff_grade_learners.html

 {% load i18n %}
 
-<div class="staff__grade__control ui-toggle-visibility is--collapsed">
-    <header class="staff__grade__header ui-toggle-visibility__control">
+<div class="staff__grade__control">
+    <header class="staff__grade__header ui-slidable__control">
         <h3 class="staff__grade__title">
             <span class="wrapper--copy">
-                <button class="staff__grade__show-form">{% trans "Staff Assessment" %}</button>
+                <button class="staff__grade__show-form ui-slidable" aria-expanded="false">{% trans "Staff Assessment" %}</button>
             </span>
         </h3>
 
         {% include "openassessmentblock/staff_area/oa_staff_grade_learners_count.html" with staff_assessment_ungraded=staff_assessment_ungraded staff_assessment_in_progress=staff_assessment_in_progress %}
     </header>
 
-    <div class="ui-staff__content__section staff__grade__content ui-toggle-visibility__content">
+    <div class="ui-staff__content__section staff__grade__content ui-slidable__content">
         <div class="wrapper--input">
-            <div class="staff__grade__form--error"></div>
+            <div class="staff__grade__form--error" tabindex="-1"></div>
             <div class="staff__grade__form"></div>
         </div>
     </div>

openassessment/templates/openassessmentblock/staff_area/oa_staff_grade_learners_assessment.html

 {% load i18n %}
 {% spaceless %}
 
-    <div class="staff__grade__form ui-toggle-visibility__content" data-submission-uuid="{{ submission.uuid }}">
+    <div class="staff__grade__form" data-submission-uuid="{{ submission.uuid }}">
         <div class="wrapper--staff-assessment">
             <div>
                 <p>{% trans "Give this learner a grade using the problem's rubric." %}</p>

openassessment/templates/openassessmentblock/staff_area/oa_student_info.html

@@ -5,7 +5,7 @@
      data-submission-uuid="{{ submission.uuid }}">
 {% if submission %}
     <h2 class="title">
-        <span class="label">
+        <span class="label staff-info__student__report__summary" tabindex="-1">
             {% blocktrans with learner=student_username %}
                 Viewing learner: {{ learner }}
             {% endblocktrans %}
@@ -13,12 +13,13 @@
     </h2>
 
     <div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__response">
-        <div class="ui-staff ui-toggle-visibility is--collapsed">
-            <h2 class="staff-info__title ui-staff__subtitle ui-toggle-visibility__control">
+        <button class="ui-staff ui-slidable" aria-expanded="false" id="learner_response_{{ submission.uuid }}">
+            <h2 class="staff-info__title ui-staff__subtitle">
                 <i class="icon fa fa-caret-right" aria-hidden="true"></i>
                 <span>{% trans "Learner's Response" %}</span>
             </h2>
-            <div class="ui-toggle-visibility__content">
+        </button>
+        <div class="ui-slidable__content" aria-labelledby="learner_response_{{ submission.uuid }}">
             {% if workflow_cancellation %}
                 <p>
                     {% if workflow_cancellation.cancelled_by %}
@@ -48,7 +49,6 @@
             {% endif %}
         </div>
     </div>
-    </div>
 
     {% if peer_assessments %}
         {% trans "Peer Assessments for This Learner" as translated_title %}
@@ -76,21 +76,23 @@
     {% endif %}
 
     <div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__grade">
-        <div class="ui-staff ui-toggle-visibility {% if expanded_view != 'final-grade' %}is--collapsed {% endif %}">
-            <h2 class="staff-info__title ui-staff__subtitle ui-toggle-visibility__control">
+        <button class="ui-staff ui-slidable" aria-expanded="false" id="final_grade_{{ submission.uuid }}">
+            <h2 class="staff-info__title ui-staff__subtitle">
                 <i class="icon fa fa-caret-right" aria-hidden="true"></i>
                 <span>{% trans "Learner's Final Grade" %}</span>
             </h2>
-            <div class="ui-toggle-visibility__content">
+        </button>
+        <div class="ui-slidable__content" aria-labelledby="final_grade_{{ submission.uuid }}">
             {% if workflow_status == "done" %}
-                    <p class="staff-info__final__grade__score">
+                <div class="staff-info__final__grade__score">
                 {% with points_earned_string=score.points_earned|stringformat:"s" points_possible_string=score.points_possible|stringformat:"s" %}
                     {% blocktrans with points_earned='<span class="grade__value__earned">'|safe|add:points_earned_string|add:'</span>'|safe points_possible='<span class="grade__value__potential">'|safe|add:points_possible_string|add:'</span>'|safe %}
                         Final grade: {{ points_earned }} out of {{ points_possible }}
                     {% endblocktrans %}
                 {% endwith %}
-                    </p>
-                    <table class="staff-info__status__table staff-info__final__grade__table" summary="{% trans "Final Grade Details" %}">
+                </div>
+                <table class="staff-info__status__table staff-info__final__grade__table">
+                    <caption class="sr">{% trans "Final Grade Details" %}</caption>
                     <thead>
                     <tr>
                         <th abbr="{% trans 'Criterion' %}" scope="col">{% trans "Criterion" %}</th>
@@ -131,42 +133,40 @@
                     </tbody>
                 </table>
             {% elif workflow_status == "waiting" %}
-                    <p class="staff-info__final__grade__score">{% trans "The submission is waiting for assessments." %}</p>
+                <div class="staff-info__final__grade__score">{% trans "The submission is waiting for assessments." %}</div>
             {% elif workflow_status == "cancelled" %}
-                    <p class="staff-info__final__grade__score">{% trans "The learner's submission has been removed from peer assessment. The learner receives a grade of zero unless you delete the learner's state for the problem to allow them to resubmit a response." %}</p>
+                <div class="staff-info__final__grade__score">{% trans "The learner's submission has been removed from peer assessment. The learner receives a grade of zero unless you delete the learner's state for the problem to allow them to resubmit a response." %}</div>
             {% elif workflow_status == None %}
-                    <p class="staff-info__final__grade__score">{% trans "The problem has not been started." %}</p>
+                <div class="staff-info__final__grade__score">{% trans "The problem has not been started." %}</div>
             {% else %}
-                    <p class="staff-info__final__grade__score">{% trans "The problem has not been completed." %}</p>
+                <div class="staff-info__final__grade__score">{% trans "The problem has not been completed." %}</div>
             {% endif %}
         </div>
     </div>
-    </div>
 
     {% if not workflow_cancellation %}
         <div class="staff-info__staff-override ui-staff__content__section wrapper--ui--collapse">
-            <div class="ui-staff ui-toggle-visibility {% if expanded_view != 'staff-override' %}is--collapsed {% endif %}">
-                <h2 class="staff-info__title ui-staff__subtitle ui-toggle-visibility__control">
+            <button class="ui-staff ui-slidable" aria-expanded="false" id="grade_override_{{ submission.uuid }}">
+                <h2 class="staff-info__title ui-staff__subtitle">
                     <i class="icon fa fa-caret-right" aria-hidden="true"></i>
                     <span>{% trans "Submit Assessment Grade Override" %}</span>
                 </h2>
-
-                <div class="staff-info__staff-override__content ui-toggle-visibility__content">
+            </button>
+            <div class="staff-info__staff-override__content ui-slidable__content" aria-labelledby="grade_override_{{ submission.uuid }}">
                 <div class="wrapper--input">
                     {% include "openassessmentblock/staff_area/oa_staff_override_assessment.html" %}
                 </div>
             </div>
         </div>
-        </div>
 
         <div class="staff-info__workflow-cancellation ui-staff__content__section wrapper--ui--collapse">
-            <div class="ui-staff ui-toggle-visibility is--collapsed">
-                <h2 class="staff-info__title ui-staff__subtitle ui-toggle-visibility__control">
+            <button class="ui-staff ui-slidable" aria-expanded="false" id="remove_submission_{{ submission.uuid }}">
+                <h2 class="staff-info__title ui-staff__subtitle">
                     <i class="icon fa fa-caret-right" aria-hidden="true"></i>
                     <span>{% trans "Remove Submission From Peer Grading" %}</span>
                 </h2>
-
-                <div class="staff-info__cancel-submission__content ui-toggle-visibility__content">
+            </button>
+            <div class="staff-info__cancel-submission__content ui-slidable__content" aria-labelledby="remove_submission_{{ submission.uuid }}">
                 <div class="wrapper--input">
                     <form data-submission-uuid="{{ submission.uuid }}">
 
@@ -196,11 +196,12 @@
                 </div>
             </div>
         </div>
-        </div>
     {% endif %}
 
     </div>
 {% else %}
+    <span class="staff-info__student__report__summary" tabindex="-1">
         {% trans "A response was not found for this learner." %}
+    </span>
 {% endif %}
 </div>

openassessment/templates/openassessmentblock/staff_area/oa_student_info_assessment_detail.html

 {% load i18n %}
 <div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__{{ class_type }}__assessments">
-    <div class="ui-staff ui-toggle-visibility is--collapsed">
-        <h2 class="staff-info__title ui-staff__subtitle ui-toggle-visibility__control">
+    <button class="ui-staff ui-slidable" aria-expanded="false" id="{{ class_type }}_{{ submission.uuid }}">
+        <h2 class="staff-info__title ui-staff__subtitle">
             <i class="icon fa fa-caret-right" aria-hidden="true"></i>
             <span>{{ translated_title }}</span>
         </h2>
-        <div class="ui-toggle-visibility__content">
+    </button>
+    <div class="ui-slidable__content" aria-labelledby="{{ class_type }}_{{ submission.uuid }}">
         {% for assessment in assessments %}
             {% with assessment_num=forloop.counter %}
                 {% if assessments|length > 1 %}
@@ -15,7 +16,8 @@
                         {% endblocktrans %}
                     </h4>
                 {% endif %}
-                    <table class="staff-info__status__table" summary="{% trans "Assessment" %}">
+                <table class="staff-info__status__table">
+                    <caption class="sr">{% trans "Assessment Details" %}</caption>
                     <thead>
                     <tr>
                         <th abbr="{% trans "Criterion" %}" scope="col">{% trans "Criterion" %}</th>
@@ -51,5 +53,4 @@
             {% endwith %}
         {% endfor %}
     </div>
-    </div>
 </div>

openassessment/xblock/staff_area_mixin.py

@@ -236,8 +236,6 @@ class StaffAreaMixin(object):
         try:
             student_username = data.params.get('student_username', '')
             path, context = self.get_student_info_path_and_context(student_username)
-            expanded_view = data.params.get('expanded_view', [])
-            context.update({'expanded_view': expanded_view})
             return self.render_assessment(path, context)
 
         except PeerAssessmentInternalError:

openassessment/xblock/static/js/fixtures/templates.json

@@ -953,8 +953,7 @@
                 "points_earned": 1,
                 "points_possible": 2
             },
-            "workflow_status": "done",
-            "expanded_view": "final-grade"
+            "workflow_status": "done"
         },
         "output": "oa_staff_graded_submission.html"
     },

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

@@ -17,34 +17,31 @@
     border-top: ($baseline-v/4) solid $color-decorative-staff;
     padding: $baseline-v ($baseline-h/2);
     background: $staff-bg;
+    display: none;
   }
 
   .ui-staff {
 
-    // CASE: area is collapse/expand friendly
-    &.ui-toggle-visibility {
+    .ui-slidable {
 
-      .staff-info__title__copy {
-        @include margin-left(($baseline-h/4));
+      .icon {
+        @include transition(all $tmg-f2 ease-in-out 0s);
+        @include transform(rotate(bidi-rotate-angle(0deg)));
       }
 
-      // STATE: is collapsed
-      &.is--collapsed {
-
-        .ui-staff__content {
-          margin-top: 0;
+      &.is--showing {
+        .icon {
+          @include transform(rotate(bidi-rotate-angle(90deg)));
+          @include transform-origin(50% 50%);
         }
-
-        .staff-info__cancel-submission__content,
-        .staff-info__staff-override__content {
-          padding: 0;
       }
     }
 
-      .ui-toggle-visibility__content {
-        @include margin-left(($baseline-h/4));
-        margin-bottom: ($baseline-v/2);
-      }
+    .ui-slidable__content {
+      padding: ($baseline-v/2) ($baseline-h/4);
+
+      // Display as initially collapsed.
+      display: none;
     }
   }
 
@@ -241,11 +238,16 @@
 
   // Styling for staff grade tab ("Grade Available Responses").
   .ui-staff {
+
     .staff__grade__control {
       border-top: ($baseline-v/4) solid $color-decorative-tertiary;
       background: $bg-content;
       background-color: $bg-content;
 
+      .staff__grade__header {
+        margin-bottom: 0;
+      }
+
       .staff__grade__title {
         @include text-align(left);
         @include float(none);
@@ -324,13 +326,13 @@
         display: inline;
       }
 
-      .wrapper--input {
-        padding-top: 0;
+      .staff__grade__content {
+        padding: 0;
       }
     }
 
     // Override the default color for h3 (for elements that can be toggled).
-    .ui-toggle-visibility .ui-toggle-visibility__control .staff__grade__title {
+    .ui-slidable__control .staff__grade__title {
       color: $action-primary-color;
     }
   }
@@ -351,4 +353,19 @@
       }
     }
   }
+
+  // Learner info section
+  .staff-info__student__report {
+
+     // Override default button styling.
+    .ui-slidable {
+      @extend %btn-reset;
+      background-color: $staff-bg;
+      padding: 0;
+    }
+
+    .staff-info__final__grade__table {
+      margin-top: ($baseline-v/2);
+    }
+  }
 }

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

@@ -193,10 +193,6 @@
     color: $copy-staff-color !important;
   }
 
-  .staff-info__workflow-cancellation {
-    margin-bottom: ($baseline-v) !important;
-  }
-
   .wrapper--staff-assessment {
     // 'p' elements in LMS have a color set on them.
     .student__answer__display__content p {

test/acceptance/pages.py

@@ -465,7 +465,7 @@ class StaffAreaPage(OpenAssessmentPage, AssessmentMixin):
         Returns the classes of the visible staff panels
         """
         panels = self.q(css=self._bounded_selector(".wrapper--ui-staff"))
-        return [panel.get_attribute('class') for panel in panels if u'is--hidden' not in panel.get_attribute('class')]
+        return [panel.get_attribute('class') for panel in panels if panel.is_displayed()]
 
     def is_button_visible(self, button_name):
         """
@@ -479,6 +479,8 @@ class StaffAreaPage(OpenAssessmentPage, AssessmentMixin):
         Presses the button to show the panel with the specified name.
         :return:
         """
+        # Disable JQuery animations (for slideUp/slideDown).
+        self.browser.execute_script("jQuery.fx.off = true;")
         buttons = self.q(css=self._bounded_selector(".button-{button_name}".format(button_name=button_name)))
         buttons.first.click()
 
@@ -617,7 +619,7 @@ class StaffAreaPage(OpenAssessmentPage, AssessmentMixin):
     @property
     def learner_response(self):
         return self.q(
-            css=self._bounded_selector(".staff-info__student__response .ui-toggle-visibility__content")
+            css=self._bounded_selector(".staff-info__student__response .ui-slidable__content")
         ).text[0]
 
     def staff_assess(self, options_selected, grading_type, continue_after=False):

test/acceptance/tests.py

@@ -500,10 +500,9 @@ class StaffAreaTest(OpenAssessmentTest):
         # Click on the button and verify that the panel has opened
         self.staff_area_page.click_staff_toolbar_button(panel_name)
         self.assertEqual(self.staff_area_page.selected_button_names, [button_label])
-        self.assertIn(
-            u'openassessment__{button_name}'.format(button_name=panel_name),
-            self.staff_area_page.visible_staff_panels[0]
-        )
+        visible_panels = self.staff_area_page.visible_staff_panels
+        self.assertEqual(1, len(visible_panels))
+        self.assertIn(u'openassessment__{button_name}'.format(button_name=panel_name), visible_panels[0])
 
         # Click 'Close' and verify that the panel has been closed
         self.staff_area_page.click_staff_panel_close_button(panel_name)