Merge pull request #6357 from Shrhawk/shr/bug/TNL-997-aria-disabled-need-to-added

Add aria-disabled attribute

cms/djangoapps/contentstore/features/transcripts.py

@@ -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'])

cms/static/js/factories/index.js

@@ -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');
         });
     };
 });

cms/static/js/factories/manage_users.js

@@ -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();
         });

cms/static/js/index.js

@@ -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');

cms/static/js/views/course_info_handout.js

@@ -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();

cms/static/js/views/course_info_helper.js

@@ -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();

cms/static/js/views/course_rerun.js

@@ -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');

cms/static/js/views/metadata.js

@@ -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);
             }
         }
     });

cms/static/js/views/pages/container_subviews.js

@@ -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);
                 }
             }
         });

cms/static/js/views/paging_footer.js

@@ -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;
         },
 

cms/static/js/views/paging_header.js

@@ -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;
         },
 

cms/static/js/views/utils/view_utils.js

@@ -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);
             });
         };
 

cms/static/js/views/video/transcripts/metadata_videolist.js

@@ -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

cms/static/js/views/video/translations_editor.js

@@ -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);
             }
         },
 

cms/templates/container.html

@@ -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>

cms/templates/course-create-rerun.html

@@ -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>

cms/templates/js/group-configuration-details.underscore

@@ -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>

cms/templates/js/group-configuration-edit.underscore

@@ -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>
             <% } %>
         <% } %>

cms/templates/js/mock/mock-container-page.underscore

@@ -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>

cms/templates/js/mock/mock-create-course-rerun.underscore

@@ -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>

cms/templates/js/publish-xblock.underscore

@@ -93,12 +93,12 @@ var visibleToStaffOnly = visibilityState === 'staff_only';
         <ul class="action-list">
             <li class="action-item">
                 <a class="action-publish action-primary <% if (published && !hasChanges) { %>is-disabled<% } %>"
-                   href=""><%= gettext("Publish") %>
+                   href="" aria-disabled="<% if (published && !hasChanges) { %>true<% } else { %>false<% } %>" ><%= gettext("Publish") %>
                 </a>
             </li>
             <li class="action-item">
                 <a class="action-discard action-secondary <% if (!published || !hasChanges) { %>is-disabled<% } %>"
-                   href=""><%= gettext("Discard Changes") %>
+                   href="" aria-disabled="<% if (!published || !hasChanges) { %>true<% } else { %>false<% } %>"><%= gettext("Discard Changes") %>
                 </a>
             </li>
         </ul>

cms/templates/js/video/transcripts/messages/transcripts-not-found.underscore

@@ -10,7 +10,7 @@
     <button class="action setting-upload" type="button" name="setting-upload" value="<%= gettext("Upload New Transcript") %>" data-tooltip="<%= gettext("Upload New Transcript") %>">
         <%= gettext("Upload New Transcript") %>
     </button>
-    <a class="action setting-download is-disabled" href="javascropt: void(0);" data-tooltip="<%= gettext("Download Transcript for Editing") %>">
+    <a class="action setting-download is-disabled" aria-disabled="true" href="javascropt: void(0);" data-tooltip="<%= gettext("Download Transcript for Editing") %>">
         <%= gettext("Download Transcript for Editing") %>
     </a>
 </div>

cms/templates/manage_users.html

@@ -114,7 +114,7 @@
                 <a href="#" class="admin-role toggle-admin-role ${'remove' if is_instuctor else 'add'}-admin-role">${_("Remove Admin Access") if is_instuctor else _("Add Admin Access")}</a>
               % endif
             </li>
-            <li class="action action-delete ${"is-disabled" if request.user.id == user.id else ""}">
+            <li class="action action-delete ${"is-disabled" if request.user.id == user.id else ""}" aria-disabled="${'true' if request.user.id == user.id else 'false'}">
                 <a href="#" class="delete remove-user action-icon" data-id="${user.email}"><i class="icon-trash"></i><span class="sr">${_("Delete the user, {username}").format(username=user.username)}</span></a>
             </li>
           </ul>

cms/templates/ux/reference/container.html

@@ -495,7 +495,7 @@
                   <div class="wrapper-pub-actions bar-mod-actions">
                       <ul class="action-list">
                         <li class="action-item"><a class="action-publish action-primary" href="">Publish</a></li>
