From 6beda826b4f211df0620ba9ae2257bf011899755 Mon Sep 17 00:00:00 2001
From: Karan Sapolia <sapoliakaran@gmail.com>
Date: Wed, 3 Apr 2019 19:53:31 +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: #598
---
 .../settings/two_step_authentication.mustache       |  2 +-
 packages/fxa-content-server/app/styles/_base.scss   | 13 +++++++++++++
 .../app/styles/modules/_settings-totp.scss          |  3 ++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/fxa-content-server/app/scripts/templates/settings/two_step_authentication.mustache b/packages/fxa-content-server/app/scripts/templates/settings/two_step_authentication.mustache
index bdd52547699..9df06e4af2c 100644
--- a/packages/fxa-content-server/app/scripts/templates/settings/two_step_authentication.mustache
+++ b/packages/fxa-content-server/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/packages/fxa-content-server/app/styles/_base.scss b/packages/fxa-content-server/app/styles/_base.scss
index 072414023cb..1da90e7408a 100644
--- a/packages/fxa-content-server/app/styles/_base.scss
+++ b/packages/fxa-content-server/app/styles/_base.scss
@@ -105,6 +105,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/packages/fxa-content-server/app/styles/modules/_settings-totp.scss b/packages/fxa-content-server/app/styles/modules/_settings-totp.scss
index 57896afa814..d9875e754e0 100644
--- a/packages/fxa-content-server/app/styles/modules/_settings-totp.scss
+++ b/packages/fxa-content-server/app/styles/modules/_settings-totp.scss
@@ -115,7 +115,8 @@
   }
 }
 
-.replace-codes-link {
+.replace-codes-link,
+.replace-codes-link:hover {
   background: transparent url('/images/recovery_code_replace.svg') center left no-repeat;
   padding-left: 20px;
 }