Enhanced File Upload NVDA Fix

[patrickpatrickpatrick]

What

• Remove tabindex="=-1" from input
• Add tabindex="-1" to button
• Add focus style to button when hidden input is focused

Why

Fix issue in which NVDA read out the button only and not the status of the input.

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	119.09 KiB
dist/govuk-frontend-development.min.js	45.62 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	98.48 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	92.45 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.32 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	1.74 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	119.08 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	45.61 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	7.5 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	87.62 KiB	43.13 KiB
accordion.mjs	26.58 KiB	13.41 KiB
button.mjs	9.09 KiB	3.78 KiB
character-count.mjs	25.39 KiB	10.9 KiB
checkboxes.mjs	7.81 KiB	3.42 KiB
error-summary.mjs	10.99 KiB	4.54 KiB
exit-this-page.mjs	20.2 KiB	10.34 KiB
file-upload.mjs	17.3 KiB	8.35 KiB
header.mjs	6.46 KiB	3.22 KiB
notification-banner.mjs	9.35 KiB	3.7 KiB
password-input.mjs	18.24 KiB	8.33 KiB
radios.mjs	6.81 KiB	2.98 KiB
service-navigation.mjs	6.44 KiB	3.26 KiB
skip-link.mjs	6.4 KiB	2.76 KiB
tabs.mjs	12.04 KiB	6.67 KiB

View stats and visualisations on the review app

---

Action run for baaf4f7

[github-actions]

JavaScript changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index 721a7e7fd..a37d255b6 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -763,9 +763,9 @@ class FileUpload extends GOVUKFrontendComponent {
         const n = document.createElement("div");
         n.className = "govuk-file-upload-wrapper";
         const i = document.createElement("button");
-        i.className = "govuk-button govuk-button--secondary govuk-file-upload__button", i.type = "button", i.innerText = this.i18n.t("selectFilesButton"), i.addEventListener("click", this.onClick.bind(this));
+        i.className = "govuk-button govuk-button--secondary govuk-file-upload__button", i.type = "button", i.innerText = this.i18n.t("selectFilesButton"), i.setAttribute("tabindex", "-1"), i.addEventListener("click", this.onClick.bind(this));
         const s = document.createElement("span");
-        s.className = "govuk-body govuk-file-upload__status", s.innerText = this.i18n.t("filesSelectedDefault"), s.setAttribute("role", "status"), n.insertAdjacentElement("beforeend", i), n.insertAdjacentElement("beforeend", s), this.$root.insertAdjacentElement("afterend", n), n.insertAdjacentElement("afterbegin", this.$root), this.$wrapper = n, this.$button = i, this.$status = s, this.$root.setAttribute("tabindex", "-1"), this.updateDisabledState(), this.observeDisabledState(), this.$root.addEventListener("change", this.onChange.bind(this)), this.$wrapper.addEventListener("drop", this.onDragLeaveOrDrop.bind(this)), document.addEventListener("dragenter", this.onDragEnter.bind(this)), document.addEventListener("dragleave", this.onDragLeaveOrDrop.bind(this))
+        s.className = "govuk-body govuk-file-upload__status", s.innerText = this.i18n.t("filesSelectedDefault"), s.setAttribute("role", "status"), n.insertAdjacentElement("beforeend", i), n.insertAdjacentElement("beforeend", s), this.$root.insertAdjacentElement("afterend", n), n.insertAdjacentElement("afterbegin", this.$root), this.$wrapper = n, this.$button = i, this.$status = s, this.updateDisabledState(), this.observeDisabledState(), this.$root.addEventListener("change", this.onChange.bind(this)), this.$wrapper.addEventListener("drop", this.onDragLeaveOrDrop.bind(this)), document.addEventListener("dragenter", this.onDragEnter.bind(this)), document.addEventListener("dragleave", this.onDragLeaveOrDrop.bind(this))
     }
     onChange() {
         if (!("files" in this.$root)) return;

---

Action run for baaf4f7

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index f1b48d569..4b78902d2 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3425,6 +3425,10 @@ screen and (forced-colors:active) {
     margin-left: 10px
 }
 
+.govuk-file-upload-wrapper:active button {
+    background-color: #fd0
+}
+
 .govuk-footer {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;

---

Action run for baaf4f7

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index a2e6c5c58..14fd3812e 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -1694,6 +1694,7 @@
       $button.className = 'govuk-button govuk-button--secondary govuk-file-upload__button';
       $button.type = 'button';
       $button.innerText = this.i18n.t('selectFilesButton');
+      $button.setAttribute('tabindex', '-1');
       $button.addEventListener('click', this.onClick.bind(this));
       const $status = document.createElement('span');
       $status.className = 'govuk-body govuk-file-upload__status';
@@ -1706,7 +1707,6 @@
       this.$wrapper = $wrapper;
       this.$button = $button;
       this.$status = $status;
-      this.$root.setAttribute('tabindex', '-1');
       this.updateDisabledState();
       this.observeDisabledState();
       this.$root.addEventListener('change', this.onChange.bind(this));
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index f261b255d..69e9e4b3a 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -1688,6 +1688,7 @@ class FileUpload extends GOVUKFrontendComponent {
     $button.className = 'govuk-button govuk-button--secondary govuk-file-upload__button';
     $button.type = 'button';
     $button.innerText = this.i18n.t('selectFilesButton');
+    $button.setAttribute('tabindex', '-1');
     $button.addEventListener('click', this.onClick.bind(this));
     const $status = document.createElement('span');
     $status.className = 'govuk-body govuk-file-upload__status';
@@ -1700,7 +1701,6 @@ class FileUpload extends GOVUKFrontendComponent {
     this.$wrapper = $wrapper;
     this.$button = $button;
     this.$status = $status;
-    this.$root.setAttribute('tabindex', '-1');
     this.updateDisabledState();
     this.observeDisabledState();
     this.$root.addEventListener('change', this.onChange.bind(this));
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
index 34e781c51..57c6f614f 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
@@ -96,6 +96,10 @@
     margin-bottom: 0;
     margin-left: govuk-spacing(2);
   }
+
+  .govuk-file-upload-wrapper:active button {
+    background-color: $govuk-focus-colour;
+  }
 }
 
 /*# sourceMappingURL=_index.scss.map */
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
index 69b24f51d..52ba0baee 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
@@ -495,6 +495,7 @@
       $button.className = 'govuk-button govuk-button--secondary govuk-file-upload__button';
       $button.type = 'button';
       $button.innerText = this.i18n.t('selectFilesButton');
+      $button.setAttribute('tabindex', '-1');
       $button.addEventListener('click', this.onClick.bind(this));
       const $status = document.createElement('span');
       $status.className = 'govuk-body govuk-file-upload__status';
@@ -507,7 +508,6 @@
       this.$wrapper = $wrapper;
       this.$button = $button;
       this.$status = $status;
-      this.$root.setAttribute('tabindex', '-1');
       this.updateDisabledState();
       this.observeDisabledState();
       this.$root.addEventListener('change', this.onChange.bind(this));
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
index 65b4aae36..59c885397 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
@@ -489,6 +489,7 @@ class FileUpload extends GOVUKFrontendComponent {
     $button.className = 'govuk-button govuk-button--secondary govuk-file-upload__button';
     $button.type = 'button';
     $button.innerText = this.i18n.t('selectFilesButton');
+    $button.setAttribute('tabindex', '-1');
     $button.addEventListener('click', this.onClick.bind(this));
     const $status = document.createElement('span');
     $status.className = 'govuk-body govuk-file-upload__status';
@@ -501,7 +502,6 @@ class FileUpload extends GOVUKFrontendComponent {
     this.$wrapper = $wrapper;
     this.$button = $button;
     this.$status = $status;
-    this.$root.setAttribute('tabindex', '-1');
     this.updateDisabledState();
     this.observeDisabledState();
     this.$root.addEventListener('change', this.onChange.bind(this));
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
index a1ff0baf8..6023b3586 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
@@ -44,6 +44,7 @@ class FileUpload extends GOVUKFrontendComponent {
     $button.className = 'govuk-button govuk-button--secondary govuk-file-upload__button';
     $button.type = 'button';
     $button.innerText = this.i18n.t('selectFilesButton');
+    $button.setAttribute('tabindex', '-1');
     $button.addEventListener('click', this.onClick.bind(this));
     const $status = document.createElement('span');
     $status.className = 'govuk-body govuk-file-upload__status';
@@ -56,7 +57,6 @@ class FileUpload extends GOVUKFrontendComponent {
     this.$wrapper = $wrapper;
     this.$button = $button;
     this.$status = $status;
-    this.$root.setAttribute('tabindex', '-1');
     this.updateDisabledState();
     this.observeDisabledState();
     this.$root.addEventListener('change', this.onChange.bind(this));

---

Action run for baaf4f7