Fix certificate management tabbing

- Adds focus to "choose file" button when replacing certificate
- Adds input-file.scss to elements

Tested:
- Passes DAP
- Tabs correctly in all browsers

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I48c61f4176bc3e3fe55425dafc79e8f2edb934b2

3 files changed, 32 insertions, 8 deletions

diff --git a/app/common/directives/certificate.html b/app/common/directives/certificate.html
index 122caad..35c2de3 100644
--- a/app/common/directives/certificate.html
+++ b/app/common/directives/certificate.html
@@ -47,18 +47,16 @@
           <icon file="icon-close.svg" aria-hidden="true"></icon>
         </button>
       </div>
-      <!-- TODO: Fix file upload accessibility -->
       <div class="small-2 column">
-        <label for="upload_{{cert.Description + cert.Id}}">
-          <input
-            name="upload_{{cert.Description + cert.Id}}"
+          <label>
+            <input
             id="upload_{{cert.Description + cert.Id}}"
             type="file"
             file="cert.file"
-            class="hide" />
-          <span class="btn btn-secondary">Choose file</span>
-        </label>
-      </div>
+            class="input-file" />
+            <span class="btn btn-secondary">Choose file</span>
+          </label>
+        </div>
       <div class="small-6 column">
         <span ng-if="!cert.file">No file selected</span>
         <span>{{cert.file.name}}</span>
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 0588813..66a2877 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -3,6 +3,7 @@
 @import "status";
 @import "alerts";
 @import "inline-confirm";
+@import "input-file";
 @import "accordion";
 @import "loader";
 @import "content-search";
diff --git a/app/common/styles/elements/input-file.scss b/app/common/styles/elements/input-file.scss
new file mode 100644
index 0000000..3f32b2b
--- /dev/null
+++ b/app/common/styles/elements/input-file.scss
@@ -0,0 +1,25 @@
+/**
+  * Used for file upload "choose file" button
+  * Markup (example for certificate upload)
+    <label>
+      <input
+      id="upload_{{cert.Description + cert.Id}}"
+      type="file"
+      file="cert.file"
+      class="input-file" />
+      <span class="btn btn-secondary">Choose file</span>
+    </label>
+*/
+
+.input-file {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+.input-file:focus + span {
+  outline: 0.2rem solid $box-shadow-color;
+}
\ No newline at end of file