-                        <li class="action-item"><a class="action-discard action-secondary is-disabled" href="">Discard Changes</a></li>
+                        <li class="action-item"><a class="action-discard action-secondary is-disabled" href="" aria-disabled="true" >Discard Changes</a></li>
                       </ul>
                   </div>
                 </div>
@@ -539,8 +539,8 @@
                   <!-- case: future release -->
                   <div class="wrapper-pub-actions bar-mod-actions">
                       <ul class="action-list">
-                        <li class="action-item"><a class="action-publish action-primary is-disabled" href="">Publish</a></li>
-                        <li class="action-item"><a class="action-discard action-secondary is-disabled" href="">Discard Changes</a></li>
+                        <li class="action-item"><a class="action-publish action-primary is-disabled" href="" aria-disabled="true" >Publish</a></li>
+                        <li class="action-item"><a class="action-discard action-secondary is-disabled" href="" aria-disabled="true" >Discard Changes</a></li>
                       </ul>
                   </div>
                 </div>
@@ -677,8 +677,8 @@
                   <!-- case: future release -->
                   <div class="wrapper-pub-actions bar-mod-actions">
                       <ul class="action-list">
-                        <li class="action-item"><a class="action-publish action-primary is-disabled" href="">Publish</a></li>
-                        <li class="action-item"><a class="action-discard action-secondary is-disabled" href="">Discard Changes</a></li>
+                        <li class="action-item"><a class="action-publish action-primary is-disabled" href="" aria-disabled="true" >Publish</a></li>
+                        <li class="action-item"><a class="action-discard action-secondary is-disabled" href="" aria-disabled="true" >Discard Changes</a></li>
                       </ul>
                   </div>
                 </div>

cms/templates/ux/reference/course-create-rerun.html

@@ -110,7 +110,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>
@@ -180,7 +180,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 and Return to Dashboard</button>
               </div>
             </form>
@@ -250,7 +250,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 and Return to Dashboard</button>
               </div>
             </form>
@@ -315,7 +315,7 @@
               </div>
 
               <div class="actions">
-                <button type="submit" class="action action-primary rerun-course-save is-disabled is-processing">
+                <button type="submit" class="action action-primary rerun-course-save is-disabled is-processing" aria-disabled="true" >
                   <i class="icon icon-refresh icon-spin"></i>
                   Processing Re-run Request
                 </button>

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -673,9 +673,11 @@ class @Problem
     # Used to disable check button to reduce chance of accidental double-submissions.
     if enable
       @checkButton.removeClass 'is-disabled'
+      @checkButton.attr({'aria-disabled': 'false'})
       @checkButton.val(@checkButtonCheckText)
     else
       @checkButton.addClass 'is-disabled'
+      @checkButton.attr({'aria-disabled': 'true'})
       @checkButton.val(@checkButtonCheckingText)
 
   enableCheckButtonAfterResponse: =>

common/lib/xmodule/xmodule/js/src/html/imageModal.js

@@ -46,8 +46,8 @@ var setupFullScreenModal = function() {
   //Define function to close modal
   function closeModal(imageModal) {
     imageModal.removeClass('image-is-fit-to-screen').removeClass('image-is-zoomed');
-    $(".wrapper-modal-image .image-content .image-controls .modal-ui-icon.action-zoom-in").removeClass('is-disabled');
-    $(".wrapper-modal-image .image-content .image-controls .modal-ui-icon.action-zoom-out").addClass('is-disabled');
+    $(".wrapper-modal-image .image-content .image-controls .modal-ui-icon.action-zoom-in").removeClass('is-disabled').attr('aria-disabled', false);
+    $(".wrapper-modal-image .image-content .image-controls .modal-ui-icon.action-zoom-out").addClass('is-disabled').attr('aria-disabled', true);
     var currentDraggie = imageModal.data("draggie");
     currentDraggie.disable();
     $('body').css('overflow', 'auto');
@@ -104,7 +104,7 @@ var setupFullScreenModal = function() {
         currentDraggie.disable();
       }
       
-      $(".wrapper-modal-image .image-content .image-controls .modal-ui-icon").toggleClass('is-disabled');
+      $(".wrapper-modal-image .image-content .image-controls .modal-ui-icon").toggleClass('is-disabled').attr('aria-disabled', $(this).hasClass('is-disabled'));
     }
   });
 };

