From 920c844064261596581f4265d49b30ccba7cf0dc Mon Sep 17 00:00:00 2001
From: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:35:15 -0400
Subject: [PATCH] add labels to file type inputs (#17677)

---
 ui/app/templates/components/file-to-array-buffer.hbs |  6 +++---
 ui/app/templates/components/pgp-file.hbs             | 12 +++++++++---
 ui/app/templates/components/text-file.hbs            | 12 +++++++++---
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/ui/app/templates/components/file-to-array-buffer.hbs b/ui/app/templates/components/file-to-array-buffer.hbs
index f8d08a089c..e3d32244f7 100644
--- a/ui/app/templates/components/file-to-array-buffer.hbs
+++ b/ui/app/templates/components/file-to-array-buffer.hbs
@@ -7,11 +7,11 @@
     </label>
     <div class="file has-name is-fullwidth">
       <div class="file-label" aria-label="Choose a file">
-        <input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input />
-        <span class="file-cta button">
+        <input id="file-input" class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input />
+        <label for="file-input" class="file-cta button">
           <Icon @name="upload" class="has-light-grey-text" />
           Choose a file…
-        </span>
+        </label>
         <span class="file-name has-text-grey-dark" data-test-text-file-input-label={{true}}>
           {{or this.fileName "No file chosen"}}
         </span>
diff --git a/ui/app/templates/components/pgp-file.hbs b/ui/app/templates/components/pgp-file.hbs
index ecdf2efb4c..9cc0c3c6e2 100644
--- a/ui/app/templates/components/pgp-file.hbs
+++ b/ui/app/templates/components/pgp-file.hbs
@@ -46,18 +46,24 @@
     <div class="control is-expanded">
       <div class="file">
         <div class="file-label is-fullwidth">
-          <input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-pgp-file-input={{true}} />
+          <input
+            id="file-input"
+            class="file-input"
+            type="file"
+            onchange={{action "pickedFile"}}
+            data-test-pgp-file-input={{true}}
+          />
           <span class="file-cta is-fullwidth">
             <span class="file-icon has-text-grey-dark">
               <Icon @name="file" />
             </span>
-            <span class="file-label has-text-grey-dark" data-test-pgp-file-input-label={{true}}>
+            <label for="file-input" class="file-label has-text-grey-dark" data-test-pgp-file-input-label={{true}}>
               {{#if this.key.fileName}}
                 {{this.key.fileName}}
               {{else}}
                 Choose a file&hellip;
               {{/if}}
-            </span>
+            </label>
             {{#if this.key.fileName}}
               <button type="button" class="file-delete-button" {{action "clearKey"}} data-test-pgp-clear={{true}}>
                 <Icon @name="x" aria-label="Close" />
diff --git a/ui/app/templates/components/text-file.hbs b/ui/app/templates/components/text-file.hbs
index 52cb3da5cd..a3e392e6ab 100644
--- a/ui/app/templates/components/text-file.hbs
+++ b/ui/app/templates/components/text-file.hbs
@@ -61,11 +61,17 @@
     <div class="control is-expanded">
       <div class="file has-name is-fullwidth">
         <div class="file-label" aria-label="Choose a file">
-          <input class="file-input" type="file" {{on "change" this.pickedFile}} data-test-text-file-input={{true}} />
-          <span class="file-cta button">
+          <Input
+            id="file-input"
+            class="file-input"
+            @type="file"
+            {{on "change" this.pickedFile}}
+            data-test-text-file-input={{true}}
+          />
+          <label for="file-input" class="file-cta button">
             <Icon @name="upload" class="has-light-grey-text" />
             Choose a file…
-          </span>
+          </label>
           <span class="file-name has-text-grey-dark" data-test-text-file-input-label={{true}}>
             {{#if @file.fileName}}
               {{@file.fileName}}