darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-25 18:38:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3628 from alphagov/update-focus-style-to-govuk-frontend-3-version

Browse Source 
Update focus style to GOVUK Frontend 3 version
This commit is contained in:
Tom Byers
2020-09-16 14:55:30 +01:00
committed by GitHub
parent c2e737b323 308f9980d3
commit e6b13ab6aa
18 changed files with 404 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/stylesheets/components/big-number.scss
View File

@@ -97,7 +97,10 @@
color: $light-blue-25;
.big-number {
.big-number,
.big-number-number,
.big-number-smaller,
.big-number-label {
color: $light-blue-25;
}
@@ -105,7 +108,18 @@
&:active,
&:focus {
outline: 3px solid $yellow;
background: $govuk-focus-colour;
border: none;
padding: 2px; /* replace the spacing the border gave */
/* override the default focus style to inset the underline */
box-shadow: inset 0 -4px $govuk-focus-text-colour;
.big-number-number,
.big-number-smaller,
.big-number-label {
color: $govuk-focus-text-colour;
text-decoration: none;
}
}
.big-number,

4
app/assets/stylesheets/components/message.scss
View File

@@ -147,6 +147,10 @@ $message-type-bottom-spacing: govuk-spacing(4);
background-image: file-url('folder-blue-bold-hover.svg');
}
&:focus {
background-image: file-url('folder-black-bold.svg');
}
}
&-template {

17
app/assets/stylesheets/components/navigation.scss
View File

@@ -73,11 +73,9 @@
padding: $padding-top 0 $padding-bottom govuk-spacing(3);
&:focus {
outline: none;
border-bottom: 1px solid $yellow;
border-left: 10px solid $yellow;
border-right: 3px solid $yellow;
right: -3px;
padding: $padding-top 0px $padding-bottom + 1px govuk-spacing(3) + 10;
/* override default focus style to inset bottom underline */
box-shadow: inset 0 -4px $govuk-focus-text-colour;
}
}
@@ -105,7 +103,7 @@
position: absolute;
top: -1px;
bottom: 1px;
right: 7px;
right: 2px;
width: 7px;
height: 7px;
margin: auto 0;
@@ -117,10 +115,13 @@
border-color: $secondary-text-colour;
}
&:focus:before {
border-color: $govuk-focus-text-colour;
}
// hack to make the focus style fit in the navigation bar
&:focus {
outline: none;
box-shadow: 0 1px 0 0 $focus-colour, -3px 0 0 0 $focus-colour, -3px 1px 0 0 $focus-colour;
box-shadow: inset 0 -3px $govuk-focus-text-colour, 0 1px $govuk-focus-text-colour;
}
}

28
app/assets/stylesheets/components/pill.scss
View File

@@ -55,6 +55,11 @@
&:active,
&:focus {
z-index: 10;
color: $govuk-focus-text-colour;
/* override default focus styles to inset bottom underline */
box-shadow: inset 0 -4px $govuk-focus-text-colour;
border: none;
padding: 12px 2px; /* compensate for lack of border with padding */
}
}
@@ -77,7 +82,10 @@
&:active,
&:focus {
z-index: 1000;
outline: 3px solid $yellow;
color: $govuk-focus-text-colour;
border: solid 2px $black;
padding: 10px 0px; /* reset padding to default */
box-shadow: inset 0 -2px $govuk-focus-text-colour; /* remove bottom border from underline */
}
}
@@ -94,6 +102,13 @@
}
&-item,
&-item--selected {
&:focus .pill-item__label {
text-decoration: none;
}
}
&-item--centered {
text-align: center;
padding-left: 0;
@@ -117,10 +132,17 @@
text-decoration: underline;
}
&:hover,
&:hover {
color: $light-blue-25;
}
&:focus,
&:link:focus {
color: $light-blue-25;
color: $govuk-focus-text-colour;
text-decoration: none;
background: $govuk-focus-colour;
/* override default focus style to inset bottom underline */
box-shadow: inset 0 -4px $govuk-focus-text-colour;
}
}

11
app/assets/stylesheets/components/show-more.scss
View File

