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