Commit 9b682b64 by Christina Roberts Committed by GitHub

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

Make disabled buttons truly disabled.
parents 20c82ea6 66af4db9
......@@ -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>
......
......@@ -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>
......
......@@ -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 %}
......
......@@ -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>
......
......@@ -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>
......
......@@ -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 %}
......
......@@ -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>
......
......@@ -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 %}
......
......@@ -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>
......
......@@ -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 %}
......
......@@ -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 %}
......
......@@ -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 %}
......
......@@ -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 %}
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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 %}
......
......@@ -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 %}
......
......@@ -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 %}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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() {
......
......@@ -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;
}
}
};
......
......@@ -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');
......
......@@ -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);
},
/**
......
......@@ -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
......
......@@ -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);
},
/**
......
......@@ -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);
},
/**
......
......@@ -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);
}
};
......@@ -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;
}
}
......@@ -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+.
*/
......
......@@ -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