@@ -10,15 +10,14 @@
&:focus {
outline: none;
color: $text-colour;
box-shadow: 0 -10px 0 0 $yellow;
border-color: $yellow;
border-color: transparent;
/* override default focus style to increase top yellow box-shadow */
box-shadow: 0 -15px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
span {
background: $yellow;
outline: none;
border-color: $text-colour;
border-color: transparent;
background-color: transparent;
}
}

8
app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
View File

@@ -145,11 +145,9 @@ $sticky-padding: govuk-spacing(4);
color: $link-hover-colour;
}
&:focus,
&:active, {
background: $yellow;
color: $govuk-blue;
outline: none;
&:focus {
/* override default box shadow to stop it looking so large vertically */
box-shadow: inset 0 -4px $govuk-focus-text-colour;
}
}

10
app/assets/stylesheets/components/table.scss
View File

@@ -337,6 +337,11 @@
display: block;
position: relative;
/* remove default focus styles in favour of those for :before pseudo class */
&:focus {
box-shadow: none;
}
&:before {
content: "";
display: block;
@@ -353,10 +358,7 @@
&:active:before,
&:focus:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px 15px 15px;
right: -3px;
box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 15px $govuk-focus-colour, inset 15px 0px $govuk-focus-colour, inset 0px -11px $govuk-focus-colour;
}
}

3
app/assets/stylesheets/components/task-list.scss
View File

