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

querkmachine · 2023-06-09T16:09:49Z

Hover styles are currently not visible on 'small' checkbox and radio buttons in Windows High Contrast Mode, because the box-shadow property is ignored in High Contrast Mode.

This PR aims to fix that by also applying an outline attribute at the same time: transparent normally, but coloured in High Contrast Mode, so that a visual change still takes place on hover.

As outline is also used by the focus state, there is some possible overlap here, but given we additionally thicken the input border on focus, a visual distinction between hovered, focused, and simultaneously hovered and focused is retained.

Raised as a low vision usability issue by DAC in their recent audit of Frontend. Resolves #3695.

	Before	After
Checkbox (hovered)
Checkbox (focused)
Checkbox (hovered and focused)
Checkbox (hovered, focused and checked)
Radio (hovered)
Radio (focused)
Radio (hovered and focused)
Radio (hovered, focused and checked)

36degrees · 2023-06-12T14:03:14Z

Thanks for picking this up!

I do have some mild reservations about using Highlight as a colour for hover states. Similar to how we try to reserve yellow only for focus states, I think it would make sense to do the same for Highlight.

I'm wondering if we could explore a few alternative options, possibly using a thinner dotted or dashed outline could work? Given the limited palette and reduced feature set of forced colours mode, I'd also consider simplifying things by not trying to cover the focused + hovered state, and instead just letting the focus state 'win'.

I think it would be worth having this reviewed by @davidc-gds and a designer too to make sure they're happy with the changes.

querkmachine · 2023-06-19T11:40:26Z

I do have some mild reservations about using Highlight as a colour for hover states. Similar to how we try to reserve yellow only for focus states, I think it would make sense to do the same for Highlight.

In looking at the prior work (aka, Windows itself) in High Contrast Mode, it seems to be standard to use the Highlight colour for hovering. This is at least the case when hovering over checkboxes, radios, buttons, menu items, selects and toggles too.

Interestingly, this means our usage of the colours is inverted compared to the Windows default, which uses white for focus states and Highlight for hover.

dav-idc · 2023-06-19T11:57:14Z

this means our usage of the colours is inverted compared to the Windows default, which uses white for focus states and Highlight for hover.

Heya! Chiming in to give some thoughts that might help us make a decision, while not rethinking our entire high-contrast-mode focus and hover implementation.

In my view, a visible hover when using contrast themes (like Windows High Contrast Mode) in any format is better than no visible hover.

I am also thinking that some sort of visual change (dotted, dashed, thickness change) might satisfy that view though, as Ollie suggested.

querkmachine · 2023-06-19T12:00:16Z

Yep! Not planning to reverse everything we have currently, just an interesting thing I noticed whilst experimenting 😅

querkmachine · 2023-06-19T12:19:28Z

Updated the initial comment with a dashed line approach instead.

Note that I'm not applying any specific styles for the 'hovered and focused' states, this is just how they're turning out with the cascade the way it currently is, and documented for completion's sake.

querkmachine · 2023-06-28T16:59:39Z

@CharlotteDowns @christopherthomasdesign @Ciandelle Sorry for another ask, but any particular views on the dashed border look in the top comment?

christopherthomasdesign · 2023-06-29T15:42:55Z

Hey @querkmachine

I think I'm ok with this in theory, it's quite a neat solution to the problem and it maintains a feeling that moving from hover to focus adds more visual weight to the thing.

Are there any other components with hover states that should use this convention on high contrast mode too?

querkmachine · 2023-06-30T09:56:20Z

@christopherthomasdesign I'm not sure, myself. It was flagged in this specific instance because we provide a hover style normally to compensate for the radios and checkboxes having a small visual target, but a large actual target area. This affordance didn't exist in High Contrast Mode.

There are a few other elements that have a hover style normally but don't in High Contrast Mode, but they also don't have an invisible target area, so it's not precisely the same circumstances as here.

dav-idc · 2023-07-03T18:13:07Z

Based on this thread, it seems like there's agreement that this is a good solution that doesn't interfere with anything else. So I'd recommend we go for it! 👍

