Skip to content

E
edx-ora2
Commit 9b682b64 by Christina Roberts Committed by GitHub
Options

Merge pull request #943 from edx/christina/disabled-buttons 

Make disabled buttons truly disabled.
parents 20c82ea6 66af4db9
Showing with 102 additions and 131 deletions
openassessment/templates/openassessmentblock/grade/oa_grade_complete.html
......@@ -144,7 +144,7 @@
class="option__input feedback__overall__value"
value="These assessments were useful."
aria-labelledby="feedback__overall__prompt__{{ xblock_id }}"/>
<label class="option__label" for="feedback__overall__value--useful">{% trans "These assessments were useful." %}</label>
<label class="option__label" for="feedback__overall__value--useful__{{ xblock_id }}">{% trans "These assessments were useful." %}</label>
</li>
<li class="option option--notuseful">
<input type="checkbox"
......@@ -153,7 +153,7 @@
class="option__input feedback__overall__value"
value="These assessments were not useful."
aria-labelledby="feedback__overall__prompt__{{ xblock_id }}"/>
<label class="option__label" for="feedback__overall__value--notuseful">{% trans "These assessments were not useful." %}</label>
<label class="option__label" for="feedback__overall__value--notuseful__{{ xblock_id }}">{% trans "These assessments were not useful." %}</label>
</li>
<li class="option option--disagree">
<input type="checkbox"
......@@ -162,7 +162,7 @@
class="option__input feedback__overall__value"
value="I disagree with one or more of the peer assessments of my response."
aria-labelledby="feedback__overall__prompt__{{ xblock_id }}"/>
<label class="option__label" for="feedback__overall__value--disagree">{% trans "I disagree with one or more of the peer assessments of my response." %}</label>
<label class="option__label" for="feedback__overall__value--disagree__{{ xblock_id }}">{% trans "I disagree with one or more of the peer assessments of my response." %}</label>
</li>
<li class="option option--inappropriate">
<input type="checkbox"
......@@ -171,7 +171,7 @@
class="option__input feedback__overall__value"
value="Some comments I received were inappropriate."
aria-labelledby="feedback__overall__prompt__{{ xblock_id }}"/>
<label class="option__label" for="feedback__overall__value--inappropriate">{% trans "Some comments I received were inappropriate." %}</label>
<label class="option__label" for="feedback__overall__value--inappropriate__{{ xblock_id }}">{% trans "Some comments I received were inappropriate." %}</label>
</li>
</ol>
</li>
......
openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -94,8 +94,8 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" class="peer-assessment--001__assessment__submit action action--submit is--disabled">
<span class="copy">{{ submit_button_text }}</span>
<button type="submit" class="peer-assessment--001__assessment__submit action action--submit" disabled>
{{ submit_button_text }}
</button>
</li>
</ul>
......
openassessment/templates/openassessmentblock/peer/oa_peer_cancelled.html
......@@ -8,7 +8,7 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
<button class="ui-slidable" aria-expanded="false" disabled>
{% endblock %}
{% block title %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
......@@ -38,7 +38,7 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" class="action action--submit action--continue--grading">
<span class="copy">{% trans "Continue Assessing Peers" %}</span>
{% trans "Continue Assessing Peers" %}
</button>
</li>
</ul>
......
openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
......@@ -78,8 +78,8 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" class="peer-assessment--001__assessment__submit action action--submit is--disabled">
<span class="copy">{{ submit_button_text }}</span>
<button type="submit" class="peer-assessment--001__assessment__submit action action--submit" disabled>
{{ submit_button_text }}
</button>
</li>
</ul>
......
openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html
......@@ -7,7 +7,7 @@
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
<button class="ui-slidable" aria-expanded="false" disabled>
{% endblock %}
{% block title %}
......
openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -87,7 +87,7 @@
</div>
<label class="sr" for="submission_answer_upload_{{ xblock_id }}">{% trans "Select a file to upload for this submission." %}</label>
<input type="file" class="submission__answer__upload file--upload" id="submission_answer_upload_{{ xblock_id }}">
<button type="submit" class="file__upload action action--upload is--disabled">{% trans "Upload your file" %}</button>
<button type="submit" class="file__upload action action--upload" disabled>{% trans "Upload your file" %}</button>
</li>
{% endif %}
......@@ -104,22 +104,22 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" class="action action--save submission__save is--disabled" aria-describedby="response__save_status__{{ xblock_id }}">
<button type="submit" class="action action--save submission__save" aria-describedby="response__save_status__{{ xblock_id }}" disabled>
{% trans "Save your progress" %}
</button>
<div id="response__save_status__{{ xblock_id }}" class="response__submission__label">
<div id="response__save_status__{{ xblock_id }}" class="save__submission__label 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" class="submission__preview action action--save submission__save is--disabled" aria-describedby="response__preview_explanation__{{ xblock_id }}">
<button type="submit" class="submission__preview action action--save" aria-describedby="response__preview_explanation__{{ xblock_id }}">
{% trans "Preview in LaTeX"%}
</button>
<div id="response__preview_explanation__{{ xblock_id }}" class="response__submission__label">
{% trans "Click to preview your submission in LaTeX"%}
{% trans "Click to preview your submission in LaTeX."%}
</div>
</li>
<li class="submission__preview__item list--actions__item">
......@@ -144,8 +144,9 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" class="action action--submit step--response__submit {{ submit_enabled|yesno:",is--disabled" }}">
<span class="copy">{% trans "Submit your response and move to the next step" %}</span>
<button type="submit" class="action action--submit step--response__submit"
{{submit_enabled|yesno:",disabled" }}>
{% trans "Submit your response and move to the next step" %}
</button>
</li>
</ul>
......
openassessment/templates/openassessmentblock/response/oa_response_unavailable.html
......@@ -8,7 +8,7 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
<button class="ui-slidable" aria-expanded="false" disabled>
{% endblock %}
{% block title %}
......
openassessment/templates/openassessmentblock/self/oa_self_assessment.html
......@@ -69,8 +69,8 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" class="self-assessment--001__assessment__submit action action--submit is--disabled">
<span class="copy">{% trans "Submit your assessment" %}</span>
<button type="submit" class="self-assessment--001__assessment__submit action action--submit" disabled>
{% trans "Submit your assessment" %}
</button>
</li>
</ul>
......
openassessment/templates/openassessmentblock/self/oa_self_cancelled.html
......@@ -10,7 +10,7 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
<button class="ui-slidable" aria-expanded="false" disabled>
{% endblock %}
{% block title %}
......
openassessment/templates/openassessmentblock/self/oa_self_complete.html
......@@ -8,7 +8,7 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
<button class="ui-slidable" aria-expanded="false" disabled>
{% endblock %}
{% block title %}
......
openassessment/templates/openassessmentblock/self/oa_self_unavailable.html
......@@ -8,7 +8,7 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
<button class="ui-slidable" aria-expanded="false" disabled>
{% endblock %}
{% block title %}
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_area.html
......@@ -67,14 +67,14 @@
</div>
<div class="staff-info__status ui-staff__content__section">
<button class="action--submit action--submit-training"><span class="copy">{% trans "Schedule Example-Based Assessment Training" %}</span></button>
<button class="action--submit action--submit-training">{% trans "Schedule Example-Based Assessment Training" %}</button>
<div class="schedule_training_message"></div>
</div>
{% endif %}
{% if display_reschedule_unfinished_tasks %}
<div class="staff-info__status ui-staff__content__section">
<button class="action--submit action--submit-unfinished-tasks"><span class="copy">{% trans "Reschedule All Unfinished Example-Based Assessment Grading Tasks" %}</span></button>
<button class="action--submit action--submit-unfinished-tasks">{% trans "Reschedule All Unfinished Example-Based Assessment Grading Tasks" %}</button>
<div class="reschedule_unfinished_tasks_message"></div>
</div>
{% endif %}
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_grade_learners_assessment.html
......@@ -43,14 +43,14 @@
<ul class="list list--actions">
<li class="list--actions__item submit_assessment--action">
<button type="submit" class="action action--submit is--disabled">
<span class="copy">{% trans "Submit assessment" %}</span>
<button type="submit" class="action action--submit" disabled>
{% trans "Submit assessment" %}
</button>
</li>
<li class="list--actions__item submit_assessment--action">
<button type="submit" class="action action--submit is--disabled continue_grading--action">
<span class="copy">{% trans "Submit assessment and continue grading" %}</span>
<button type="submit" class="action action--submit continue_grading--action" disabled>
{% trans "Submit assessment and continue grading" %}
</button>
</li>
</ul>
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_override_assessment.html
......@@ -42,8 +42,8 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" class="action action--submit is--disabled">
<span class="copy">{% trans "Submit assessment" %}</span>
<button type="submit" class="action action--submit" disabled>
{% trans "Submit assessment" %}
</button>
<div class="staff-override-error"></div>
......
openassessment/templates/openassessmentblock/staff_area/oa_student_info.html
......@@ -144,13 +144,21 @@
</tbody>
</table>
{% elif workflow_status == "waiting" %}
<div class="staff-info__final__grade__score">{% trans "The submission is waiting for assessments." %}</div>
<div class="staff-info__final__grade__score">
<p>{% trans "The submission is waiting for assessments." %}</p>
</div>
{% elif workflow_status == "cancelled" %}
<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>
<div class="staff-info__final__grade__score">
<p>{% 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>
{% elif workflow_status == None %}
<div class="staff-info__final__grade__score">{% trans "The problem has not been started." %}</div>
<div class="staff-info__final__grade__score">
<p>{% trans "The problem has not been started." %}</p>
</div>
{% else %}
<div class="staff-info__final__grade__score">{% trans "The problem has not been completed." %}</div>
<div class="staff-info__final__grade__score">
<p>{% trans "The problem has not been completed." %}</p>
</div>
{% endif %}
</div>
</div>
......@@ -200,8 +208,8 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button data-submission-uuid="{{ submission.uuid }}"
class="action--submit action--submit-cancel-submission is--disabled">
<span class="copy">{% trans "Remove submission" %}</span>
class="action--submit action--submit-cancel-submission" disabled>
{% trans "Remove submission" %}
</button>
<div class="cancel-submission-error"></div>
......
openassessment/templates/openassessmentblock/student_training/student_training.html
......@@ -154,8 +154,8 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" class="student-training--001__assessment__submit action action--submit is--disabled">
<span class="copy">{% trans "Compare your selections with the instructor's selections" %}</span>
<button type="submit" class="student-training--001__assessment__submit action action--submit" disabled>
{% trans "Compare your selections with the instructor's selections" %}
</button>
</li>
</ul>
......
openassessment/templates/openassessmentblock/student_training/student_training_cancelled.html
......@@ -8,7 +8,7 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
<button class="ui-slidable" aria-expanded="false" disabled>
{% endblock %}
{% block title %}
......
openassessment/templates/openassessmentblock/student_training/student_training_complete.html
......@@ -7,7 +7,7 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
<button class="ui-slidable" aria-expanded="false" disabled>
{% endblock %}
{% block title %}
......
openassessment/templates/openassessmentblock/student_training/student_training_unavailable.html
......@@ -7,7 +7,7 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
<button class="ui-slidable" aria-expanded="false" disabled>
{% endblock %}
{% block title %}
......
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/openassessment-lms.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/spec/lms/oa_staff_area.js
......@@ -504,9 +504,9 @@ describe('OpenAssessment.StaffAreaView', function() {
chooseStudent(staffArea, 'testStudent');
$assessment = getAssessment(staffArea, staffAreaTab);
$submitButton = $('.action--submit', $assessment);
expect($submitButton).toHaveClass('is--disabled');
expect(staffArea.staffSubmitEnabled()).toBe(false);
fillAssessment($assessment, gradingType);
expect($submitButton).not.toHaveClass('is--disabled');
expect(staffArea.staffSubmitEnabled()).toBe(true);
});
it('can submit a staff grade override', function() {
......@@ -643,9 +643,9 @@ describe('OpenAssessment.StaffAreaView', function() {
$assessment = getAssessment(staffArea, staffAreaTab);
$submitButtons = $('.action--submit', $assessment);
expect($submitButtons.length).toBe(2);
expect($submitButtons).toHaveClass('is--disabled');
expect($submitButtons).toHaveAttr('disabled');
fillAssessment($assessment, gradingType);
expect($submitButtons).not.toHaveClass('is--disabled');
expect($submitButtons).not.toHaveAttr('disabled');
});
it('can submit a staff grade', function() {
......
openassessment/xblock/static/js/src/lms/oa_base.js
......@@ -257,6 +257,24 @@ OpenAssessment.BaseView.prototype = {
}
}
}
},
/**
* Enable/disable the button with the given class name.
*
* @param {string} className The css class to find the button
* @param {boolean} enabled If specified enables or disables the button. If not specified,
* the state of the button is not changed, but the current enabled status is returned.
* @returns {boolean} whether or not the button is enabled
*/
buttonEnabled: function(className, enabled) {
var $element = $(className, this.element);
if (typeof enabled === 'undefined') {
return !$element.prop('disabled');
} else {
$element.prop('disabled', !enabled);
return enabled;
}
}
};
......
openassessment/xblock/static/js/src/lms/oa_grade.js
......@@ -206,7 +206,7 @@ OpenAssessment.GradeView.prototype = {
var baseView = this.baseView;
// Disable the submission button to prevent duplicate submissions
$(".feedback__submit", this.element).toggleClass('is--disabled', true);
$(".feedback__submit", this.element).prop('disabled', true);
// Indicate to the user that we're starting to submit
view.feedbackState('submitting');
......
openassessment/xblock/static/js/src/lms/oa_peer.js
......@@ -81,12 +81,7 @@ OpenAssessment.PeerView.prototype = {
**/
continueAssessmentEnabled: function(enabled) {
var button = $('.action--continue--grading', this.element);
if (typeof enabled === 'undefined') {
return !button.hasClass('is--disabled');
} else {
button.toggleClass('is--disabled', !enabled);
}
return this.baseView.buttonEnabled('.action--continue--grading', enabled);
},
/**
......@@ -159,13 +154,7 @@ OpenAssessment.PeerView.prototype = {
>> true
**/
peerSubmitEnabled: function(enabled) {
var button = $('.peer-assessment--001__assessment__submit', this.element);
if (typeof enabled === 'undefined') {
return !button.hasClass('is--disabled');
} else {
button.toggleClass('is--disabled', !enabled);
return enabled;
}
return this.baseView.buttonEnabled('.peer-assessment--001__assessment__submit', enabled);
},
/**
......
openassessment/xblock/static/js/src/lms/oa_response.js
......@@ -168,13 +168,7 @@ OpenAssessment.ResponseView.prototype = {
>> true
**/
submitEnabled: function(enabled) {
var sel = $('.step--response__submit', this.element);
if (typeof enabled === 'undefined') {
return !sel.hasClass('is--disabled');
} else {
sel.toggleClass('is--disabled', !enabled);
return enabled;
}
return this.baseView.buttonEnabled('.step--response__submit', enabled);
},
/**
......@@ -196,12 +190,7 @@ OpenAssessment.ResponseView.prototype = {
>> true
**/
saveEnabled: function(enabled) {
var sel = $('.submission__save', this.element);
if (typeof enabled === 'undefined') {
return !sel.hasClass('is--disabled');
} else {
sel.toggleClass('is--disabled', !enabled);
}
return this.baseView.buttonEnabled('.submission__save', enabled);
},
/**
......@@ -210,13 +199,9 @@ OpenAssessment.ResponseView.prototype = {
Works exactly the same way as saveEnabled method.
**/
previewEnabled: function(enabled) {
var sel = $('.submission__preview', this.element);
if (typeof enabled === 'undefined') {
return !sel.hasClass('is--disabled');
} else {
sel.toggleClass('is--disabled', !enabled);
}
return this.baseView.buttonEnabled('.submission__preview', enabled);
},
/**
Set the save status message.
Retrieve the save status message.
......@@ -228,7 +213,7 @@ OpenAssessment.ResponseView.prototype = {
string: The current status message.
**/
saveStatus: function(msg) {
var sel = $('.response__submission__label', this.element);
var sel = $('.save__submission__label', this.element);
if (typeof msg === 'undefined') {
return sel.text();
} else {
......@@ -511,7 +496,7 @@ OpenAssessment.ResponseView.prototype = {
this.baseView.toggleActionError('upload', null);
this.files = files;
}
$(".file__upload").toggleClass("is--disabled", this.files === null);
$(".file__upload").prop('disabled', this.files === null);
},
/**
......@@ -523,11 +508,11 @@ OpenAssessment.ResponseView.prototype = {
fileUpload: function() {
var view = this;
var fileUpload = $(".file__upload");
fileUpload.addClass("is--disabled");
fileUpload.prop('disabled', true);
var handleError = function(errMsg) {
view.baseView.toggleActionError('upload', errMsg);
fileUpload.removeClass("is--disabled");
fileUpload.prop('disabled', false);
};
// Call getUploadUrl to get the one-time upload URL for this file. Once
......
openassessment/xblock/static/js/src/lms/oa_self.js
......@@ -97,13 +97,7 @@ OpenAssessment.SelfView.prototype = {
>> true
**/
selfSubmitEnabled: function(enabled) {
var button = $('.self-assessment--001__assessment__submit', this.element);
if (typeof enabled === 'undefined') {
return !button.hasClass('is--disabled');
} else {
button.toggleClass('is--disabled', !enabled);
return enabled;
}
return this.baseView.buttonEnabled('.self-assessment--001__assessment__submit', enabled);
},
/**
......
openassessment/xblock/static/js/src/lms/oa_staff_area.js
......@@ -437,12 +437,7 @@
* >> true
*/
cancelSubmissionEnabled: function(enabled) {
var $cancelButton = $('.action--submit-cancel-submission', this.element);
if (typeof enabled === 'undefined') {
return !$cancelButton.hasClass('is--disabled');
} else {
$cancelButton.toggleClass('is--disabled', !enabled);
}
return this.baseView.buttonEnabled('.action--submit-cancel-submission', enabled);
},
/**
......@@ -484,13 +479,7 @@
* @returns {boolean} Whether the button is enabled
*/
staffSubmitEnabled: function(scope, enabled) {
var button = scope.find('.wrapper--staff-assessment .action--submit');
if (typeof enabled === 'undefined') {
return !button.hasClass('is--disabled');
} else {
button.toggleClass('is--disabled', !enabled);
return enabled;
}
return this.baseView.buttonEnabled('.wrapper--staff-assessment .action--submit', enabled);
},
/**
......
openassessment/xblock/static/js/src/lms/oa_training.js
......@@ -128,11 +128,6 @@ OpenAssessment.StudentTrainingView.prototype = {
>> true
**/
assessButtonEnabled: function(isEnabled) {
var button = $('.student-training--001__assessment__submit', this.element);
if (typeof isEnabled === 'undefined') {
return !button.hasClass('is--disabled');
} else {
button.toggleClass('is--disabled', !isEnabled);
}
return this.baseView.buttonEnabled('.student-training--001__assessment__submit', isEnabled);
}
};
openassessment/xblock/static/sass/xb/elements/_controls.scss
......@@ -41,20 +41,11 @@
text-decoration: none;
}
&.disabled, &[disabled], &.is--disabled {
cursor: default;
pointer-events: none;
}
// CASE: icons in buttons
.copy, .icon {
.icon {
display: inline-block;
vertical-align: middle;
}
.copy {
@include margin-right(($baseline-v/2));
}
}
%btn-pill {
......@@ -92,10 +83,6 @@
border: 1px solid $action-primary-color;
color: $copy-inverse-color;
.copy {
@extend %t-strong;
}
&:hover, &:active, &:focus {
background: $action-primary-color-focus;
border-color: $action-primary-color-focus;
......@@ -110,10 +97,11 @@
}
}
&.disabled, &.is--disabled, &[disabled] {
&[disabled] {
color: $action-primary-color-disabled;
border-color: $action-primary-color-disabled;
background: $action-primary-color-disabled-back;
opacity: 1;
}
}
......@@ -127,10 +115,6 @@
border: 1px solid $uxpl-primary-dark;
color: $uxpl-primary-dark;
.copy {
@extend %t-strong;
}
&:hover, &:active, &:focus {
background: $action-primary-color;
border-color: $action-primary-color;
......@@ -147,9 +131,10 @@
}
}
&.disabled, &.is--disabled, &[disabled] {
&[disabled] {
background: $white;
border-color: $action-primary-color-disabled;
color: $action-primary-color-disabled;
opacity: 1;
}
}
openassessment/xblock/static/sass/xb/utilities/_reset.scss
......@@ -288,6 +288,14 @@
}
/**
* Set opacity on buttons to 50% (which matches LMS styling).
*/
button[disabled] {
opacity: 0.5;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
......
test/acceptance/accessibility.py
......@@ -25,7 +25,6 @@ class OpenAssessmentA11yTest(OpenAssessmentTest):
exclude=[
"#footer-edx-v3", # Links to Facebook, Twitter, etc. Populated in production, but not here.
".instructor-info-action", # Staff Debug Info link (general for all XBlocks)
".is--disabled", # TODO: TNL-5183
],
)
......
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