@@ -32,8 +32,7 @@ $indicator-colour: $black;
position: relative;
&:focus {
outline: none;
box-shadow: -3px 0 0 0 $focus-colour, 3px 0 0 0 $focus-colour;
box-shadow: inset 0 -4px $govuk-focus-text-colour;
border-color: transparent;
top: -1px;
margin-bottom: -2px;

9
app/assets/stylesheets/components/vendor/previous-next-navigation.scss vendored
View File

@@ -34,7 +34,7 @@ $is-ie: false !default;
margin-bottom: govuk-spacing(6);
margin-left: -1 * govuk-spacing(3);
margin-right: -1 * govuk-spacing(3);
overflow: hidden;
@include govuk-clearfix;
ul {
margin: 0;
@@ -55,11 +55,14 @@ $is-ie: false !default;
padding: govuk-spacing(3);
text-decoration: none;
&:hover,
&:active {
&:hover {
background-color: $canvas-colour;
}
&:focus {
background-color: $govuk-focus-colour;
}
.pagination-part-title {
@include core-27($line-height: (33.75 / 27));
display: block;

35
app/assets/stylesheets/govuk-frontend/_all.scss
View File

@@ -12,28 +12,39 @@ $govuk-compatibility-govukelements: true;
$govuk-assets-path: "/static/";
@import "settings/all";
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
@import "./focus/settings";
@import "tools/all";
@import "helpers/all";
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
@import "./focus/helpers";
@import "core/all";
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
@import "./focus/core";
@import "objects/all";
// section replacing @import 'components/all', specifying which components to include
@import 'components/skip-link/_skip-link';
@import 'components/header/_header';
@import 'components/footer/_footer';
@import 'components/back-link/_back-link';
@import 'components/button/_button';
@import 'components/details/_details';
@import 'components/radios/_radios';
@import 'components/checkboxes/_checkboxes';
@import 'components/input/_input';
// section replacing @import "components/all", specifying which components to include
@import "components/skip-link/_skip-link";
@import "components/header/_header";
@import "components/footer/_footer";
@import "components/back-link/_back-link";
@import "components/button/_button";
@import "components/details/_details";
@import "components/radios/_radios";
@import "components/checkboxes/_checkboxes";
@import "components/input/_input";
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
@import "./focus/components";
@import "utilities/all";
@import "overrides/all";
// Styles extending those from GOV.UK Frontend
@import './extensions';
@import "./extensions";
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
@import "./focus/extensions";
// Styles for GOV.UK Frontend components specific to this application
@import './overrides';
@import "./overrides";

200
app/assets/stylesheets/govuk-frontend/focus/components.scss Normal file
View File

@@ -0,0 +1,200 @@
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
//
// See the following for details of the update:
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
// - https://design-system.service.gov.uk/get-started/focus-states/
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
//
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
// Updates to skip-link component
.govuk-skip-link {
@include govuk-typography-common;
@include govuk-focusable-fill;
}
// Updates to header component
.govuk-header__link {
@include govuk-focusable-text-link;
}
.govuk-header__link--homepage {
// Remove any borders that show when focused and hovered.
&:focus {
border-bottom: 0;
}
}
// Updates to footer component
.govuk-footer__link {
text-decoration: none;
&:hover,
&:active {
text-decoration: underline;
}
@include govuk-focusable-text-link;
}
// Updates to back-link component
.govuk-back-link {
@include govuk-focusable-text-link;
// When the back link is focused, hide the bottom link border as the
// focus styles has a bottom border.
&:focus {
border-bottom-color: transparent;
}
}
// Updates to details component
.govuk-details__summary {
&:hover {
color: $govuk-link-hover-colour;
}
@include govuk-focusable-text-link;
}
// Remove the underline when focussed to avoid duplicate borders
.govuk-details__summary:focus .govuk-details__summary-text {
text-decoration: none;
}
.govuk-details__summary:before {
top: 0;
}
// Updates to buttons
.govuk-button {
&:focus {
border-color: $govuk-focus-colour;
// When colours are overridden, for example when users have a dark mode,
// backgrounds and box-shadows disappear, so we need to ensure there's a
// transparent outline which will be set to a visible colour.
// Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
@include govuk-not-ie8 {
outline: $govuk-focus-width solid transparent;
outline-offset: 0;
}
// Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
@include govuk-if-ie8 {
color: $govuk-text-colour;
background-color: $govuk-focus-colour;
}
box-shadow: inset 0 0 0 1px $govuk-focus-colour;
}
&:focus:not(:active):not(:hover) {
border-color: $govuk-focus-colour;
color: $govuk-text-colour;
background-color: $govuk-focus-colour;
box-shadow: 0 2px 0 $govuk-focus-text-colour;
}
}
// Updates to form inputs
.govuk-input {
&:focus {
// Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
// components such as textarea where we avoid changing `border-width` as
// it will change the element size. Also, `outline` cannot be utilised
// here as it is already used for the yellow focus state.
box-shadow: inset 0 0 0 $govuk-border-width-form-element;
}
}
.govuk-input--error {
&:focus {
border-color: $govuk-input-border-colour;
// Remove `box-shadow` inherited from `:focus` as `input--error`
// already has the thicker border.
box-shadow: none;
}
}
// Updates to form textareas (hacked to work with GOVUK Elements version)
.form-control {
@include govuk-focusable;
&:focus {
// Double the border by adding its width again. Use `box-shadow` to do
// this instead of changing `border-width` (which changes element size) and
// since `outline` is already used for the yellow focus state.
box-shadow: inset 0 0 0 $govuk-border-width-form-element;
}
}
.form-control-error {
&:focus {
border-color: $govuk-input-border-colour;
// Remove `box-shadow` inherited from `:focus` as `input--error`
// already has the thicker border.
box-shadow: none;
}
}
// Updates to form radios (hacked to work with GOVUK Elements version)
$govuk-radios-size: 40px;
// When the default focus width is used on a curved edge it looks visually smaller.
// So for the circular radios we bump the default to make it look visually consistent.
$govuk-radios-focus-width: $govuk-focus-width + 1px;
// ( ) Radio ring
.multiple-choice [type=radio] + label::before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: $govuk-radios-size;
height: $govuk-radios-size;
border: $govuk-border-width-form-element solid currentColor;
border-radius: 50%;
background: transparent;
}
// • Radio button
//
// We create the 'button' entirely out of 'border' so that they remain
// 'filled' even when colours are overridden in the browser.
.multiple-choice [type=radio] + label::after {
content: "";
position: absolute;
top: govuk-spacing(2);
left: govuk-spacing(2);
width: 0;
height: 0;
border: govuk-spacing(2) solid currentColor;
border-radius: 50%;
opacity: 0;
background: currentColor;
}
// Focused state (includes targeting for GOVUK radios, to apply version 3.x.x styles)
.multiple-choice [type=radio]:focus + label::before,
.govuk-radios__input:focus + .govuk-radios__label::before {
border-width: 4px;
// Since box-shadows are removed when users customise their colours 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;
box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
}
// Selected state
.multiple-choice [type=radio]:checked + label::after {
opacity: 1;
}
// Updates to form checkboxes
.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
border-width: 4px;
}

14
app/assets/stylesheets/govuk-frontend/focus/core.scss Normal file
View File

@@ -0,0 +1,14 @@
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
//
// See the following for details of the update:
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
// - https://design-system.service.gov.uk/get-started/focus-states/
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
//
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
// Hack to fix not being able to override the govuk-link-common mixin
.govuk-link {
@include govuk-focusable-text-link;
}

14
app/assets/stylesheets/govuk-frontend/focus/extensions.scss Normal file
View File

@@ -0,0 +1,14 @@
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
//
// See the following for details of the update:
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
// - https://design-system.service.gov.uk/get-started/focus-states/
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
//
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
// (for the error summary component, which we don't use yet)
.govuk-link--destructive:focus {
@include govuk-focusable-text-link;
}

31
app/assets/stylesheets/govuk-frontend/focus/helpers.scss Normal file
View File

@@ -0,0 +1,31 @@
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
//
// See the following for details of the update:
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
// - https://design-system.service.gov.uk/get-started/focus-states/
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
//
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
// and edited in https://github.com/alphagov/govuk-frontend/pull/1455
//
/// Focusable with box-shadow
///
/// Removes the visible outline and replace with box-shadow and background colour.
/// Used for interactive text-based elements.
@mixin govuk-focusable-text-link {
&:focus {
// When colours are overridden, for example when users have a dark mode,
// backgrounds and box-shadows disappear, so we need to ensure there's a
// transparent outline which will be set to a visible colour.
outline: $govuk-focus-width solid transparent;
color: $govuk-focus-text-colour;
background-color: $govuk-focus-colour;
box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
// When link is focussed, hide the default underline since the
// box shadow adds the "underline"
text-decoration: none;
}
}

11
app/assets/stylesheets/govuk-frontend/focus/settings.scss Normal file
View File

@@ -0,0 +1,11 @@
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
//
// See the following for details of the update:
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
// - https://design-system.service.gov.uk/get-started/focus-states/
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
//
// The new 'yellow' colour was added in https://github.com/alphagov/govuk-frontend/pull/1288
$govuk-focus-colour: #ffdd00; // assign new 'yellow' colour directly to limit impact of change

23
app/assets/stylesheets/views/dashboard.scss
View File

@@ -96,6 +96,29 @@
}
/* The focus state for sibling links overlaps the hint so the hint's text colour needs to adapt */
.govuk-link:focus {
&.file-list-filename,
&.file-list-filename-large,
& + .file-list-hint,
& + .file-list-hint-large {
/* link needs non-static position to overlap the cell border, hint so it isn't overlapped itself */
position: relative;
}
&.file-list-filename,
&.file-list-filename-large {
/* override box-shadow to push underline down a bit */
box-shadow: 0 -2px $govuk-focus-colour, 0 5px $govuk-focus-text-colour;
}
& + .file-list-hint,
& + .file-list-hint-large {
color: $govuk-focus-text-colour;
}
}
.failure-highlight {
@include bold-19;
color: $error-colour;

8
app/assets/stylesheets/views/product-page.scss
View File

@@ -47,11 +47,15 @@ $button-shadow-size: $govuk-border-width-form-element;
color: $white;
}
&:hover,
&:active {
&:hover {
color: $light-blue-25;
}
&:active,
&:focus {
color: $govuk-focus-text-colour;
}
}
}

10
app/assets/stylesheets/views/users.scss
View File

@@ -53,6 +53,11 @@ $item-top-padding: govuk-spacing(3);
margin: 0;
}
&:focus {
/* cancel default focus styling in favour of that from :before pseudo class */
box-shadow: none;
}
&:before {
content: "";
display: block;
@@ -69,14 +74,13 @@ $item-top-padding: govuk-spacing(3);
&:active:before,
&:focus:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px;
box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 16px $govuk-focus-colour, inset 3px 0px $govuk-focus-colour, inset 0px -15px $govuk-focus-colour, inset -3px 0px $govuk-focus-colour;
right: -3px;
left: -3px;
@include govuk-media-query($from: tablet) {
border-width: 15px 3px 15px 15px;
box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 16px $govuk-focus-colour, inset 15px 0px $govuk-focus-colour, inset 0px -15px $govuk-focus-colour, inset -3px 0px $govuk-focus-colour;
left: -15px;
}
}