diff --git a/app/assets/javascripts/fileUpload.js b/app/assets/javascripts/fileUpload.js
index e03dc906d..19c53b971 100644
--- a/app/assets/javascripts/fileUpload.js
+++ b/app/assets/javascripts/fileUpload.js
@@ -10,11 +10,13 @@ function announceUploadStatusFromElement() {
if (message) {
srRegion.textContent = '';
setTimeout(() => {
- srRegion.textContent = message;
- }, 50);
+ srRegion.textContent = message + '\u00A0'; // add a non-breaking space
+ srRegion.focus(); // Optional
+ }, 300);
}
}
+
// Exported for use in tests
function initUploadStatusAnnouncer() {
document.addEventListener('DOMContentLoaded', () => {
diff --git a/app/templates/base.html b/app/templates/base.html
index aeec8b6e9..c5ee1ab42 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -14,6 +14,7 @@
diff --git a/tests/javascripts/fileUpload.domLoad.test.js b/tests/javascripts/fileUpload.domLoad.test.js
index 1fb641a8c..07886bd61 100644
--- a/tests/javascripts/fileUpload.domLoad.test.js
+++ b/tests/javascripts/fileUpload.domLoad.test.js
@@ -19,8 +19,8 @@ test('writes upload message to the live region on DOMContentLoaded', () => {
document.dispatchEvent(new Event('DOMContentLoaded'));
// Live region will be cleared first, then updated
- jest.advanceTimersByTime(50);
+ jest.advanceTimersByTime(300);
const srRegion = document.getElementById('upload-status-live');
- expect(srRegion.textContent).toBe('File upload successful');
+ expect(srRegion.textContent).toBe('File upload successful\u00A0');
});
diff --git a/tests/javascripts/fileUpload.test.js b/tests/javascripts/fileUpload.test.js
index e45c45e7a..9e99bde63 100644
--- a/tests/javascripts/fileUpload.test.js
+++ b/tests/javascripts/fileUpload.test.js
@@ -146,10 +146,10 @@ describe('announceUploadStatusFromElement', () => {
expect(srRegion.textContent).toBe('');
// Fast-forward the timer
- jest.advanceTimersByTime(50);
+ jest.advanceTimersByTime(300);
// Confirm it updates after delay
- expect(srRegion.textContent).toBe('File upload failed');
+ expect(srRegion.textContent).toBe('File upload failed\u00A0');
});
test('announces success message from #upload-success if no error is present', () => {
@@ -163,9 +163,9 @@ describe('announceUploadStatusFromElement', () => {
expect(srRegion.textContent).toBe('');
- jest.advanceTimersByTime(50);
+ jest.advanceTimersByTime(301);
- expect(srRegion.textContent).toBe('File upload successful');
+ expect(srRegion.textContent).toBe('File upload successful\u00A0');
});
test('does nothing if neither success nor error is present', () => {
@@ -178,7 +178,7 @@ describe('announceUploadStatusFromElement', () => {
// Should not clear or update if no message element is found
expect(srRegion.textContent).toBe('Old message');
- jest.advanceTimersByTime(50);
+ jest.advanceTimersByTime(300);
// Still unchanged
expect(srRegion.textContent).toBe('Old message');