Merge pull request #5719 from alphagov/add-back-border

File Upload `disabled` clean-up
alphagov · Feb 13, 2025 · 85e94b6 · 85e94b6
2 parents 89524cf + 7e06c98
commit 85e94b6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
@@ -178,6 +178,9 @@
   }
 
   .govuk-file-upload-button--dragging {
+    border-style: solid;
+    border-color: govuk-colour("black");
+
     // extra specificity to apply when
     // empty
     &.govuk-file-upload-button {
@@ -188,17 +191,13 @@
       background-color: govuk-colour("light-grey");
     }
 
-    &:not(:disabled) {
-      border-color: govuk-shade(govuk-colour("mid-grey"), 20%);
-
-      .govuk-file-upload-button__pseudo-button {
-        background-color: govuk-shade(govuk-colour("light-grey"), 10%);
-      }
-    }
-
     &.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status,
     &.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button {
       background-color: govuk-colour("white");
     }
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+    }
   }
 }
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
@@ -206,7 +206,7 @@ export class FileUpload extends ConfigurableComponent {
     })
 
     document.addEventListener('dragleave', () => {
-      if (!this.enteredAnotherElement) {
+      if (!this.enteredAnotherElement && !this.$button.disabled) {
         this.hideDraggingState()
         this.$announcements.innerText = this.i18n.t('leftDropZone')
       }
@@ -221,6 +221,8 @@ export class FileUpload extends ConfigurableComponent {
    * @param {DragEvent} event - The `dragenter` event
    */
   updateDropzoneVisibility(event) {
+    if (this.$button.disabled) return
+
     // DOM interfaces only type `event.target` as `EventTarget`
     // so we first need to make sure it's a `Node`
     if (event.target instanceof Node) {

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
@@ -349,6 +349,30 @@ describe('/components/file-upload', () => {
             $announcements.evaluate((e) => e.textContent)
           ).resolves.toBe('Left drop zone')
         })
+
+        it('does not appear if button disabled', async () => {
+          await render(page, 'file-upload', examples.enhanced, {
+            beforeInitialisation() {
+              document
+                .querySelector('[type="file"]')
+                .setAttribute('disabled', '')
+            }
+          })
+
+          await page.mouse.dragEnter(
+            { x: wrapperBoundingBox.x + 1, y: wrapperBoundingBox.y + 1 },
+            structuredClone(dragData)
+          )
+
+          const disabledAnnouncement = await page.$(
+            '.govuk-file-upload-announcements'
+          )
+
+          await expect(page.$(selectorDropzoneHidden)).resolves.toBeTruthy()
+          await expect(
+            disabledAnnouncement.evaluate((e) => e.textContent)
+          ).resolves.toBe('')
+        })
       })
 
       describe('accessible name', () => {