Update button creation of file upload

Button creation of file upload needs to be changed in line with the new design. Includes new `instruction span` which has been added to the i18n configuration.
alphagov · Jan 28, 2025 · d8f48a6 · d8f48a6
1 parent 69c7891
commit d8f48a6
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 22 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs
@@ -72,6 +72,10 @@ export class FileUpload extends ConfigurableComponent {
     const $wrapper = document.createElement('div')
     $wrapper.className = 'govuk-file-upload-wrapper'
 
+    const commaSpan = document.createElement('span')
+    commaSpan.className = 'govuk-visually-hidden'
+    commaSpan.innerText = ', '
+
     // Create the file selection button
     const $button = document.createElement('button')
     $button.classList.add('govuk-file-upload__button')
@@ -85,26 +89,40 @@ export class FileUpload extends ConfigurableComponent {
       $button.setAttribute('aria-describedby', ariaDescribedBy)
     }
 
+    // Create status element that shows what/how many files are selected
+    const $status = document.createElement('span')
+    $status.className = 'govuk-body govuk-file-upload__status'
+    $status.innerText = this.i18n.t('filesSelectedDefault')
+    $status.setAttribute('aria-hidden', 'true')
+    $status.classList.add('govuk-file-upload__status--empty')
+
+    $button.appendChild($status)
+    $button.appendChild(commaSpan.cloneNode(true))
+
+    const buttonParentSpan = document.createElement('span')
+    buttonParentSpan.className = 'govuk-file-upload__pseudo-button-container'
+
     const buttonSpan = document.createElement('span')
     buttonSpan.className =
       'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button'
     buttonSpan.innerText = this.i18n.t('selectFilesButton')
     buttonSpan.setAttribute('aria-hidden', 'true')
 
-    $button.appendChild(buttonSpan)
-    $button.addEventListener('click', this.onClick.bind(this))
+    buttonParentSpan.appendChild(buttonSpan)
+    buttonParentSpan.appendChild(commaSpan.cloneNode(true))
 
-    // Create status element that shows what/how many files are selected
-    const $status = document.createElement('span')
-    $status.className = 'govuk-body govuk-file-upload__status'
-    $status.innerText = this.i18n.t('filesSelectedDefault')
-    $status.setAttribute('aria-hidden', 'true')
+    const instructionSpan = document.createElement('span')
+    instructionSpan.className = 'govuk-body govuk-file-upload__instruction'
+    instructionSpan.innerText = this.i18n.t('instruction')
 
-    $button.appendChild($status)
+    buttonParentSpan.appendChild(instructionSpan)
+
+    $button.appendChild(buttonParentSpan)
     $button.setAttribute(
       'aria-label',
-      `${this.$label.innerText}, ${this.i18n.t('selectFilesButton')}, ${this.i18n.t('filesSelectedDefault')}`
+      `${this.$label.innerText}, ${this.i18n.t('selectFilesButton')} ${this.i18n.t('instruction')}, ${$status.innerText}`
     )
+    $button.addEventListener('click', this.onClick.bind(this))
 
     // Assemble these all together
     $wrapper.insertAdjacentElement('beforeend', $button)
@@ -240,21 +258,26 @@ export class FileUpload extends ConfigurableComponent {
     if (fileCount === 0) {
       // If there are no files, show the default selection text
       this.$status.innerText = this.i18n.t('filesSelectedDefault')
-    } else if (
-      // If there is 1 file, just show the file name
-      fileCount === 1
-    ) {
-      this.$status.innerText = this.$root.files[0].name
+      this.$status.classList.add('govuk-tag--light-blue')
     } else {
-      // Otherwise, tell the user how many files are selected
-      this.$status.innerText = this.i18n.t('filesSelected', {
-        count: fileCount
-      })
+      if (
+        // If there is 1 file, just show the file name
+        fileCount === 1
+      ) {
+        this.$status.innerText = this.$root.files[0].name
+      } else {
+        // Otherwise, tell the user how many files are selected
+        this.$status.innerText = this.i18n.t('filesSelected', {
+          count: fileCount
+        })
+      }
+
+      this.$status.classList.remove('govuk-file-upload__status--empty')
     }
 
     this.$button.setAttribute(
       'aria-label',
-      `${this.$label.innerText}, ${this.i18n.t('selectFilesButton')}, ${this.$status.innerText}`
+      `${this.$label.innerText}, ${this.i18n.t('selectFilesButton')} ${this.i18n.t('instruction')}, ${this.$status.innerText}`
     )
   }
 
@@ -337,7 +360,8 @@ export class FileUpload extends ConfigurableComponent {
         other: '%{count} files chosen'
       },
       dropZoneEntered: 'Entered drop zone',
-      dropZoneLeft: 'Left drop zone'
+      dropZoneLeft: 'Left drop zone',
+      instruction: 'or drop file'
     }
   })
 

diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js
@@ -111,7 +111,7 @@ describe('/components/file-upload', () => {
             expect(buttonElementText).toBe('Choose file')
             expect(statusElementText).toBe('No file chosen')
             expect(buttonAriaText).toBe(
-              'Upload a file, Choose file, No file chosen'
+              'Upload a file, Choose file or drop file, No file chosen'
             )
           })
         })
@@ -364,7 +364,7 @@ describe('/components/file-upload', () => {
           expect(buttonElementText).toBe('Dewiswch ffeil')
           expect(statusElementText).toBe("Dim ffeiliau wedi'u dewis")
           expect(buttonAriaText).toBe(
-            "Llwythwch ffeil i fyny, Dewiswch ffeil, Dim ffeiliau wedi'u dewis"
+            "Llwythwch ffeil i fyny, Dewiswch ffeil neu ollwng ffeil, Dim ffeiliau wedi'u dewis"
           )
         })
 

diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
@@ -81,6 +81,10 @@ params:
     type: string
     required: false
     description: The text of the button that opens the file picker. JavaScript enhanced version of the component only. Default is "Choose file".
+  - name: instructionText
+    type: string
+    required: false
+    description: The text of the instruction text that follows the button that opens the file picker. JavaScript enhanced version of the component only. Default is "or drop file".
   - name: filesSelected
     type: object
     required: false
@@ -178,6 +182,7 @@ examples:
         text: Llwythwch ffeil i fyny
       multiple: true
       selectFilesButtonText: Dewiswch ffeil
+      instructionText: neu ollwng ffeil
       filesSelectedDefaultText: Dim ffeiliau wedi'u dewis
       filesSelectedText:
         other: "%{count} ffeil wedi'u dewis"

diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk
@@ -60,6 +60,10 @@
     key: 'files-selected',
     messages: params.filesSelectedText
   }) -}}
+  {{- govukI18nAttributes({
+    key: 'instruction',
+    message: params.instructionText
+  }) -}}
   {{- govukAttributes(params.attributes) }}>
 {% if params.formGroup.afterInput %}
   {{ params.formGroup.afterInput.html | safe | trim | indent(2) if params.formGroup.afterInput.html else params.formGroup.afterInput.text }}