On @christopherthomasdesign's question about whether we have other hover-able interactive components where the hover isn't carrying over to the contrast-themed version (for example, when using Windows High Contrast Mode):

I've tested a few other components which might be worth considering, shown in the headings below
This feels like a larger exploration of hover states that might be better suited for after we wrap up this main radios / checkboxes hover piece

1. Button (Start)

Taken from this page: https://design-system.service.gov.uk/components/button/
(This is likely the case for all links styled as buttons)
On regular colours mode (not contrast themed), both the 'Start' button and the regular button get focus states. When contrast themed, the 'Start' button doesn't get a hover state change.

Regular button un-hovered:

Regular button hovered:

Start button un-hovered:

Start button hovered:

2. Accordion ('Show all' button)

Taken from this page: https://design-system.service.gov.uk/components/accordion/
On regular colours mode (not contrast themed), both the 'Show all' button and the individual accordion items get focus states. When contrast themed, the 'Show all' doesn't get a hover state change.

Accordion area un-hovered:

Accordion item hovered:

Accordion 'Show all sections' hovered:

3. Checkboxes

We already know this one (it's what this issues is about)

4. File upload

(This doesn't have a hover stat when contrast themed, but it's also a native browser control at the moment)

5. Radios

We already know this one (it's what this issues is about)

6. Select

Taken from this page: https://design-system.service.gov.uk/components/select/
Oddly, this one has a hover state when contrast themed with Windows High Contrast Mode, but it doesn't normally have a hover state.

Select un-hovered in high-contrast mode:

Select hovered in high-contrast mode:

Select un-hovered regularly:

Select hovered regularly:

7. Text input

We know these don't have hover states, in both contrast theme and regular theme.

8. Text area

We know these don't have hover states, in both contrast theme and regular theme.

dav-idc · 2023-07-03T18:26:42Z

@querkmachine sorry to add another thought right after that previous one.

For the states where there's multiple things happening at once, would it make sense to combine the focus/active and hover state properties?

So make the dotted 'hover' outline use the 'highlight' blue colour when:

Checkbox (hovered and focused)
Checkbox (hovered, focused and checked)
Radio (hovered and focused)
Radio (hovered, focused and checked)

It would look a bit like this for the checkbox:

And this for the radio:

querkmachine · 2023-07-04T08:15:07Z

@davidc-gds That seems a sensible change to me! Don't think it's too controversial either (I hope!)

Forced colour modes (like Windows High Contrast Mode) ignore the box-shadow styling we apply to small checkboxes and radio buttons on hover. This change adds an outline on hover too, so that a visual change still takes place upon hovering in High Contrast Mode.

christopherthomasdesign · 2023-07-04T08:28:20Z

Yeah all looks good to me 👍 thanks for the suggestions @davidc-gds 🙌

dav-idc

Now that we've switched to the dotted outline concept for the hover enhancements, this feels like an overall positive improvement for accessibility when using contrast themes. ✅

I can't speak fully to the code portion of this and would recommend getting a developer to review as well, but from a glance it looks to change what we want to change and doesn't do anything extra.

colinrotherham · 2023-07-04T12:01:24Z

packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss

@@ -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
+      @media screen and (forced-colors: active), (-ms-high-contrast: active) {


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

Thanks for adding prefixes still. Adding another mention for:

Improve support for Windows High Contrast Mode and Internet Explorer 11 #2293 (comment)

colinrotherham · 2023-07-04T12:02:19Z

packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss

@@ -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


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

colinrotherham

No blockers just some minor comments, looks brill 🙌

querkmachine requested a review from a team June 9, 2023 16:09

querkmachine self-assigned this Jun 9, 2023

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3777 June 9, 2023 16:10 Inactive

querkmachine changed the title ~~Add outlines to small checkboxes and radio buttons in High Contrast Mode~~ Fix hover style on small checkboxes and radio buttons in High Contrast Mode Jun 9, 2023

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3777 June 9, 2023 16:12 Inactive

querkmachine force-pushed the kg-radio-checkbox-outlines-high-contrast branch from 34d5b84 to 109fe7c Compare June 9, 2023 16:17

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3777 June 9, 2023 16:18 Inactive

querkmachine marked this pull request as ready for review June 9, 2023 16:27

querkmachine force-pushed the kg-radio-checkbox-outlines-high-contrast branch from 109fe7c to 3ce761f Compare June 9, 2023 16:48

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3777 June 9, 2023 16:49 Inactive

querkmachine requested a review from dav-idc June 19, 2023 09:06

querkmachine force-pushed the kg-radio-checkbox-outlines-high-contrast branch from 3ce761f to edb3e20 Compare June 19, 2023 12:57

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3777 June 19, 2023 12:57 Inactive

owenatgov added this to the v4.7.0 milestone Jun 23, 2023

owenatgov removed this from the v4.7.0 milestone Jun 29, 2023

querkmachine added 2 commits July 4, 2023 09:27

Update changelog

2e0ac10

querkmachine force-pushed the kg-radio-checkbox-outlines-high-contrast branch from edb3e20 to 2e0ac10 Compare July 4, 2023 08:27

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3777 July 4, 2023 08:27 Inactive

dav-idc approved these changes Jul 4, 2023

View reviewed changes

colinrotherham reviewed Jul 4, 2023

View reviewed changes

colinrotherham approved these changes Jul 4, 2023

View reviewed changes

querkmachine merged commit e925f2a into main Jul 4, 2023

querkmachine deleted the kg-radio-checkbox-outlines-high-contrast branch July 4, 2023 13:37

romaricpascal mentioned this pull request Dec 8, 2023

Release v5.0.0 #4540

Merged

anandamaryon1 mentioned this pull request Feb 15, 2024

Hover styling for inputs (radio, checkbox, text) nhsuk/nhsuk-service-manual-community-backlog#507

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

querkmachine commented Jun 9, 2023 •

edited

Loading

36degrees commented Jun 12, 2023

querkmachine commented Jun 19, 2023

dav-idc commented Jun 19, 2023

querkmachine commented Jun 19, 2023

querkmachine commented Jun 19, 2023

querkmachine commented Jun 28, 2023

christopherthomasdesign commented Jun 29, 2023

querkmachine commented Jun 30, 2023

dav-idc commented Jul 3, 2023 •

edited

Loading

dav-idc commented Jul 3, 2023 •

edited

Loading

querkmachine commented Jul 4, 2023

christopherthomasdesign commented Jul 4, 2023

dav-idc left a comment

colinrotherham Jul 4, 2023 •

edited

Loading

colinrotherham Jul 4, 2023

colinrotherham left a comment

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

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

Conversation

querkmachine commented Jun 9, 2023 • edited Loading

36degrees commented Jun 12, 2023

querkmachine commented Jun 19, 2023

dav-idc commented Jun 19, 2023

querkmachine commented Jun 19, 2023

querkmachine commented Jun 19, 2023

querkmachine commented Jun 28, 2023

christopherthomasdesign commented Jun 29, 2023

querkmachine commented Jun 30, 2023

dav-idc commented Jul 3, 2023 • edited Loading

1. Button (Start)

2. Accordion ('Show all' button)

3. Checkboxes

4. File upload

5. Radios

6. Select

7. Text input

8. Text area

dav-idc commented Jul 3, 2023 • edited Loading

querkmachine commented Jul 4, 2023

christopherthomasdesign commented Jul 4, 2023

dav-idc left a comment

Choose a reason for hiding this comment

colinrotherham Jul 4, 2023 • edited Loading

Choose a reason for hiding this comment

colinrotherham Jul 4, 2023

Choose a reason for hiding this comment

colinrotherham left a comment

Choose a reason for hiding this comment

querkmachine commented Jun 9, 2023 •

edited

Loading

dav-idc commented Jul 3, 2023 •

edited

Loading

dav-idc commented Jul 3, 2023 •

edited

Loading

colinrotherham Jul 4, 2023 •

edited

Loading