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

[Spike] Option 2: Remove existing mixins, and include a new mixin for links only. #1355

Closed
wants to merge 1 commit into from
Closed

[Spike] Option 2: Remove existing mixins, and include a new mixin for links only. #1355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/components/accordion/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
// 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;
outline-offset: 0;
outline-offset: $govuk-focus-offset;
color: $govuk-text-colour;
// sass-lint:disable indentation
box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-focus-colour,
Expand Down Expand Up @@ -202,7 +202,7 @@
// We also want to avoid styling when the secttion is pressed or `:active`
// to avoid the different focus styles from flashing quickly while the user interacts with the section.
.govuk-accordion__section:not(.govuk-accordion__section--expanded) .govuk-accordion__section-button:focus:not(:active) {
@include govuk-focusable-text;
@include govuk-focused-text;
}

.govuk-accordion__controls {
Expand Down
2 changes: 1 addition & 1 deletion src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
// 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;
outline-offset: $govuk-focus-offset;
}
// Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
@include govuk-if-ie8 {
Expand Down
4 changes: 3 additions & 1 deletion src/components/details/_details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@
color: $govuk-link-hover-colour;
}

@include govuk-focusable-text-link;
&:focus {
@include govuk-focused-text;
}
}

// ...but only underline the text, not the arrow
Expand Down
11 changes: 6 additions & 5 deletions src/components/error-summary/_error-summary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,13 @@
@include govuk-text-colour;
@include govuk-responsive-padding(4);
@include govuk-responsive-margin(8, "bottom");
@include govuk-focusable;

border: $govuk-border-width solid $govuk-error-colour;

&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: $govuk-focus-offset;
}
}

.govuk-error-summary__title {
Expand All @@ -38,7 +42,6 @@
}

.govuk-error-summary__list a {
@include govuk-focusable-text-link;
@include govuk-typography-weight-bold;

// Override default link styling to use error colour
Expand All @@ -49,10 +52,8 @@
color: $govuk-error-colour;
}

// When focussed, the text colour needs to be darker to ensure that colour
// contrast is still acceptable
&:focus {
color: $govuk-focus-text-colour;
@include govuk-focused-text;
}
}

Expand Down
5 changes: 3 additions & 2 deletions src/components/file-upload/_file-upload.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
.govuk-file-upload {
@include govuk-font($size: 19);
@include govuk-text-colour;
@include govuk-focusable;
padding-top: $component-padding;
padding-bottom: $component-padding;

Expand All @@ -23,6 +22,8 @@
margin-left: -$component-padding;
padding-right: $component-padding;
padding-left: $component-padding;
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: $govuk-focus-offset;
// Use `box-shadow` to add border instead of changing `border-width`
// (which changes element size) and since `outline` is already used for the
// yellow focus state.
Expand All @@ -47,7 +48,7 @@

// Emulate `govuk-focusable` mixin styles for this component in FF
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: 0;
outline-offset: $govuk-focus-offset;

box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
}
Expand Down
4 changes: 3 additions & 1 deletion src/components/footer/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,9 @@
}
}

@include govuk-focusable-text-link;
&:focus {
@include govuk-focused-text;
}

// alphagov/govuk_template includes a specific a:link:focus selector
// designed to make unvisited links a slightly darker blue when focussed, so
Expand Down
10 changes: 4 additions & 6 deletions src/components/header/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,8 @@
text-decoration: underline;
}

@include govuk-focusable-text-link;

// When focussed, the text colour needs to be darker to ensure that colour
// contrast is still acceptable
&:focus {
color: $govuk-focus-text-colour;
@include govuk-focused-text;
}

// alphagov/govuk_template includes a specific a:link:focus selector
Expand Down Expand Up @@ -176,7 +172,9 @@
margin-left: govuk-spacing(1);
}

@include govuk-focusable;
&:focus {
@include govuk-focused-text;
}

@include mq ($from: tablet) {
top: govuk-spacing(3);
Expand Down
3 changes: 2 additions & 1 deletion src/components/input/_input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
@include govuk-exports("govuk/component/input") {
.govuk-input {
@include govuk-font($size: 19);
@include govuk-focusable;

box-sizing: border-box;
width: 100%;
Expand All @@ -26,6 +25,8 @@
appearance: none;

&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: $govuk-focus-offset;
// 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
Expand Down
3 changes: 2 additions & 1 deletion src/components/select/_select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
@include govuk-exports("govuk/component/select") {
.govuk-select {
@include govuk-font($size: 19, $line-height: 1.25);
@include govuk-focusable;

box-sizing: border-box; // should this be global?
max-width: 100%;
Expand All @@ -18,6 +17,8 @@
border: $govuk-border-width-form-element solid $govuk-input-border-colour;

&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: $govuk-focus-offset;
// 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.
Expand Down
7 changes: 6 additions & 1 deletion src/components/skip-link/_skip-link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
.govuk-skip-link {
@include govuk-visually-hidden-focusable;
@include govuk-typography-common;
@include govuk-focusable-fill;
@include govuk-link-style-text;
@include govuk-typography-responsive($size: 16);

Expand All @@ -23,5 +22,11 @@
padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
}

&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: $govuk-focus-offset;
background-color: $govuk-focus-colour;
}
}
}
3 changes: 2 additions & 1 deletion src/components/textarea/_textarea.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
@include govuk-exports("govuk/component/textarea") {
.govuk-textarea {
@include govuk-font($size: 19, $line-height: 1.25);
@include govuk-focusable;

box-sizing: border-box; // should this be global?
display: block;
Expand All @@ -26,6 +25,8 @@
-webkit-appearance: none;

&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: $govuk-focus-offset;
// 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.
Expand Down
48 changes: 2 additions & 46 deletions src/helpers/_focusable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,15 @@
/// @group helpers
////

/// Focusable helper
///
/// Provides an additional outline to clearly indicate when the target element is
/// focussed. Used for interactive elements which themselves have some background
/// or border, such as most form elements.
///
/// @access public

@mixin govuk-focusable {
&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: 0;
}
}

/// Focusable with fill helper
///
/// Provides an additional outline and background colour to clearly indicate when
/// the target element is focussed. Used for interactive text-based elements such
/// as links.
///
/// @access public

@mixin govuk-focusable-fill {
&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: 0;
background-color: $govuk-focus-colour;
}
}

@mixin govuk-focusable-text {
@mixin govuk-focused-text {
// 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;
outline-offset: $govuk-focus-offset;
}
color: $govuk-text-colour;
background-color: $govuk-focus-colour;
Expand All @@ -55,16 +24,3 @@
// box shadow adds the "underline"
text-decoration: none;
}

/// Focusable with box-shadow
///
/// Removes the visible outline and replace with box-shadow and background colour.
/// Used for interactive text-based elements.
///
/// @access public

@mixin govuk-focusable-text-link {
&:focus {
@include govuk-focusable-text;
}
}
5 changes: 4 additions & 1 deletion src/helpers/_links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@

@mixin govuk-link-common {
@include govuk-typography-common;
@include govuk-focusable-text-link;

&:focus {
@include govuk-focused-text;
}
}

/// Default link style mixin
Expand Down
2 changes: 2 additions & 0 deletions src/settings/_measurements.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,8 @@ $govuk-border-width-form-group-error: $govuk-border-width !default;

$govuk-focus-width: 3px !default;

$govuk-focus-offset: 0 !default;

/// Hover width for form controls with a hover state
///
/// @type Number
Expand Down