common/templates/js/image-modal.underscore

@@ -30,7 +30,7 @@
         </li>
     
         <li class="image-control">
-          <a href="#" class="modal-ui-icon action-zoom-out is-disabled" role="button">
+          <a href="#" class="modal-ui-icon action-zoom-out is-disabled" aria-disabled="true" role="button">
             <span class="label">
               <i class="icon-zoom-out icon-large"></i> <%= gettext("Zoom Out") %>
             </span>

lms/static/js/course_survey.js

@@ -83,11 +83,13 @@ function toggleSubmitButton(enable) {
     if(enable) {
         $submitButton.
             removeClass('is-disabled').
+            attr('aria-disabled', false).
             removeProp('disabled');
     }
     else {
         $submitButton.
             addClass('is-disabled').
+            attr('aria-disabled', true).
             prop('disabled', true);
     }
 }

lms/static/js/verify_student/photocapture.js

@@ -69,7 +69,7 @@ function refereshPageMessage() {
 }
 
 var submitToPaymentProcessing = function() {
-  $("#pay_button").addClass('is-disabled');
+  $("#pay_button").addClass('is-disabled').attr('aria-disabled', true);
   var contribution_input = $("input[name='contribution']:checked")
   var contribution = 0;
   if(contribution_input.attr('id') == 'contribution-other') {
@@ -96,7 +96,7 @@ var submitToPaymentProcessing = function() {
       }
     },
     error:function(xhr,status,error) {
-      $("#pay_button").removeClass('is-disabled');
+      $("#pay_button").removeClass('is-disabled').attr('aria-disabled', false);
       showSubmissionError()
     }
   });

lms/static/js/verify_student/views/make_payment_step_view.js

@@ -80,7 +80,8 @@ var edx = edx || {};
             }
             $( '#pay_button' )
                 .toggleClass( 'is-disabled', !isEnabled )
-                .prop( 'disabled', !isEnabled );
+                .prop( 'disabled', !isEnabled )
+                .attr('aria-disabled', !isEnabled);
         },
 
         createOrder: function() {

lms/static/js/verify_student/views/review_photos_step_view.js

@@ -96,7 +96,8 @@ var edx = edx || {};
         setSubmitButtonEnabled: function( isEnabled ) {
             $( '#next_step_button' )
                 .toggleClass( 'is-disabled', !isEnabled )
-                .prop( 'disabled', !isEnabled );
+                .prop( 'disabled', !isEnabled )
+                .attr('aria-disabled', !isEnabled);
         }
     });
 

lms/static/js/verify_student/views/webcam_photo_view.js

@@ -313,7 +313,8 @@
         setSubmitButtonEnabled: function( isEnabled ) {
             $( this.submitButton )
                 .toggleClass( 'is-disabled', !isEnabled )
-                .prop( 'disabled', !isEnabled );
+                .prop( 'disabled', !isEnabled )
+                .attr('aria-disabled', !isEnabled);
         }
     });
 

lms/static/js/views/cohorts.js

@@ -136,10 +136,10 @@
         setCohortEditorVisibility: function(showEditor) {
             if (showEditor) {
                 this.$('.cohort-management-group').removeClass(hiddenClass);
-                this.$('.cohort-management-nav').removeClass(disabledClass);
+                this.$('.cohort-management-nav').removeClass(disabledClass).attr('aria-disabled', false);
             } else {
                 this.$('.cohort-management-group').addClass(hiddenClass);
-                this.$('.cohort-management-nav').addClass(disabledClass);
+                this.$('.cohort-management-nav').addClass(disabledClass).attr('aria-disabled', true);
             }
         },
 

lms/static/js/views/file_uploader.js

