Skip to content

E
edx-ora2
Commit fbf1051f by Christina Roberts
Options

Merge pull request #853 from edx/christina/a11y-fixes 

Change how staff tool tabs work.
parents 47490d5d 1ed64511
Showing with 108 additions and 94 deletions
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_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">
{% for assessment in assessments %}
{% with assessment_num=forloop.counter %}
{% if assessments|length > 1 %}
<h4 class="title--sub">
{% blocktrans %}
Assessment {{ assessment_num }}:
{% endblocktrans %}
</h4>
{% endif %}
<table class="staff-info__status__table" summary="{% trans "Assessment" %}">
<thead>
<tr>
<th abbr="{% trans "Criterion" %}" scope="col">{% trans "Criterion" %}</th>
<th abbr="{% trans "Selected Option" %}" scope="col">{% trans "Selected Option" %}</th>
<th abbr="{% trans "Feedback" %}" scope="col">{% trans "Feedback" %}</th>
<th abbr="{% trans "Points" %}" scope="col">{% trans "Points" %}</th>
<th abbr="{% trans "Points Possible" %}" scope="col">{% trans "Points Possible" %}</th>
</tr>
</thead>
</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 %}
<h4 class="title--sub">
{% blocktrans %}
Assessment {{ assessment_num }}:
{% endblocktrans %}
</h4>
{% endif %}
<table class="staff-info__status__table">
<caption class="sr">{% trans "Assessment Details" %}</caption>
<thead>
<tr>
<th abbr="{% trans "Criterion" %}" scope="col">{% trans "Criterion" %}</th>
<th abbr="{% trans "Selected Option" %}" scope="col">{% trans "Selected Option" %}</th>
<th abbr="{% trans "Feedback" %}" scope="col">{% trans "Feedback" %}</th>
<th abbr="{% trans "Points" %}" scope="col">{% trans "Points" %}</th>
<th abbr="{% trans "Points Possible" %}" scope="col">{% trans "Points Possible" %}</th>
</tr>
</thead>
<tbody>
{% for criterion in rubric_criteria %}
{% for part in assessment.parts %}
{% if part.option.criterion.name == criterion.name %}
<tr>
<td class="label">{{ criterion.label }}</td>
<td class="value">{{ part.option.label }}</td>
<td class="value">{{ part.feedback }}</td>
<td class="value">{{ part.option.points }}</td>
<td class="value">{{ criterion.total_value }}</td>
</tr>
{% endif %}
{% endfor %}
<tbody>
{% for criterion in rubric_criteria %}
{% for part in assessment.parts %}
{% if part.option.criterion.name == criterion.name %}
<tr>
<td class="label">{{ criterion.label }}</td>
<td class="value">{{ part.option.label }}</td>
<td class="value">{{ part.feedback }}</td>
<td class="value">{{ part.option.points }}</td>
<td class="value">{{ criterion.total_value }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
{% if assessment.feedback %}
<h4 class="title--sub">{% trans "Overall Feedback" %}</h4>
<div class="student__answer__display__content">
{{ assessment.feedback|linebreaks }}
</div>
{% endif %}
{% endwith %}
{% endfor %}
</div>
{% endfor %}
</tbody>
</table>
{% if assessment.feedback %}
<h4 class="title--sub">{% trans "Overall Feedback" %}</h4>
<div class="student__answer__display__content">
{{ assessment.feedback|linebreaks }}
</div>
{% endif %}
{% endwith %}
{% endfor %}
</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/css/openassessment-ltr.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/css/openassessment-rtl.css
This source diff could not be displayed because it is too large. You can view the blob instead.
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;
}
.staff-info__cancel-submission__content,
.staff-info__staff-override__content {
padding: 0;
&.is--showing {
.icon {
@include transform(rotate(bidi-rotate-angle(90deg)));
@include transform-origin(50% 50%);
}
}
}
.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/_developer.scss
......@@ -101,6 +101,8 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
input {
display: block;
padding-top: 0;
padding-bottom: 0;
}
}
......
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)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment