NVDA fix

Remove `tabindex='-1'` from input, add `tabindex='-1'` to button. When input active, apply hover style to button.
alphagov · Jan 9, 2025 · baaf4f7 · baaf4f7
1 parent 9c6749f
commit baaf4f7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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()