Toggle aria-disabled attribute on New Course/New Library buttons.

cms/static/js/index.js

@@ -70,7 +70,7 @@ define(["domReady", "jquery", "underscore", "js/utils/cancel_on_escape", "js/vie
         var makeCancelHandler = function (addType) {
             return function(e) {
                 e.preventDefault();
-                $('.new-'+addType+'-button').removeClass('is-disabled').attr('aria-disabled', false);;
+                $('.new-'+addType+'-button').removeClass('is-disabled').attr('aria-disabled', false);
                 $('.wrapper-create-'+addType).removeClass('is-shown');
                 // Clear out existing fields and errors
                 $('#create-'+addType+'-form input[type=text]').val('');
@@ -117,14 +117,14 @@ define(["domReady", "jquery", "underscore", "js/utils/cancel_on_escape", "js/vie
             CreateLibraryUtils.createLibrary(lib_info, function (errorMessage) {
                 $('.create-library .wrap-error').addClass('is-shown');
                 $('#library_creation_error').html('<p>' + errorMessage + '</p>');
-                $('.new-library-save').addClass('is-disabled');
+                $('.new-library-save').addClass('is-disabled').attr('aria-disabled', true);
             });
         };
 
         var addNewLibrary = function (e) {
             e.preventDefault();
-            $('.new-library-button').addClass('is-disabled');
-            $('.new-library-save').addClass('is-disabled');
+            $('.new-library-button').addClass('is-disabled').attr('aria-disabled', true);
+            $('.new-library-save').addClass('is-disabled').attr('aria-disabled', true);
             var $newLibrary = $('.wrapper-create-library').addClass('is-shown');
             var $cancelButton = $newLibrary.find('.new-library-cancel');
             var $libraryName = $('.new-library-name');

cms/static/js/views/utils/create_course_utils.js

@@ -4,14 +4,19 @@
 define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
     function ($, _, gettext, ViewUtils) {
         return function (selectors, classes) {
-            var validateTotalCourseItemsLength, setNewCourseFieldInErr, hasInvalidRequiredFields,
-                createCourse, validateFilledFields, configureHandlers;
+            var toggleSaveButton, validateTotalCourseItemsLength, setNewCourseFieldInErr,
+                hasInvalidRequiredFields, createCourse, validateFilledFields, configureHandlers;
 
             var validateRequiredField = ViewUtils.validateRequiredField;
             var validateURLItemEncoding = ViewUtils.validateURLItemEncoding;
 
             var keyLengthViolationMessage = gettext('The combined length of the organization, course number, and course run fields cannot be more than <%=limit%> characters.');
 
+            toggleSaveButton = function (is_enabled) {
+                var is_disabled = !is_enabled;
+                $(selectors.save).toggleClass(classes.disabled, is_disabled).attr('aria-disabled', is_disabled);
+            };
+
             // Ensure that org, course_num and run passes checkTotalKeyLengthViolations
             validateTotalCourseItemsLength = function () {
                 ViewUtils.checkTotalKeyLengthViolations(
@@ -25,14 +30,14 @@ define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
                 if (msg) {
                     el.addClass(classes.error);
                     el.children(selectors.tipError).addClass(classes.showing).removeClass(classes.hiding).text(msg);
-                    $(selectors.save).addClass(classes.disabled);
+                    toggleSaveButton(false);
                 }
                 else {
                     el.removeClass(classes.error);
                     el.children(selectors.tipError).addClass(classes.hiding).removeClass(classes.showing);
                     // One "error" div is always present, but hidden or shown
                     if ($(selectors.error).length === 1) {
-                        $(selectors.save).removeClass(classes.disabled);
+                        toggleSaveButton(true);
                     }
                 }
             };
@@ -94,7 +99,7 @@ define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
                             setNewCourseFieldInErr($ele.parent(), error);
                             validateTotalCourseItemsLength();
                             if (!validateFilledFields()) {
-                                $(selectors.save).addClass(classes.disabled);
+                                toggleSaveButton(false);
                             }
                         });
                     }
@@ -105,7 +110,7 @@ define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
                     setNewCourseFieldInErr($name.parent(), error);
                     validateTotalCourseItemsLength();
                     if (!validateFilledFields()) {
-                        $(selectors.save).addClass(classes.disabled);
+                        toggleSaveButton(false);
                     }
                 });
             };

cms/static/js/views/utils/create_library_utils.js

@@ -5,14 +5,19 @@ define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
     function ($, _, gettext, ViewUtils) {
         "use strict";
         return function (selectors, classes) {
-            var validateTotalKeyLength, setNewLibraryFieldInErr, hasInvalidRequiredFields,
-                createLibrary, validateFilledFields, configureHandlers;
+            var toggleSaveButton, validateTotalKeyLength, setNewLibraryFieldInErr,
+                hasInvalidRequiredFields, createLibrary, validateFilledFields, configureHandlers;
 
             var validateRequiredField = ViewUtils.validateRequiredField;
             var validateURLItemEncoding = ViewUtils.validateURLItemEncoding;
 
             var keyLengthViolationMessage = gettext("The combined length of the organization and library code fields cannot be more than <%=limit%> characters.");
 
+            toggleSaveButton = function (is_enabled) {
+                var is_disabled = !is_enabled;
+                $(selectors.save).toggleClass(classes.disabled, is_disabled).attr('aria-disabled', is_disabled);
+            };
+
             // Ensure that org/librarycode passes validateTotalKeyLength check
             validateTotalKeyLength = function () {
                 ViewUtils.checkTotalKeyLengthViolations(
@@ -26,14 +31,14 @@ define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
                 if (message) {
                     element.addClass(classes.error);
                     element.children(selectors.tipError).addClass(classes.showing).removeClass(classes.hiding).text(message);
-                    $(selectors.save).addClass(classes.disabled);
+                    toggleSaveButton(false);
                 }
                 else {
                     element.removeClass(classes.error);
                     element.children(selectors.tipError).addClass(classes.hiding).removeClass(classes.showing);
                     // One "error" div is always present, but hidden or shown
                     if ($(selectors.error).length === 1) {
-                        $(selectors.save).removeClass(classes.disabled);
+                        toggleSaveButton(true);
                     }
                 }
             };
@@ -101,7 +106,7 @@ define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
                             setNewLibraryFieldInErr($element.parent(), error);
                             validateTotalKeyLength();
                             if (!validateFilledFields()) {
-                                $(selectors.save).addClass(classes.disabled);
+                                toggleSaveButton(false);
                             }
                         });
                     }
@@ -112,7 +117,7 @@ define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
                     setNewLibraryFieldInErr($name.parent(), error);
                     validateTotalKeyLength();
                     if (!validateFilledFields()) {
-                        $(selectors.save).addClass(classes.disabled);
+                        toggleSaveButton(false);
                     }
                 });
             };