Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change to single focus state #2112

Merged
merged 5 commits into from
Aug 22, 2017
Merged

Change to single focus state #2112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d77ee35
Remove all focus state
Aug 17, 2017
49d7ad4
Add custom styling to navigation focus states
Aug 17, 2017
7284764
Use usa-focus class to force focus any element
Aug 21, 2017
1d5342f
Add back in focus behavior for pseudo els
Aug 21, 2017
fe6732e
missing semicolon
donjo Aug 22, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/02-buttons/buttons.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{% if (category != 'disabled') and (category != 'big') -%}
<button class="{{ classes }} usa-button-hover">Hover</button>
<button class="{{ classes }} usa-button-active">Active</button>
<button class="{{ classes }} usa-button-focus">Focus</button>
<button class="{{ classes }} usa-focus">Focus</button>
{% if (category == 'secondary') -%}
<button class="usa-button-secondary-disabled">Disabled</button>
{% elif (category == 'secondary-inverse') -%}
Expand Down
2 changes: 1 addition & 1 deletion src/components/07-form/controls/text-input.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<input id="input-type-text" name="input-type-text" type="text">

<label for="input-focus">Text input focused</label>
<input class="usa-input-focus" id="input-focus" name="input-focus" type="text">
<input class="usa-focus" id="input-focus" name="input-focus" type="text">

<div class="usa-input-error">
<label class="usa-input-error-label" for="input-error">Text input error</label>
Expand Down
4 changes: 0 additions & 4 deletions src/stylesheets/components/_accordions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,6 @@ $v-padding: $spacing-md-small;
padding: $v-padding ($h-padding * 2 + $icon-size) $v-padding $h-padding;
width: 100%;

&:focus {
box-shadow: $focus-shadow;
}

