diff --git a/app/assets/javascripts/fileUpload.js b/app/assets/javascripts/fileUpload.js index ea6c7ac62..19c53b971 100644 --- a/app/assets/javascripts/fileUpload.js +++ b/app/assets/javascripts/fileUpload.js @@ -1,34 +1,69 @@ +function announceUploadStatusFromElement() { + const srRegion = document.getElementById('upload-status-live'); + const success = document.getElementById('upload-success'); + const error = document.getElementById('upload-error'); + + if (!srRegion) return; + + const message = error?.textContent || success?.textContent; + + if (message) { + srRegion.textContent = ''; + setTimeout(() => { + srRegion.textContent = message + '\u00A0'; // add a non-breaking space + srRegion.focus(); // Optional + }, 300); + } +} + + +// Exported for use in tests +function initUploadStatusAnnouncer() { + document.addEventListener('DOMContentLoaded', () => { + announceUploadStatusFromElement(); + }); +} + (function(Modules) { "use strict"; Modules.FileUpload = function() { - this.submit = () => this.$form.trigger('submit'); - this.showCancelButton = () => $('.file-upload-button', this.$form).replaceWith(` - Cancel upload - `); - - this.start = function(component) { - - this.$form = $(component); - - // The label gets styled like a button and is used to hide the native file upload control. This is so that - // 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()); - - // Need to put the event on the container, not the input for it to work properly - this.$form.on( - 'change', '.file-upload-field', - () => this.submit() && this.showCancelButton() - ); - + this.showCancelButton = () => { + $('.file-upload-button', this.$form).replaceWith(` + + `); }; - }; + this.start = function(component) { + this.$form = $(component); + this.$form.on('click', '[data-module="upload-trigger"]', function () { + const inputId = $(this).data('file-input-id'); + const fileInput = document.getElementById(inputId); + if (fileInput) fileInput.click(); + }); + + $(window).on("pageshow", () => this.$form[0].reset()); + + this.$form.on('change', '.file-upload-field', () => { + this.submit(); + this.showCancelButton(); + }); + }; + }; })(window.GOVUK.Modules); + +if (typeof module !== 'undefined' && module.exports) { + module.exports = { + announceUploadStatusFromElement, + initUploadStatusAnnouncer + }; +} + +if (typeof window !== 'undefined') { + initUploadStatusAnnouncer(); +} diff --git a/app/assets/javascripts/fullscreenTable.js b/app/assets/javascripts/fullscreenTable.js index cef792052..d4062e71c 100644 --- a/app/assets/javascripts/fullscreenTable.js +++ b/app/assets/javascripts/fullscreenTable.js @@ -22,7 +22,6 @@ this.$scrollableTable .on('scroll', this.toggleShadows) .on('scroll', this.maintainHeight) - .on('focus blur', () => this.$component.toggleClass('js-focus-style')); if ( window.GOVUK.stickAtBottomWhenScrolling && @@ -37,11 +36,11 @@ this.insertShims = () => { - const attributesForFocus = 'role aria-labelledby tabindex'; + const attributesForFocus = 'role aria-labelledby'; let captionId = this.$table.find('caption').text().toLowerCase().replace(/[^A-Za-z]+/g, ''); this.$table.find('caption').attr('id', captionId); - this.$table.wrap(`
`); + this.$table.wrap(`
`); this.$component .append( 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 71fc58e4f..983a72c8c 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/app/templates/base.html b/app/templates/base.html index 80a0afc7f..c75fae406 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -11,6 +11,12 @@ {% include "components/head.html" %} +
+
{% block bodyStart %} {% block extra_javascripts_before_body %} diff --git a/app/templates/components/banner.html b/app/templates/components/banner.html index 5ea9383d9..ccbc24225 100644 --- a/app/templates/components/banner.html +++ b/app/templates/components/banner.html @@ -4,10 +4,6 @@ {% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None, context=None, action=None, id=None, thing=None) %}
{{ field(**{ 'class': 'file-upload-field', + 'id': field.name, 'accept': allowed_file_extensions|format_list_items('.{item}')|join(',')|e }) }} - + {% if alternate_link and alternate_link_text %} or {{ alternate_link_text }} {% endif %} - + {{ usaButton({ "text": "Submit", "classes": "file-upload-submit" }) }} diff --git a/app/templates/views/check/column-errors.html b/app/templates/views/check/column-errors.html index bcb518892..0fa479c3f 100644 --- a/app/templates/views/check/column-errors.html +++ b/app/templates/views/check/column-errors.html @@ -20,7 +20,11 @@ Error {% block maincolumn_content %} + +
+ {# Alert for users of AT #} + File upload failed {% call banner_wrapper(type='dangerous') %} {% if recipients.too_many_rows %} @@ -150,7 +154,7 @@ Error ) }} {% endif %}
- Back to top + Back to top
{% endif %} diff --git a/app/templates/views/check/ok.html b/app/templates/views/check/ok.html index 71324b724..58e31a06a 100644 --- a/app/templates/views/check/ok.html +++ b/app/templates/views/check/ok.html @@ -21,6 +21,8 @@ {{ template|string }}
+ {# Alert for users of AT #} + File uploaded successfully
{% if choose_time_form %} diff --git a/app/templates/views/check/row-errors.html b/app/templates/views/check/row-errors.html index 9d9a2edc1..e9877dcc3 100644 --- a/app/templates/views/check/row-errors.html +++ b/app/templates/views/check/row-errors.html @@ -16,6 +16,8 @@ {% block maincolumn_content %}
+ {# Alert for users of AT #} + File upload failed {% call banner_wrapper(type='dangerous') %} {% if row_errors|length == 1 %} +

A spreadsheet is available to use

{% call(item, row_number) list_table( example, - caption="Example", + caption="Example spreadsheet", caption_visible=False, field_headings=[''] + column_headings ) %} diff --git a/tests/javascripts/fileUpload.domLoad.test.js b/tests/javascripts/fileUpload.domLoad.test.js new file mode 100644 index 000000000..07886bd61 --- /dev/null +++ b/tests/javascripts/fileUpload.domLoad.test.js @@ -0,0 +1,26 @@ +// This will use the real function and listener +const { + initUploadStatusAnnouncer +} = require('../../app/assets/javascripts/fileUpload.js'); + +jest.useFakeTimers(); + +test('writes upload message to the live region on DOMContentLoaded', () => { + // Setup the DOM + document.body.innerHTML = ` +
Old message
+ File upload successful + `; + + // Register the listener (same as page load does) + initUploadStatusAnnouncer(); + + // Simulate the page load event + document.dispatchEvent(new Event('DOMContentLoaded')); + + // Live region will be cleared first, then updated + jest.advanceTimersByTime(300); + + const srRegion = document.getElementById('upload-status-live'); + expect(srRegion.textContent).toBe('File upload successful\u00A0'); +}); diff --git a/tests/javascripts/fileUpload.test.js b/tests/javascripts/fileUpload.test.js index 224a9ea16..9e99bde63 100644 --- a/tests/javascripts/fileUpload.test.js +++ b/tests/javascripts/fileUpload.test.js @@ -1,13 +1,12 @@ const helpers = require('./support/helpers.js'); -beforeAll(() => { - require('../../app/assets/javascripts/fileUpload.js'); -}); +const { announceUploadStatusFromElement } = require('../../app/assets/javascripts/fileUpload.js'); afterAll(() => { require('./support/teardown.js'); }); + describe('File upload', () => { let form; @@ -72,12 +71,116 @@ 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"); }); }); }); + +describe('File upload "upload-trigger" click handler', () => { + let form; + + beforeEach(() => { + document.body.innerHTML = ` + + + + + `; + + form = document.querySelector('form'); + + // Register the module + window.GOVUK.modules.start(); + }); + + afterEach(() => { + document.body.innerHTML = ''; + }); + + test('clicking upload trigger simulates file input click', () => { + const uploadButton = form.querySelector('[data-module="upload-trigger"]'); + const fileInput = document.getElementById('test-file-input'); + + // Spy on fileInput.click + const clickSpy = jest.spyOn(fileInput, 'click').mockImplementation(() => {}); + + // Trigger the click + helpers.triggerEvent(uploadButton, 'click'); + + expect(clickSpy).toHaveBeenCalled(); + + clickSpy.mockRestore(); + }); +}); + +describe('announceUploadStatusFromElement', () => { + beforeEach(() => { + jest.useFakeTimers(); + document.body.innerHTML = ` +
+ `; + }); + + afterEach(() => { + jest.useRealTimers(); + document.body.innerHTML = ''; + }); + + test('announces error message from #upload-error', () => { + document.body.innerHTML += ` + File upload failed + `; + + const srRegion = document.getElementById('upload-status-live'); + + // Call the function + announceUploadStatusFromElement(); + + // Confirm it clears first + expect(srRegion.textContent).toBe(''); + + // Fast-forward the timer + jest.advanceTimersByTime(300); + + // Confirm it updates after delay + expect(srRegion.textContent).toBe('File upload failed\u00A0'); + }); + + test('announces success message from #upload-success if no error is present', () => { + document.body.innerHTML += ` + File upload successful + `; + + const srRegion = document.getElementById('upload-status-live'); + + announceUploadStatusFromElement(); + + expect(srRegion.textContent).toBe(''); + + jest.advanceTimersByTime(301); + + expect(srRegion.textContent).toBe('File upload successful\u00A0'); + }); + + test('does nothing if neither success nor error is present', () => { + const srRegion = document.getElementById('upload-status-live'); + + srRegion.textContent = 'Old message'; + + announceUploadStatusFromElement(); + + // Should not clear or update if no message element is found + expect(srRegion.textContent).toBe('Old message'); + + jest.advanceTimersByTime(300); + + // Still unchanged + expect(srRegion.textContent).toBe('Old message'); + }); +}); diff --git a/tests/javascripts/fullscreenTable.test.js b/tests/javascripts/fullscreenTable.test.js index c8d89d962..ef1013a1f 100644 --- a/tests/javascripts/fullscreenTable.test.js +++ b/tests/javascripts/fullscreenTable.test.js @@ -347,24 +347,4 @@ describe('FullscreenTable', () => { }); - describe("when the table is focused", () => { - - beforeEach(() => { - - // start module - window.GOVUK.modules.start(); - - tableFrame = document.querySelector('.fullscreen-scrollable-table'); - tableFrame.focus(); - - }); - - test("it should make the parent frame a focus style", () => { - - expect(container.classList.contains('js-focus-style')).toBe(true); - - }); - - }); - });