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
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>