From 02392879b72cc12664b82dec1b0e5198ecf9957f Mon Sep 17 00:00:00 2001 From: Nathan Sprenkle Date: Mon, 30 Mar 2020 17:03:15 -0400 Subject: [PATCH] Team Management Upload A11y Improvements (#23502) * Expose team management file input for better a11y * Disable upload button when file not selected --- .../static/teams/js/spec/views/manage_spec.js | 17 ++++------ .../teams/static/teams/js/views/manage.js | 34 +++++++++++-------- .../static/teams/templates/manage.underscore | 19 ++++++----- lms/static/sass/views/_teams.scss | 26 ++++++-------- 4 files changed, 49 insertions(+), 47 deletions(-) diff --git a/lms/djangoapps/teams/static/teams/js/spec/views/manage_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/manage_spec.js index a18f5859b0..49d9cd4785 100644 --- a/lms/djangoapps/teams/static/teams/js/spec/views/manage_spec.js +++ b/lms/djangoapps/teams/static/teams/js/spec/views/manage_spec.js @@ -11,7 +11,7 @@ define([ describe('Team Management Dashboard', function() { var view; var uploadFile = new File([], 'empty-test-file.csv'); - var mockUploadClickEvent = {target: {files: [uploadFile]}}; + var mockFileSelectEvent = {target: {files: [uploadFile]}}; beforeEach(function() { setFixtures('
'); @@ -24,13 +24,14 @@ define([ }); it('can render itself', function() { - expect(_.strip(view.$('.download-team-csv').text())).toEqual('Download Memberships'); - expect(_.strip(view.$('.upload-team-csv').text())).toEqual('Upload Memberships'); + expect(_.strip(view.$('#download-team-csv').text())).toEqual('Download Memberships'); + expect(_.strip(view.$('#upload-team-csv').text())).toEqual('Upload Memberships'); }); it('can handle a successful file upload', function() { var requests = AjaxHelpers.requests(this); - view.uploadCsv(mockUploadClickEvent); + view.setTeamMembershipCsv(mockFileSelectEvent); + view.uploadCsv(); AjaxHelpers.expectRequest(requests, 'POST', view.csvUploadUrl); AjaxHelpers.respondWithJson(requests, {}); expect(view.handleCsvUploadSuccess).toHaveBeenCalled(); @@ -38,15 +39,11 @@ define([ it('can handle a failed file upload', function() { var requests = AjaxHelpers.requests(this); - view.uploadCsv(mockUploadClickEvent); + view.setTeamMembershipCsv(mockFileSelectEvent); + view.uploadCsv(); AjaxHelpers.expectRequest(requests, 'POST', view.csvUploadUrl); AjaxHelpers.respondWithError(requests); expect(view.handleCsvUploadFailure).toHaveBeenCalled(); }); - - it('should clear input file after upload to allow reuploading', function() { - view.uploadCsv(mockUploadClickEvent); - expect(view.$('#upload-team-csv-input').prop('value')).toEqual(''); - }); }); }); diff --git a/lms/djangoapps/teams/static/teams/js/views/manage.js b/lms/djangoapps/teams/static/teams/js/views/manage.js index f319d8e76a..6c3903217b 100644 --- a/lms/djangoapps/teams/static/teams/js/views/manage.js +++ b/lms/djangoapps/teams/static/teams/js/views/manage.js @@ -17,8 +17,9 @@ }, events: { - 'click #download-team-csv-input': 'downloadCsv', - 'change #upload-team-csv-input': ViewUtils.withDisabledElement('uploadCsv') + 'click #download-team-csv': 'downloadCsv', + 'change #upload-team-csv-input': 'setTeamMembershipCsv', + 'click #upload-team-csv': ViewUtils.withDisabledElement('uploadCsv') }, initialize: function(options) { @@ -39,33 +40,38 @@ window.location.href = this.csvDownloadUrl; }, - uploadCsv: function(event) { - var file = event.target.files[0]; - var self = this; + setTeamMembershipCsv: function(event) { + this.membershipFile = event.target.files[0]; + + // enable the upload button when a file is selected + if (this.membershipFile) { + $('#upload-team-csv').removeClass('is-disabled').attr('aria-disabled', false); + } else { + $('#upload-team-csv').addClass('is-disabled').attr('aria-disabled', true); + } + }, + + uploadCsv: function() { var formData = new FormData(); + formData.append('csv', this.membershipFile); // xss-lint: disable=javascript-jquery-append - // clear selected file to allow re-uploading - $(event.target).prop('value', ''); - - formData.append('csv', file); // xss-lint: disable=javascript-jquery-append return $.ajax({ type: 'POST', - url: self.csvUploadUrl, + url: this.csvUploadUrl, data: formData, processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType }).done( - self.handleCsvUploadSuccess + this.handleCsvUploadSuccess ).fail( - self.handleCsvUploadFailure + this.handleCsvUploadFailure ); }, handleCsvUploadSuccess: function(data) { TeamUtils.showInfoBanner(data.message, false); - // This handler is currently unimplemented (TODO MST-44) - this.teamEvents.trigger('teams:update', {}); + // Implement a teams:update event (TODO MST-44) }, handleCsvUploadFailure: function(jqXHR) { diff --git a/lms/djangoapps/teams/static/teams/templates/manage.underscore b/lms/djangoapps/teams/static/teams/templates/manage.underscore index 8dd1b32dd1..373ea054c8 100644 --- a/lms/djangoapps/teams/static/teams/templates/manage.underscore +++ b/lms/djangoapps/teams/static/teams/templates/manage.underscore @@ -11,7 +11,7 @@ ) %>

diff --git a/lms/static/sass/views/_teams.scss b/lms/static/sass/views/_teams.scss index 7526e8ee25..5b48b13d4b 100644 --- a/lms/static/sass/views/_teams.scss +++ b/lms/static/sass/views/_teams.scss @@ -356,26 +356,21 @@ .team-management { padding: 1%; - h3, p, .action, .team-management-section { - margin-bottom: 2%; + h3, + p, + .action, + .team-management-section, + input { + margin-bottom: 2%; } - .input-overlay-hack { - position: absolute; - height: 100%; - width: 100%; - opacity: 0; - top: 0; - left: 0; - cursor: pointer; - } - - .upload-team-csv { - position: relative; + #upload-team-csv { + display: block; } } - .team-profile, .team-management { + .team-profile, + .team-management { .page-content-main { display: inline-block; width: flex-grid(8, 12); @@ -554,6 +549,7 @@ border: inherit; box-shadow: none; } + display: inline-block; text-shadow: none; }