&:hover {
background-color: $color-gray-lighter;
color: $color-base;
Expand Down
13 changes: 8 additions & 5 deletions src/stylesheets/components/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@
.usa-nav-link {
@include font-smoothing;

&:focus {
outline-offset: 0;
}

&:hover {
span {
@include media($nav-width) {
Expand Down Expand Up @@ -82,6 +86,10 @@
visibility: visible;
}

a:focus {
outline-offset: 0;
}

nav {
margin-top: 6rem; // XXX magic number
min-height: 100%;
Expand Down Expand Up @@ -166,11 +174,6 @@
width: initial;
}

&:focus,
&:active {
box-shadow: $focus-shadow;
}

&:hover {
background-color: $color-gray-lightest;
color: $color-primary;
Expand Down
6 changes: 6 additions & 0 deletions src/stylesheets/core/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,9 @@ body {
[hidden] {
display: none !important; /* stylelint-disable-line declaration-no-important */
}

*:focus,
.usa-focus {
outline: $focus-outline;
outline-offset: $focus-spacing;
}
5 changes: 5 additions & 0 deletions src/stylesheets/core/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@
}

&:focus {
outline-offset: 0;
position: relative;
z-index: 1;
}
Expand Down Expand Up @@ -233,6 +234,10 @@
a {
padding-left: 3.8rem;

&:focus {
outline-offset: 0;
}

&:hover {
padding-left: 3.8rem;
}
Expand Down
3 changes: 2 additions & 1 deletion src/stylesheets/core/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,8 @@ $label-border-radius: 2px !default;
$border-radius: 3px !default;
$button-border-radius: 5px !default;
$box-shadow: 0 0 2px $color-shadow !default;
$focus-shadow: 0 0 0 3px $color-focus, 0 0 0 2px $color-white inset !default;
$focus-outline: 2px dotted $color-gray-light;
$focus-spacing: 3px;
$nav-width: 951px !default;

// 44 x 44 pixels hit target following Apple iOS Human Interface
Expand Down
24 changes: 2 additions & 22 deletions src/stylesheets/elements/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ button,
font-size: $base-font-size;
font-weight: $font-bold;
line-height: 1;
outline: none;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
Expand All @@ -45,12 +44,6 @@ button,
text-decoration: none;
}

&:focus,
&.usa-button-focus {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The removal of some of these classes makes it so the focus state isn't being show on the fractal example like it should (example of how it should look below)

screen shot 2017-08-21 at 2 13 14 pm

Doesn't have to be done in the same fashion as the past but some njk files may need to be adjusted otherwise.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if we just did a usa-focus class that could work for focus state on any element? Or should there but a button-focus class specifically?

border-radius: 3px;
box-shadow: $focus-shadow;
}

&:active,
&.usa-button-active {
background-color: $color-primary-darkest;
Expand Down Expand Up @@ -88,12 +81,6 @@ button,
box-shadow: $button-stroke $color-primary-darkest;
color: $color-primary-darkest;
}

&:focus,
&.usa-button-focus {
border-radius: 3px;
box-shadow: 0 0 0 2px $color-white, 0 0 0 5px $color-focus, 0 0 0 2px $color-primary inset;
}
}

&.usa-button-secondary-inverse,
Expand All @@ -113,12 +100,6 @@ button,
box-shadow: $button-stroke $color-gray-light;
color: $color-gray-lighter;
}

&:focus,
&.usa-button-focus {
border-radius: 3px;
box-shadow: 0 0 0 2px $color-shadow, 0 0 0 5px $color-focus, 0 0 0 2px $color-white inset;
}
}

&.usa-button-gray {
Expand Down Expand Up @@ -165,7 +146,7 @@ button,
&:active,
&.usa-button-active,
&:focus,
&.usa-button-focus {
&.usa-focus {
background-color: $color-gray-lighter;
border: 0;
box-shadow: none;
Expand All @@ -184,7 +165,7 @@ button,
&:active,
&.usa-button-active,
&:focus,
&.usa-button-focus {
&.usa-focus {
background-color: $color-white;
border: 0;
}
Expand All @@ -204,7 +185,6 @@ button,
border-radius: 0;
font-weight: $font-normal;
margin: 0;
outline: 0;
padding: 0;
text-align: left;
-webkit-font-smoothing: auto;
Expand Down
37 changes: 8 additions & 29 deletions src/stylesheets/elements/_inputs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,9 @@ select {
line-height: $input-line-height;
margin: 0.2em 0;
max-width: $input-max-width;
outline: none;
padding: $input-padding-vertical 0.7em;
width: 100%;

&:focus,
&.usa-input-focus {
box-shadow: $focus-shadow;
}

&.usa-input-success {
border: 3px solid $color-green-light;
}
Expand Down Expand Up @@ -195,10 +189,6 @@ legend {
box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary;
}

[type=radio]:focus + label::before {
box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary, 0 0 3px 4px $color-focus, 0 0 7px 4px $color-focus;
}

[type=checkbox]:checked + label::before,
[type=checkbox]:checked:disabled + label::before {
background-image: url('#{$image-path}/correct8.png');
Expand All @@ -207,14 +197,20 @@ legend {
background-repeat: no-repeat;
}

[type=checkbox]:focus + label::before {
box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-primary;
[type=radio]:focus + label::before {
outline: $focus-outline;
outline-offset: 5px;
}

[type=checkbox]:disabled + label {
color: $color-gray;
}

[type=checkbox]:focus + label::before {
outline: $focus-outline;
outline-offset: $focus-spacing;
}

[type=checkbox]:disabled + label::before,
[type=radio]:disabled + label::before {
background: $color-gray-lighter;
Expand All @@ -231,11 +227,6 @@ legend {
width: 100%;
}

[type=range]:focus {
box-shadow: none;
outline: none;
}

[type=range]::-webkit-slider-runnable-track {
background: $color-gray-light;
border: 1px solid $color-gray-medium;
Expand Down Expand Up @@ -301,18 +292,6 @@ legend {
border-radius: 2rem;
}

[type=range]:focus::-webkit-slider-thumb {
border: 2px solid $color-focus;
}

[type=range]:focus::-moz-range-thumb {
border: 2px solid $color-focus;
}

[type=range]:focus::-ms-thumb {
border: 2px solid $color-focus;
}

// Memorable dates

.usa-date-of-birth {
Expand Down
5 changes: 0 additions & 5 deletions src/stylesheets/elements/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,6 @@ a {
&:visited {
color: $color-visited;
}

&:focus {
box-shadow: $focus-shadow;
outline: 0;
}
}

@mixin external-link($external-link, $external-link-hover) {
Expand Down