FIX: Keyboard navigation fixes in setup wizard (#9413)

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.

diff --git a/app/assets/javascripts/wizard/templates/components/radio-button.hbs b/app/assets/javascripts/wizard/templates/components/radio-button.hbs
index cdd4756..2974b5e 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 2fd2067..16a59ce 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 {

GitHub sha: 0fccea37

This commit appears in #9413 which was approved by eviltrout. It was merged by riking.