Show focus outlines when customising colours settings on Radios and Checkboxes #854
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-854
36degrees
reviewed
Jul 2, 2018
src/components/radios/_radios.scss
Outdated
| @@ -10,6 +10,7 @@ | |||
| @include govuk-exports("govuk/component/radios") { | |||
| $govuk-radios-size: govuk-spacing(7); | |||
| $govuk-radios-label-padding-left-right: govuk-spacing(3); | |||
| $govuk-radios-focus-width: 4px; | |||
There was a problem hiding this comment.
Assuming we need to add 1 pixel can this be $govuk-focus-width + 1 so that we understand where this value came from?
src/components/radios/_radios.scss
Outdated
| @@ -99,7 +100,12 @@ | |||
|
|
|||
| // Focused state | |||
| .govuk-radios__input:focus + .govuk-radios__label::before { | |||
| box-shadow: 0 0 0 4px $govuk-focus-colour; | |||
| top: -($govuk-radios-focus-width); | |||
There was a problem hiding this comment.
I think this makes sense, but could definitely do with a comment to explain what's going on here.
NickColley
force-pushed
the
visible-focus-when-overriding-colours
branch
from
5d87149
to
a93e93e
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-854
NickColley
force-pushed
the
visible-focus-when-overriding-colours
branch
from
a93e93e
to
cea238c
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-854
NickColley
changed the title
NickColley
force-pushed
the
visible-focus-when-overriding-colours
branch
from
cea238c
to
bb05940
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-854
NickColley
changed the title
|
This is ace 👏 – @dashouse are you happy with the focus behaviour from a design perspective? |
36degrees
approved these changes
Jul 5, 2018
|
nice! |
NickColley
force-pushed
the
visible-focus-when-overriding-colours
branch
from
bb05940
to
1160ccb
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-854
NickColley
force-pushed
the
visible-focus-when-overriding-colours
branch
from
1160ccb
to
d551da0
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-854
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-854
NickColley
force-pushed
the
visible-focus-when-overriding-colours
branch
from
4456f51
to
3e0d43c
Compare
NickColley
changed the title
Merged
timja
reviewed
Jul 23, 2018
| // We set a transparent outline that is shown instead. | ||
| // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ | ||
| outline: $govuk-focus-width solid transparent; | ||
| outline-offset: $govuk-focus-width; |
There was a problem hiding this comment.
I assume you're aware but outline-offset doesn't exist in IE (just came across that recently)
There was a problem hiding this comment.
Yeah, the offset is for mainly aesthetic reasons as this approach does not rely on the gap between the focus and control, having the offset just makes it a bit more clearer that this is a focus and not a thicker border.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds invisible outlines that will be shown when colours are overridden.
Checkboxes
Before overriden colours
After overridden colours
Radios
Before overridden colours
After overridden colours
Cross browser testing
Internet Explorer 11
Internet Explorer 10
Internet Explorer 9
Internet Explorer 8
Firefox latest, Chrome latest, Chrome Android latest, Safari latest, Safari iOS latest
No change