@@ -60,7 +60,7 @@
                 replaceFileInput: false,
                 add: function (e, data) {
                     var file = data.files[0];
-                    submitButton.removeClass("is-disabled");
+                    submitButton.removeClass("is-disabled").attr('aria-disabled', false);
                     submitButton.unbind('click');
                     submitButton.click(function (event) {
                         event.preventDefault();

lms/templates/courseware/legacy_instructor_dashboard.html

@@ -202,17 +202,17 @@ function goto( mode)
     % endif
 
     <p>
-    <input type="submit" name="action" value="Dump list of enrolled students" class="${'is-disabled' if disable_buttons else ''}">
+    <input type="submit" name="action" value="Dump list of enrolled students" class="${'is-disabled' if disable_buttons else ''}" aria-disabled="${'true' if disable_buttons else 'false'}">
     </p>
 
     <p>
-    <input type="submit" name="action" value="Dump all RAW grades for all students in this course" class="${'is-disabled' if disable_buttons else ''}">
-    <input type="submit" name="action" value="Download CSV of all RAW grades" class="${'is-disabled' if disable_buttons else ''}">
+    <input type="submit" name="action" value="Dump all RAW grades for all students in this course" class="${'is-disabled' if disable_buttons else ''}" aria-disabled="${'true' if disable_buttons else 'false'}">
+    <input type="submit" name="action" value="Download CSV of all RAW grades" class="${'is-disabled' if disable_buttons else ''}" aria-disabled="${'true' if disable_buttons else 'false'}" >
     </p>
 
     <p>
   %if not settings.FEATURES.get('ENABLE_ASYNC_ANSWER_DISTRIBUTION'):
-    <input type="submit" name="action" value="Download CSV of answer distributions" class="${'is-disabled' if disable_buttons else ''}">
+    <input type="submit" name="action" value="Download CSV of answer distributions" class="${'is-disabled' if disable_buttons else ''}" aria-disabled="${'true' if disable_buttons else 'false'}" >
   %endif
     <p  class="is-deprecated">
       ${_("To download student grades and view the grading configuration for your course, visit the Data Download section of the Instructor Dashboard.")}
@@ -329,8 +329,8 @@ function goto( mode)
     </div>
     % endif
 
-    <input type="submit" name="action" value="List enrolled students" class="${'is-disabled' if disable_buttons else ''}">
-    <input type="submit" name="action" value="List students who may enroll but may not have yet signed up" class="${'is-disabled' if disable_buttons else ''}">
+    <input type="submit" name="action" value="List enrolled students" class="${'is-disabled' if disable_buttons else ''}" aria-disabled="${'true' if disable_buttons else 'false'}">
+    <input type="submit" name="action" value="List students who may enroll but may not have yet signed up" class="${'is-disabled' if disable_buttons else ''}" aria-disabled="${'true' if disable_buttons else 'false'}" >
     <hr width="40%" style="align:left">
 
   %if settings.FEATURES.get('REMOTE_GRADEBOOK_URL','') and instructor_access:

lms/templates/courseware/mktg_course_about.html

@@ -112,7 +112,7 @@
         % endif
 
         %else:
-          <div class="action registration-closed is-disabled">${_("Enrollment Is Closed")}</div>
+          <div class="action registration-closed is-disabled" aria-disabled="true" >${_("Enrollment Is Closed")}</div>
         %endif
     </li>
   </ul>

lms/templates/file-upload.underscore

@@ -18,7 +18,7 @@
       </div>
 
       <div class="form-actions">
-        <button id="file-upload-form-submit" type="submit" class="submit-file-button action action-submit is-disabled"><%- submitButtonText %></button>
+        <button id="file-upload-form-submit" type="submit" class="submit-file-button action action-submit is-disabled" aria-disabled="true"><%- submitButtonText %></button>
       </div>
   </form>
 </div>

lms/templates/instructor/instructor_dashboard_2/data_download.html

@@ -15,7 +15,7 @@
   <br>
 
   <p>${_("Click to download a CSV of anonymized student IDs:")}</p>
-  <p><input type="button" name="list-anon-ids" value="${_("Get Student Anonymized IDs CSV")}" data-csv="true" class="csv" data-endpoint="${ section_data['get_anon_ids_url'] }" class="${'is-disabled' if disable_buttons else ''}"></p>
+  <p><input type="button" name="list-anon-ids" value="${_("Get Student Anonymized IDs CSV")}" data-csv="true" class="csv" data-endpoint="${ section_data['get_anon_ids_url'] }" class="${'is-disabled' if disable_buttons else ''}" aria-disabled="${'true' if disable_buttons else 'false'}" ></p>
 </div>
 
 %if settings.FEATURES.get('ENABLE_S3_GRADE_DOWNLOADS'):

lms/templates/login.html

@@ -101,6 +101,7 @@
       if(enable) {
         $submitButton.
           removeClass('is-disabled').
+          attr('aria-disabled', false).
           removeProp('disabled').
           html("${_('Log into My {platform_name} Account').format(platform_name=platform_name)} <span class='orn-plus'>+</span> ${_('Access My Courses')}");
       }

lms/templates/register-shib.html

@@ -71,12 +71,14 @@
       if(enable) {
         $submitButton.
           removeClass('is-disabled').
+          attr('aria-disabled', false).
           removeProp('disabled').
           text("${_('Update my {platform_name} Account').format(platform_name=settings.PLATFORM_NAME)}");
       }
       else {
         $submitButton.
           addClass('is-disabled').
+          attr('aria-disabled', true).
           prop('disabled', true).
           text("${_(u'Processing your account information …')}");
       }

lms/templates/register.html

@@ -80,6 +80,7 @@
       if(enable) {
         $submitButton.
           removeClass('is-disabled').
+          attr('aria-disabled', false).
           removeProp('disabled').
           html("${_('Create My {platform_name} Account').format(platform_name=platform_name)}");
       }

lms/templates/verify_student/face_photo_step.underscore

@@ -45,7 +45,7 @@
 
     <% if ( nextStepTitle ) { %>
     <nav class="nav-wizard" id="face_next_button_nav">
-      <a id="next_step_button" class="next action-primary is-disabled right" aria-hidden="true" title="Next">
+      <a id="next_step_button" class="next action-primary is-disabled right" aria-hidden="true" aria-disabled="true" title="Next">
         <%- _.sprintf(
           gettext( "Next: %(nextStepTitle)s" ),
           { nextStepTitle: nextStepTitle }

lms/templates/verify_student/make_payment_step.underscore

@@ -163,15 +163,15 @@
 
   <nav class="nav-wizard is-ready <% if ( isActive && !upgrade ) { %>center<% } %>">
     <% if ( upgrade ) { %>
-        <a class="next action-primary is-disabled right" id="pay_button">
+        <a class="next action-primary is-disabled right" id="pay_button" aria-disabled="true">
           <%- gettext( "Next: Make payment" ) %>
         </a>
     <% } else if ( isActive ) { %>
-        <a class="next action-primary is-disabled" id="pay_button">
+        <a class="next action-primary is-disabled" id="pay_button" aria-disabled="true">
           <%- gettext( "Continue to payment" ) %>
         </a>
     <% } else { %>
-        <a class="next action-primary is-disabled" id="activate_button">
+        <a class="next action-primary is-disabled" id="activate_button" aria-disabled="true">
           <%- gettext( "Activate your account" ) %>
         </a>
     <% } %>

lms/templates/verify_student/review_photos_step.underscore

@@ -64,7 +64,7 @@
 
       <ol class="wizard-steps">
         <li class="wizard-step step-proceed">
-          <a id="next_step_button" class="next action-primary right" aria-hidden="true" title="Confirmation">
+          <a id="next_step_button" class="next action-primary right" aria-hidden="true" aria-disabled="true" title="Confirmation">
             <%- gettext( "Confirm" ) %>
           </a>
         </li>

lms/templates/verify_student/verified.html

@@ -12,7 +12,7 @@
 <script type="text/javascript">
 var submitToPaymentProcessing = function(event) {
     event.preventDefault();
-    $("#pay_button").addClass("is-disabled");
+    $("#pay_button").addClass("is-disabled").attr('aria-disabled', true);
     var xhr = $.post(
       "${create_order_url}",
       {
@@ -32,7 +32,7 @@ var submitToPaymentProcessing = function(event) {
       $("#pay_form").submit();
     })
     .fail(function(jqXhr,text_status, error_thrown) {
-      $("#pay_button").removeClass("is-disabled");
+      $("#pay_button").removeClass("is-disabled").attr('aria-disabled', false);
       alert(jqXhr.responseText); });
 }
 $(document).ready(function() {