From 0ff43f743145d865a9154ac0b1dd3054d067319e Mon Sep 17 00:00:00 2001
From: Karan Sapolia <sapoliakaran@gmail.com>
Date: Tue, 26 Mar 2019 03:18:39 +0530
Subject: [PATCH] fix(totp): replace recovery codes keyboard accessibility

Make 'Replace recovery codes' keyboard accessible.
Replace earlier used link with button element to allow
tab indexing and keyboard click events for keyboard
accessibility.

fixes: #6593
---
 .../settings/two_step_authentication.mustache       |  2 +-
 app/styles/_base.scss                               | 13 +++++++++++++
 app/styles/modules/_settings-totp.scss              |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/scripts/templates/settings/two_step_authentication.mustache b/app/scripts/templates/settings/two_step_authentication.mustache
index bdd5254769..9df06e4af2 100644
--- a/app/scripts/templates/settings/two_step_authentication.mustache
+++ b/app/scripts/templates/settings/two_step_authentication.mustache
@@ -50,7 +50,7 @@
                 </li>
                 <li>
                     {{#hasToken}}
-                        <a class="replace-codes-link">{{#t}}Replace recovery codes{{/t}}</a>
+                        <button class="link replace-codes-link">{{#t}}Replace recovery codes{{/t}}</button>
                     {{/hasToken}}
                 </li>
             </ul>
diff --git a/app/styles/_base.scss b/app/styles/_base.scss
index b786fe7965..db1f68661f 100644
--- a/app/styles/_base.scss
+++ b/app/styles/_base.scss
@@ -109,6 +109,19 @@ input {
   font-weight: inherit;
 }
 
+button.link {
+  color: $link-color-default;
+  font-size: 14px;
+  height: 20px;
+  justify-content: left;
+  letter-spacing: 0;
+  width: auto;
+}
+
+button.link:hover {
+  text-decoration: underline;
+}
+
 input[type='radio'] {
     @include font();
     // autoprefixer does not handle appearance, see https://github.com/ai/autoprefixer/issues/205
diff --git a/app/styles/modules/_settings-totp.scss b/app/styles/modules/_settings-totp.scss
index 331515c8ba..dd764060b0 100644
--- a/app/styles/modules/_settings-totp.scss
+++ b/app/styles/modules/_settings-totp.scss
@@ -112,7 +112,7 @@
   }
 }
 
-.replace-codes-link {
+.replace-codes-link, button.link:hover {
   background: transparent url('/images/recovery_code_replace.svg') center left no-repeat;
   padding-left: 20px;
 }