commit 0c1e09e60f145b12ed17421b606c443d90da1324
author Dixsie Wolmers <dixsiew@gmail.com> Mon Aug 26 11:16:10 2019 -0500
committer Gunnar Mills <gmills@us.ibm.com> Thu Aug 29 20:32:21 2019 +0000
tree 3ff7a90d187da7fa0aa078d1a8bf1bd64a9bedc1
parent e0334c5e20e77630319b048292a45689fe7f4a7e

Fix IE11 replace certificate button

- Refactored button and icon markup on certificate management in order to trigger
  click in IE11

Tested:
- Confirmed button functionality in Chrome, IE11, Firefox, Edge and Safari
- Buttons and icons pass DAP
- File upload inaccessible, unable to tab to "choose file" button
  Will correct in separate commit

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

app/common/directives/certificate.html

diff --git a/app/common/directives/certificate.html b/app/common/directives/certificate.html
index cb7281b..122caad 100644
--- a/app/common/directives/certificate.html
+++ b/app/common/directives/certificate.html
@@ -32,37 +32,49 @@
     {{cert.ValidNotAfter | date:medium}}
   </div>
   <div class="certificate__buttons-cell">
-    <button type="button" class="btn  btn-tertiary  certificate__button">
-      <icon file="icon-replace.svg" ng-click="cert.upload = true"
-        aria-label="Replace certificate"></icon>
+    <button type="button" ng-click="cert.upload = true" aria-label="Replace certificate"
+      class="btn  btn-tertiary certificate__button">
+      <icon file="icon-replace.svg" aria-hidden="true"></icon>
     </button>
   </div>
   <div ng-show="cert.upload === true" class="upload__certificate">
     <div class="certificate__upload-chooser row">
       <div class="small-1 column">
-        <button type="button">
-          <icon file="icon-close.svg" ng-click="cert.upload=false"></icon>
+        <button
+          type="button"
+          ng-click="cert.upload=false"
+          aria-label="close replace certificate upload form">
+          <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 for="upload_{{cert.Description + cert.Id}}">
+          <input
+            name="upload_{{cert.Description + cert.Id}}"
             id="upload_{{cert.Description + cert.Id}}"
-            type="file" file="cert.file" class="hide"/>
+            type="file"
+            file="cert.file"
+            class="hide" />
           <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>
-        <button type="button" ng-if="cert.file.name" ng-click="cert.file = '';">
-          <icon file="icon-close.svg"></icon>
+        <button
+          type="reset"
+          ng-if="cert.file.name"
+          ng-click="cert.file = '';"
+          aria-label="remove selected file">
+          <icon file="icon-close.svg" aria-hidden="true"></icon>
         </button>
       </div>
       <div class="small-3 column">
-        <button type="button" ng-class="{disabled:!cert.file}"
-          class="btn btn-primary"
-          ng-click="replaceCertificate(cert)">Replace</button>
+        <button type="submit" ng-class="{disabled:!cert.file}" class="btn btn-primary"
+          ng-click="replaceCertificate(cert)">
+          Replace
+        </button>
       </div>
     </div>
   </div>