From baaf4f7218071036f7b6c6a77cc3428fbc9b1a5d Mon Sep 17 00:00:00 2001
From: Patrick Cartlidge <patrickcartlidge@gmail.com>
Date: Wed, 8 Jan 2025 17:17:41 +0000
Subject: [PATCH] NVDA fix

Remove `tabindex='-1'` from input, add `tabindex='-1'` to button. When
input active, apply hover style to button.
---
 .../src/govuk/components/file-upload/_index.scss             | 4 ++++
 .../src/govuk/components/file-upload/file-upload.mjs         | 5 ++---
 2 files changed, 6 insertions(+), 3 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..b657eff99a 100644
--- a/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
@@ -96,4 +96,8 @@
     margin-bottom: 0;
     margin-left: govuk-spacing(2);
   }
+
+  .govuk-file-upload-wrapper:active button {
+    background-color: $govuk-focus-colour;
+  }
 }
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 3cad2a5e4c..63ad488e7a 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
@@ -83,6 +83,8 @@ export class FileUpload extends GOVUKFrontendComponent {
       'govuk-button govuk-button--secondary govuk-file-upload__button'
     $button.type = 'button'
     $button.innerText = this.i18n.t('selectFilesButton')
+    // Prevent the button being tabbed to by keyboard users
+    $button.setAttribute('tabindex', '-1')
     $button.addEventListener('click', this.onClick.bind(this))
 
     // Create status element that shows what/how many files are selected
@@ -106,9 +108,6 @@ export class FileUpload extends GOVUKFrontendComponent {
     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()