Skip to content
Snippets Groups Projects
Commit 1e11baed authored by Syed Hassan Raza's avatar Syed Hassan Raza
Browse files

Add aria-disabled attribute

TNL-997
parent a129c4d2
No related merge requests found
Showing
with 50 additions and 47 deletions
......@@ -59,6 +59,7 @@ def clear_fields(_step):
$('{selector}')
.prop('disabled', false)
.removeClass('is-disabled')
.attr('aria-disabled', false)
.val('')
.trigger('input');
""".format(selector=SELECTORS['url_inputs'])
......
......@@ -33,8 +33,9 @@ define(['jquery.form', 'js/index'], function() {
$('#request-coursecreator-submit').click(function(event){
$(this)
.toggleClass('is-disabled is-submitting')
.attr('aria-disabled', $(this).hasClass('is-disabled'))
.find('.label')
.text('Submitting Your Request');
.text('Submitting Your Request');
});
};
});
......@@ -87,14 +87,14 @@ define(['jquery', 'underscore', 'gettext', 'js/views/feedback_prompt'], function
$cancelButton = $createUserForm.find('.action-cancel');
$cancelButton.bind('click', function(event) {
event.preventDefault();
$('.create-user-button').toggleClass('is-disabled');
$('.create-user-button').toggleClass('is-disabled').attr('aria-disabled', $('.create-user-button').hasClass('is-disabled'));
$createUserFormWrapper.toggleClass('is-shown');
$('#user-email-input').val('');
});
$('.create-user-button').bind('click', function(event) {
event.preventDefault();
$('.create-user-button').toggleClass('is-disabled');
$('.create-user-button').toggleClass('is-disabled').attr('aria-disabled', $('.create-user-button').hasClass('is-disabled'));
$createUserFormWrapper.toggleClass('is-shown');
$createUserForm.find('#user-email-input').focus();
});
......
......@@ -44,13 +44,13 @@ define(["domReady", "jquery", "underscore", "js/utils/cancel_on_escape", "js/vie
CreateCourseUtils.createCourse(course_info, function (errorMessage) {
$('.wrap-error').addClass('is-shown');
$('#course_creation_error').html('<p>' + errorMessage + '</p>');
$('.new-course-save').addClass('is-disabled');
$('.new-course-save').addClass('is-disabled').attr('aria-disabled', true);
});
};
var cancelNewCourse = function (e) {
e.preventDefault();
$('.new-course-button').removeClass('is-disabled');
$('.new-course-button').removeClass('is-disabled').attr('aria-disabled', false);
$('.wrapper-create-course').removeClass('is-shown');
// Clear out existing fields and errors
_.each(
......@@ -66,8 +66,8 @@ define(["domReady", "jquery", "underscore", "js/utils/cancel_on_escape", "js/vie
var addNewCourse = function (e) {
e.preventDefault();
$('.new-course-button').addClass('is-disabled');
$('.new-course-save').addClass('is-disabled');
$('.new-course-button').addClass('is-disabled').attr('aria-disabled', true);
$('.new-course-save').addClass('is-disabled').attr('aria-disabled', true);
var $newCourse = $('.wrapper-create-course').addClass('is-shown');
var $cancelButton = $newCourse.find('.new-course-cancel');
var $courseName = $('.new-course-name');
......
......@@ -52,7 +52,7 @@ define(["js/views/baseview", "codemirror", "js/views/feedback_notification", "js
onSave: function(event) {
$('#handout_error').removeClass('is-shown');
$('.save-button').removeClass('is-disabled');
$('.save-button').removeClass('is-disabled').attr('aria-disabled', false);
if ($('.CodeMirror-lines').find('.cm-error').length == 0){
this.model.set('data', this.$codeMirror.getValue());
var saving = new NotificationView.Mini({
......@@ -73,21 +73,21 @@ define(["js/views/baseview", "codemirror", "js/views/feedback_notification", "js
});
}else{
$('#handout_error').addClass('is-shown');
$('.save-button').addClass('is-disabled');
$('.save-button').addClass('is-disabled').attr('aria-disabled', true);
event.preventDefault();
}
},
onCancel: function(event) {
$('#handout_error').removeClass('is-shown');
$('.save-button').removeClass('is-disabled');
$('.save-button').removeClass('is-disabled').attr('aria-disabled', false);
this.$form.hide();
this.closeEditor();
},
closeEditor: function() {
$('#handout_error').removeClass('is-shown');
$('.save-button').removeClass('is-disabled');
$('.save-button').removeClass('is-disabled').attr('aria-disabled', false);
this.$form.hide();
ModalUtils.hideModalCover();
this.$form.find('.CodeMirror').remove();
......
......@@ -10,7 +10,7 @@ define(["codemirror", 'js/utils/handle_iframe_binding', "utility"],
autoCloseTags: true
});
$codeMirror.on('change', function () {
$('.save-button').removeClass('is-disabled');
$('.save-button').removeClass('is-disabled').attr('aria-disabled', false);
});
$codeMirror.setValue(content);
$codeMirror.clearHistory();
......
......@@ -44,12 +44,12 @@ define(["domReady", "jquery", "underscore", "js/views/utils/create_course_utils"
CreateCourseUtils.createCourse(course_info, function (errorMessage) {
$('.wrapper-error').addClass('is-shown').removeClass('is-hidden');
$('#course_rerun_error').html('<p>' + errorMessage + '</p>');
$('.rerun-course-save').addClass('is-disabled').removeClass('is-processing').html(gettext('Create Re-run'));
$('.rerun-course-save').addClass('is-disabled').attr('aria-disabled', true).removeClass('is-processing').html(gettext('Create Re-run'));
$('.action-cancel').removeClass('is-hidden');
});
// Go into creating re-run state
$('.rerun-course-save').addClass('is-disabled').addClass('is-processing').html(
$('.rerun-course-save').addClass('is-disabled').attr('aria-disabled', true).addClass('is-processing').html(
'<i class="icon icon-refresh icon-spin"></i>' + gettext('Processing Re-run Request')
);
$('.action-cancel').addClass('is-hidden');
......
......@@ -104,7 +104,8 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog, V
if (this.model.get('non_editable')) {
this.$el.find('#' + this.uniqueId)
.prop('readonly', true)
.addClass('is-disabled');
.addClass('is-disabled')
.attr('aria-disabled', true);
}
},
......@@ -298,7 +299,7 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog, V
// change event
var list = this.model.get('value') || [];
this.setValueInEditor(list.concat(['']));
this.$el.find('.create-setting').addClass('is-disabled');
this.$el.find('.create-setting').addClass('is-disabled').attr('aria-disabled', true);
},
removeEntry: function(event) {
......@@ -306,17 +307,17 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog, V
var entry = $(event.currentTarget).siblings().val();
this.setValueInEditor(_.without(this.model.get('value'), entry));
this.updateModel();
this.$el.find('.create-setting').removeClass('is-disabled');
this.$el.find('.create-setting').removeClass('is-disabled').attr('aria-disabled', false);
},
enableAdd: function() {
this.$el.find('.create-setting').removeClass('is-disabled');
this.$el.find('.create-setting').removeClass('is-disabled').attr('aria-disabled', false);
},
clear: function() {
AbstractEditor.prototype.clear.apply(this, arguments);
if (_.isNull(this.model.getValue())) {
this.$el.find('.create-setting').removeClass('is-disabled');
this.$el.find('.create-setting').removeClass('is-disabled').attr('aria-disabled', false);
}
}
});
......@@ -469,7 +470,7 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog, V
var dict = $.extend(true, {}, this.model.get('value')) || {};
dict[''] = '';
this.setValueInEditor(dict);
this.$el.find('.create-setting').addClass('is-disabled');
this.$el.find('.create-setting').addClass('is-disabled').attr('aria-disabled', true);
},
removeEntry: function(event) {
......@@ -477,17 +478,17 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog, V
var entry = $(event.currentTarget).siblings('.input-key').val();
this.setValueInEditor(_.omit(this.model.get('value'), entry));
this.updateModel();
this.$el.find('.create-setting').removeClass('is-disabled');
this.$el.find('.create-setting').removeClass('is-disabled').attr('aria-disabled', false);
},
enableAdd: function() {
this.$el.find('.create-setting').removeClass('is-disabled');
this.$el.find('.create-setting').removeClass('is-disabled').attr('aria-disabled', false);
},
clear: function() {
AbstractEditor.prototype.clear.apply(this, arguments);
if (_.isNull(this.model.getValue())) {
this.$el.find('.create-setting').removeClass('is-disabled');
this.$el.find('.create-setting').removeClass('is-disabled').attr('aria-disabled', false);
}
}
});
......
......@@ -61,16 +61,16 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/views/utils/
var previewAction = this.$el.find('.button-preview'),
viewLiveAction = this.$el.find('.button-view');
if (this.model.get('published')) {
viewLiveAction.removeClass(disabledCss);
viewLiveAction.removeClass(disabledCss).attr('aria-disabled', false);
}
else {
viewLiveAction.addClass(disabledCss);
viewLiveAction.addClass(disabledCss).attr('aria-disabled', true);
}
if (this.model.get('has_changes') || !this.model.get('published')) {
previewAction.removeClass(disabledCss);
previewAction.removeClass(disabledCss).attr('aria-disabled', false);
}
else {
previewAction.addClass(disabledCss);
previewAction.addClass(disabledCss).attr('aria-disabled', true);
}
}
});
......
......@@ -27,8 +27,8 @@ define(["underscore", "js/views/baseview"], function(_, BaseView) {
current_page: collection.currentPage,
total_pages: collection.totalPages
}));
this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0);
this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage);
this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);;
this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
return this;
},
......
......@@ -25,8 +25,8 @@ define(["underscore", "gettext", "js/views/baseview"], function(_, gettext, Base
this.$el.html(this.template({
messageHtml: messageHtml
}));
this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0);
this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage);
this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);
this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
return this;
},
......
......@@ -88,9 +88,9 @@ define(["jquery", "underscore", "gettext", "js/views/feedback_notification", "js
* a JQuery promise.
*/
disableElementWhileRunning = function(element, operation) {
element.addClass("is-disabled");
element.addClass("is-disabled").attr('aria-disabled', true);
return operation().always(function() {
element.removeClass("is-disabled");
element.removeClass("is-disabled").attr('aria-disabled', false);
});
};
......
......@@ -279,7 +279,7 @@ function($, Backbone, _, AbstractEditor, Utils, MessageManager) {
// Enable inputs.
$inputs
.prop('disabled', false)
.prop('disabled', false).attr('aria-disabled', false)
.removeClass('is-disabled');
} else {
......@@ -288,7 +288,7 @@ function($, Backbone, _, AbstractEditor, Utils, MessageManager) {
// the current input.
$inputs
.not($el)
.prop('disabled', true)
.prop('disabled', true).attr('aria-disabled', true)
.addClass('is-disabled');
// If error occurs in the main video input, just close video
......
......@@ -133,7 +133,7 @@ function($, _, AbstractEditor, FileUpload, UploadDialog) {
var dict = $.extend(true, {}, this.model.get('value'));
dict[''] = '';
this.setValueInEditor(dict);
this.$el.find('.create-setting').addClass('is-disabled');
this.$el.find('.create-setting').addClass('is-disabled').attr('aria-disabled', true);
},
removeEntry: function(event) {
......@@ -142,7 +142,7 @@ function($, _, AbstractEditor, FileUpload, UploadDialog) {
var entry = $(event.currentTarget).data('lang');
this.setValueInEditor(_.omit(this.model.get('value'), entry));
this.updateModel();
this.$el.find('.create-setting').removeClass('is-disabled');
this.$el.find('.create-setting').removeClass('is-disabled').attr('aria-disabled', false);
},
upload: function (event) {
......@@ -173,13 +173,13 @@ function($, _, AbstractEditor, FileUpload, UploadDialog) {
},
enableAdd: function() {
this.$el.find('.create-setting').removeClass('is-disabled');
this.$el.find('.create-setting').removeClass('is-disabled').attr('aria-disabled', false);
},
clear: function() {
AbstractEditor.prototype.clear.apply(this, arguments);
if (_.isNull(this.model.getValue())) {
this.$el.find('.create-setting').removeClass('is-disabled');
this.$el.find('.create-setting').removeClass('is-disabled').attr('aria-disabled', false);
}
},
......
......@@ -72,12 +72,12 @@ templates = ["basic-modal", "modal-button", "edit-xblock-modal",
<ul>
% if is_unit_page:
<li class="action-item action-view nav-item">
<a href="${published_preview_link}" class="button button-view action-button is-disabled" rel="external">
<a href="${published_preview_link}" class="button button-view action-button is-disabled" aria-disabled="true" rel="external">
<span class="action-button-text">${_("View Live Version")}</span>
</a>
</li>
<li class="action-item action-preview nav-item">
<a href="${draft_preview_link}" class="button button-preview action-button is-disabled" rel="external">
<a href="${draft_preview_link}" class="button button-preview action-button is-disabled" aria-disabled="true" rel="external">
<span class="action-button-text">${_("Preview Changes")}</span>
</a>
</li>
......
......@@ -115,7 +115,7 @@
</div>
<div class="actions">
<button type="submit" class="action action-primary rerun-course-save is-disabled">${_('Create Re-run')}</button>
<button type="submit" class="action action-primary rerun-course-save is-disabled" aria-disabled="true" >${_('Create Re-run')}</button>
<button type="button" class="action action-secondary action-cancel rerun-course-cancel">${_('Cancel')}</button>
</div>
</form>
......
......@@ -50,7 +50,7 @@
</li>
<% } else { %>
<li class="action action-delete wrapper-delete-button" data-tooltip="<%= gettext('Cannot delete when in use by an experiment') %>">
<button class="delete action-icon is-disabled"><i class="icon-trash"></i><span><%= gettext("Delete") %></span></button>
<button class="delete action-icon is-disabled" aria-disabled="true" ><i class="icon-trash"></i><span><%= gettext("Delete") %></span></button>
</li>
<% } %>
</ul>
......
......@@ -51,7 +51,7 @@
</span>
<% } else { %>
<span class="wrapper-delete-button" data-tooltip="<%= gettext('Cannot delete when in use by an experiment') %>">
<a class="button action-delete delete is-disabled" href="#"><%= gettext("Delete") %></a>
<a class="button action-delete delete is-disabled" href="#" aria-disabled="true" ><%= gettext("Delete") %></a>
</span>
<% } %>
<% } %>
......
......@@ -16,12 +16,12 @@
<ul>
% if is_unit_page:
<li class="action-item action-view nav-item">
<a href="${published_preview_link}" class="button button-view action-button is-disabled">
<a href="${published_preview_link}" class="button button-view action-button is-disabled" aria-disabled="true">
<span class="action-button-text">${_("View Live Version")}</span>
</a>
</li>
<li class="action-item action-preview nav-item">
<a href="${draft_preview_link}" class="button button-preview action-button is-disabled">
<a href="${draft_preview_link}" class="button button-preview action-button is-disabled" aria-disabled="true">
<span class="action-button-text">${_("Preview Changes")}</span>
</a>
</li>
......
......@@ -104,7 +104,7 @@
</div>
<div class="actions">
<button type="submit" class="action action-primary rerun-course-save is-disabled">Create Re-run</button>
<button type="submit" class="action action-primary rerun-course-save is-disabled" aria-disabled="true" >Create Re-run</button>
<button type="button" class="action action-secondary action-cancel rerun-course-cancel">Cancel</button>
</div>
</form>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment