diff --git a/app/assets/javascripts/fileUpload.js b/app/assets/javascripts/fileUpload.js
index ea6c7ac62..4b49bf06e 100644
--- a/app/assets/javascripts/fileUpload.js
+++ b/app/assets/javascripts/fileUpload.js
@@ -5,9 +5,21 @@
this.submit = () => this.$form.trigger('submit');
- this.showCancelButton = () => $('.file-upload-button', this.$form).replaceWith(`
- Cancel upload
- `);
+ this.showCancelButton = () => {
+ $('.file-upload-button', this.$form).replaceWith(`
+
+ `);
+
+ // Screen reader live region
+ const $srStatus = $('#upload-status-live');
+ if ($srStatus.length) {
+ $srStatus.text('File is uploading');
+ } else {
+ this.$form.prepend(`File is uploading`);
+ }
+ };
this.start = function(component) {
@@ -17,7 +29,7 @@
// users see a button that looks like the others on the site.
this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1').attr( {role: 'button', tabindex: '0'} );
-
+
// Clear the form if the user navigates back to the page
$(window).on("pageshow", () => this.$form[0].reset());
diff --git a/app/assets/sass/uswds/_legacy-styles.scss b/app/assets/sass/uswds/_main.scss
similarity index 96%
rename from app/assets/sass/uswds/_legacy-styles.scss
rename to app/assets/sass/uswds/_main.scss
index 4af2cc6f6..db6b166ff 100644
--- a/app/assets/sass/uswds/_legacy-styles.scss
+++ b/app/assets/sass/uswds/_main.scss
@@ -344,3 +344,17 @@ h2.recipient-list {
}
}
}
+
+// Button ellipses loading
+
+.dot-anim::after {
+ content: '.';
+ animation: dotPulse 1.5s steps(3, end) infinite;
+}
+
+@keyframes dotPulse {
+ 0% { content: ''; }
+ 33% { content: '.'; }
+ 66% { content: '..'; }
+ 100% { content: '...'; }
+}
diff --git a/app/assets/sass/uswds/styles.scss b/app/assets/sass/uswds/styles.scss
index 304e2f346..ce6adcbbb 100644
--- a/app/assets/sass/uswds/styles.scss
+++ b/app/assets/sass/uswds/styles.scss
@@ -1,5 +1,5 @@
@forward "uswds-theme";
@forward "uswds";
@forward "uswds-theme-custom-styles";
-@forward "legacy-styles";
+@forward "main";
@forward "data-visualization";
diff --git a/tests/javascripts/fileUpload.test.js b/tests/javascripts/fileUpload.test.js
index 224a9ea16..29c8b711e 100644
--- a/tests/javascripts/fileUpload.test.js
+++ b/tests/javascripts/fileUpload.test.js
@@ -72,10 +72,11 @@ describe('File upload', () => {
});
- test("It should add a link to cancel the upload by reloading the page", () => {
-
- expect(form.querySelector("a[href='']")).not.toBeNull();
-
+ test("It should display a disabled Uploading button", () => {
+ const uploadingButton = form.querySelector("button.uploading-button");
+ expect(uploadingButton).not.toBeNull();
+ expect(uploadingButton.textContent).toMatch(/Uploading/);
+ expect(uploadingButton.getAttribute('aria-disabled')).toBe("true");
});
});