From 0fccea3762ed5f6c2d4d78381663001df315d106 Mon Sep 17 00:00:00 2001
From: Kane York <kanepyork@gmail.com>
Date: Thu, 16 Apr 2020 12:01:11 -0700
Subject: [PATCH] FIX: Keyboard navigation fixes in setup wizard (#9413)

- Delete a positive tabindex from a reused component
 - Copy :hover styles to :focus
 - Replace an 'outline: 0' rule with a TODO for a custom :focus style

Discovered while fixing the no-positive-tabindex lint.
---
 .../templates/components/radio-button.hbs     |  2 +-
 app/assets/stylesheets/wizard.scss            | 21 ++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/wizard/templates/components/radio-button.hbs b/app/assets/javascripts/wizard/templates/components/radio-button.hbs
index cdd4756b35..2974b5ebec 100644
--- a/app/assets/javascripts/wizard/templates/components/radio-button.hbs
+++ b/app/assets/javascripts/wizard/templates/components/radio-button.hbs
@@ -1,5 +1,5 @@
 <div class="radio-area">
-  <input type="radio" name={{label}} tabindex="9">
+  <input type="radio" name={{label}}>
   <span class="radio-label">
     {{#if icon}}
       {{d-icon icon}}
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index 2fd2067bd7..16a59ce294 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -280,7 +280,8 @@ body.wizard {
       font-size: $font-down-1;
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: #eee;
     }
 
@@ -311,7 +312,8 @@ body.wizard {
     color: white;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
 
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: #80b3ff;
     }
 
@@ -328,7 +330,8 @@ body.wizard {
     background-color: #e60000;
     color: white;
 
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: #cc0000;
     }
 
@@ -374,7 +377,8 @@ body.wizard {
       color: #333;
       box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 
-      &:hover {
+      &:hover,
+      &:focus {
         background-color: #eee;
       }
 
@@ -396,7 +400,8 @@ body.wizard {
       color: #fff;
       background-color: #33b333;
 
-      &:hover {
+      &:hover,
+      &:focus {
         background-color: #4dcd4d;
       }
 
@@ -477,7 +482,8 @@ body.wizard {
       padding: 8px;
       margin: 0px 4px;
       width: 25%;
-      &:hover {
+      &:hover,
+      &:focus {
         background: #f3f3f3;
       }
     }
@@ -519,7 +525,8 @@ body.wizard {
   margin-bottom: 1.25em;
 
   input {
-    outline: 0;
+    /* TODO: Custom :focus style */
+    /* outline: 0;*/
   }
 
   .radio-label {