Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/wizard/templates/components/radio-button.hbs
View File

@ -1,5 +1,5 @@
<div class="radio-area"> <div class="radio-area">
<input type="radio" name={{label}} tabindex="9"> <input type="radio" name={{label}}>
<span class="radio-label"> <span class="radio-label">
{{#if icon}} {{#if icon}}
{{d-icon icon}} {{d-icon icon}}

21
app/assets/stylesheets/wizard.scss
View File

@ -280,7 +280,8 @@ body.wizard {
font-size: $font-down-1; font-size: $font-down-1;
} }
&:hover { &:hover,
&:focus {
background-color: #eee; background-color: #eee;
} }
@ -311,7 +312,8 @@ body.wizard {
color: white; color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
&:hover { &:hover,
&:focus {
background-color: #80b3ff; background-color: #80b3ff;
} }
@ -328,7 +330,8 @@ body.wizard {
background-color: #e60000; background-color: #e60000;
color: white; color: white;
&:hover { &:hover,
&:focus {
background-color: #cc0000; background-color: #cc0000;
} }
@ -374,7 +377,8 @@ body.wizard {
color: #333; color: #333;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
&:hover { &:hover,
&:focus {
background-color: #eee; background-color: #eee;
} }
@ -396,7 +400,8 @@ body.wizard {
color: #fff; color: #fff;
background-color: #33b333; background-color: #33b333;
&:hover { &:hover,
&:focus {
background-color: #4dcd4d; background-color: #4dcd4d;
} }
@ -477,7 +482,8 @@ body.wizard {
padding: 8px; padding: 8px;
margin: 0px 4px; margin: 0px 4px;
width: 25%; width: 25%;
&:hover { &:hover,
&:focus {
background: #f3f3f3; background: #f3f3f3;
} }
} }
@ -519,7 +525,8 @@ body.wizard {
margin-bottom: 1.25em; margin-bottom: 1.25em;
input { input {
outline: 0; /* TODO: Custom :focus style */
/* outline: 0;*/
} }
.radio-label { .radio-label {