From cf6cfad3a6db01b63a5f912da3c9d9ce8696646a Mon Sep 17 00:00:00 2001
From: Patrick Cartlidge <patrickcartlidge@gmail.com>
Date: Wed, 15 Jan 2025 15:02:20 +0000
Subject: [PATCH] try using role button

---
 .../govuk/components/file-upload/_index.scss  | 18 ++++++++
 .../components/file-upload/file-upload.mjs    | 42 ++-----------------
 2 files changed, 22 insertions(+), 38 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
index 309ea05fd5..b51165b519 100644
--- a/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
@@ -97,3 +97,21 @@
     margin-left: govuk-spacing(2);
   }
 }
+
+.govuk-file-upload:focus + .govuk-button {
+  background-color: $govuk-focus-colour;
+}
+
+.govuk-file-upload:disabled + .govuk-button {
+  opacity: (0.5);
+
+  &:hover {
+    background-color: govuk-colour("light-grey");
+    cursor: not-allowed;
+  }
+
+  &:active {
+    top: 0;
+    box-shadow: 0 $govuk-border-width-form-element 0 govuk-shade(govuk-colour("white"), 60%); // s0
+  }
+}
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
index d4d5c0f147..44a60e9dd6 100644
--- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs
+++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs
@@ -57,18 +57,19 @@ export class FileUpload extends ConfigurableComponent {
     $wrapper.className = 'govuk-file-upload-wrapper'
 
     // Create the file selection button
-    const $button = document.createElement('button')
+    const $button = document.createElement('span')
     $button.className =
       'govuk-button govuk-button--secondary govuk-file-upload__button'
-    $button.type = 'button'
     $button.innerText = this.i18n.t('selectFilesButton')
+    $button.setAttribute('role', 'button')
+    $button.setAttribute('aria-hidden', 'true')
     $button.addEventListener('click', this.onClick.bind(this))
 
     // 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('role', 'status')
+    $status.setAttribute('aria-hidden', 'true')
 
     // Assemble these all together
     $wrapper.insertAdjacentElement('beforeend', $button)
@@ -85,13 +86,6 @@ export class FileUpload extends ConfigurableComponent {
     this.$button = $button
     this.$status = $status
 
-    // Prevent the hidden input being tabbed to by keyboard users
-    this.$root.setAttribute('tabindex', '-1')
-
-    // Syncronise the `disabled` state between the button and underlying input
-    this.updateDisabledState()
-    this.observeDisabledState()
-
     // Bind change event to the underlying input
     this.$root.addEventListener('change', this.onChange.bind(this))
 
@@ -175,34 +169,6 @@ export class FileUpload extends ConfigurableComponent {
     this.$wrapper.classList.remove('govuk-file-upload-wrapper--show-dropzone')
   }
 
-  /**
-   * Create a mutation observer to check if the input's attributes altered.
-   */
-  observeDisabledState() {
-    const observer = new MutationObserver((mutationList) => {
-      for (const mutation of mutationList) {
-        console.log('mutation', mutation)
-        if (
-          mutation.type === 'attributes' &&
-          mutation.attributeName === 'disabled'
-        ) {
-          this.updateDisabledState()
-        }
-      }
-    })
-
-    observer.observe(this.$root, {
-      attributes: true
-    })
-  }
-
-  /**
-   * Synchronise the `disabled` state between the input and replacement button.
-   */
-  updateDisabledState() {
-    this.$button.disabled = this.$root.disabled
-  }
-
   /**
    * Name for the component used when initialising using data-module attributes.
    */