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.
This commit is contained in:
Kane York 2020-04-16 12:01:11 -07:00 committed by GitHub
parent 6e1a33b744
commit 0fccea3762
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 8 deletions

View File

@ -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}}

View File

@ -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 {