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

Fix hover style on small checkboxes and radio buttons in High Contrast Mode #3777

Merged
merged 2 commits into from
Jul 4, 2023
Merged

Fix hover style on small checkboxes and radio buttons in High Contrast Mode #3777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8eb93e
Add outlines to small radios and checkboxes
querkmachine Jun 9, 2023
2e0ac10
Update changelog
querkmachine Jun 9, 2023
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,7 @@ This change was introduced in [pull request #3773: Omit the value attribute from

We’ve made fixes to GOV.UK Frontend in the following pull requests:

- [#3777: Fix hover style on small checkboxes and radio buttons in High Contrast Mode](https://github.com/alphagov/govuk-frontend/pull/3777)
- [#3791: Refactor mobile menu button label/text handling](https://github.com/alphagov/govuk-frontend/pull/3791)
- [#3862: Fix focus style being overlapped by summary action links](https://github.com/alphagov/govuk-frontend/pull/3862)

Expand Down
8 changes: 8 additions & 0 deletions packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,10 @@
// feedback to the user as to which checkbox they will select when their
// cursor is outside of the visible area.
.govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
// Forced colours modes tend to ignore box-shadow.
// Apply an outline for those modes to use instead.
outline: $govuk-focus-width dashed transparent;
outline-offset: 1px;
box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
}

Expand All @@ -282,6 +286,10 @@
// We use two box shadows, one that restores the original focus state [1]
// and another that then applies the hover state [2].
.govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
// Set different HCM colour when we have both hover/focus applied at once
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need this boilerplate comment from other places Hightlight is used?

// When in an explicit forced-color mode, we can use the Highlight system
// color for the outline to better match focus states of native controls

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
Copy link
Contributor

@colinrotherham colinrotherham Jul 4, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Double checked to see if Autoprefixer does it now (just in case) but no.

Thanks for adding prefixes still. Adding another mention for:

outline-color: Highlight;
}
box-shadow:
0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
Expand Down
8 changes: 8 additions & 0 deletions packages/govuk-frontend/src/govuk/components/radios/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,10 @@
// feedback to the user as to which radio they will select when their
// cursor is outside of the visible area.
.govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
// Forced colours modes tend to ignore box-shadow.
// Apply an outline for those modes to use instead.
outline: $govuk-radios-focus-width dashed transparent;
outline-offset: 1px;
box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
}

Expand All @@ -302,6 +306,10 @@
// We use two box shadows, one that restores the original focus state [1]
// and another that then applies the hover state [2].
.govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
// Set different HCM colour when we have both hover/focus applied at once
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
outline-color: Highlight;
}
box-shadow:
0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
Expand Down