Add smaller versions of radio buttons and checkboxes

[dashouse]

Introduces smaller versions of the radios and checkboxes components.

Despite being visually smaller, these have a target size of 44 x 44px, as the input extends outside of the boundaries of the visual control.

To make it clear which control will be activated when hovering in the gap between the controls, we add a hover state.

This PR also simplifies the way that existing checkboxes and radio buttons are rendered in IE8 and increases the touch area of the existing radios and checkboxes to 44x44px.

👉Checkbox examples in the review app
👉Radio examples in the review app
👉Radios and checkboxes, big and small, in all the states
👉A contrived example

Browser and assistive technology testing

• Internet Explorer 8 (Windows 7, Browserstack)
• Internet Explorer 9 (Windows 7, Browserstack)
• Internet Explorer 10 (Windows 8, Browserstack)
• Internet Explorer 11 (Windows 10, Browserstack)
• Edge 18 (Windows 10, Browserstack)
• Edge 17 (Windows 10, Browserstack)
• Google Chrome 73 (mac)
• Mozilla Firefox 65 (mac)
• Safari 12 (mac)
• Safari 11 (mac, Browserstack)
• Safari 10 (mac, Browserstack)
• Safari 9.1 (mac, Browserstack)
• Safari (iOS 12, iPhone X)
• Google Chrome (iOS 12, iPhone X)
• Safari (iOS 11, iPhone X, Browserstack)
• Safari (iOS 10, iPhone 5c)
• Safari (iOS 9.3, iPhone 5)
• Safari (iOS 7, iPhone, iPhone 4)
• Google Chrome, Android 9, Browserstack
• Google Chrome, Android 8, Browserstack
• Samsung Internet, Android 8, Browserstack
• Samsung Internet, Android 7, Browserstack
• Google Chrome 73 - mixed input modes (Chromebook)
• Google Chrome 73 - 400% zoom (macOS)
• Internet Explorer 11 - high contrast mode (Windows 10)
• Internet Explorer 11 - ZoomText (Windows 10)
• Internet Explorer 11 - 400% zoom (Windows 10, Browserstack)
• Internet Explorer 11 - larger text (Windows 10, Browserstack)
• Mozilla Firefox 65 – custom colours (mac)
• Mozilla Firefox 65 – night mode (iOS)

Physical device testing

Chrome 69, Android 7.0 (Galaxy S6)

Works as expected

Chrome 50, Android 5.1.1 (Nexus 10 tablet)

Works as expected

Chrome 71, Android 4.4.2 (Galaxy Note 2)

Tested with stylus and touch. Worked as expected

Android Browser, Android 4.4.2 (Galaxy Note 2)

The stylus triggers hover style
Touch triggers the hover style, and clicking once triggers hover style then after a delay triggers the click. Not ideal but still usable.

Android 2.2 (Galaxy S)

Radios are square – seemingly no support for border-radius – an existing issue.
Small hidden element highlighted on tap. Hover state not visible.

Safari, iOS 10.3.2 (iPhone 5C)

Works as expected

Safari, iOS 9.3.2 (iPhone 5)

Works as expected

Safari, iOS 7.1.2 (iPhone 4)

Hover state is visible and 'sticks', but clicking once still triggers the control

Internet Explorer, Windows Phone 8.1 (Lumia 630)

Works as expected

Screenshots

Chrome 70 (macOS Mojave)

Chrome 70 (Windows 10)

Chrome 71 (macOS Mojave)

Chrome 71 (Windows 10)

Firefox 62 (macOS Mojave)

Firefox 62 (Windows 10)

Safari 9.1 (OS X El Capitan)

Safari 10.1 (macOS Sierra)

Safari 11.1 (macOS High Sierra)

Safari 12 (macOS Mojave)

Internet Explorer 8 (Windows 7)

Internet Explorer 9 (Windows 7)

Internet Explorer 10 (Windows 8)

Internet Explorer 11 (Windows 10)

Edge 18 (Windows 10)

Android 7.1 (Google Pixel)

Android 8.0 (Google Pixel 2)

Android 9.0 (Google Pixel 2)

iOS 8.3 (iPhone 6)

iOS 10 (iPhone 7)

iOS 11 (iPhone 8)

iOS 12 (iPhone XR)

Known issues

The hover state 'sticks' on devices that support both touch and pointer based interaction, such as Chromebooks and Surfaces.

Video showing issue

If you try to use a hint with the smaller radios and checkboxes, moving the cursor over the hint will trigger the hover state, but clicking the hint won't actually select the control.

Video showing issue

[joelanman]

Nice work Dave! Feels pretty good on mobile Chrome. After selecting, the hover colour remains, is that expected?

[NickColley]

@dashouse can you explain the technical requirement to have them block?

[NickColley]

@joelanman this could be the same issue we saw when we looked to add ghost hover states before: alphagov/govuk_elements#570 (comment)

[dashouse]

Updated with a quick override class to block the hover state for the second example to see how we feel about the difference.

@joelanman Hover colour should not remain no... I wasn't seeing this initially on iOS, but I don't see the normal focus either

@NickColley It's hard to explain in words, but also near impossible to screenshot because of the cursors but... the .govuk-radios__item is hovered in order to add the box shadow...if we make the .govuk-radios__label inline-block then the hover state appears when .govuk-radios__item is hovered when away from the label. The checkbox or radio isn't actually selectable but the hover state gives a false impression that it could be. I may have to show you.

[NickColley]

I think... if you do, it works as we want?

.govuk-checkboxes--small .govuk-checkboxes__label {
-   display: block;
-   margin-top: -2px;
    padding: 11px 15px 9px 0;
}
.govuk-checkboxes--small .govuk-checkboxes__item {
    min-height: 0;
    padding-left: 35px;
+   float: left;
+   margin-top: -2px;
}

[dashouse]

I think... if you do, it works as we want?

.govuk-checkboxes--small .govuk-checkboxes__label {
-   display: block;
-   margin-top: -2px;
    padding: 11px 15px 9px 0;
}
.govuk-checkboxes--small .govuk-checkboxes__item {
    min-height: 0;
    padding-left: 35px;
+   float: left;
+   margin-top: -2px;
}

Yes, this is perfect 👍

[NickColley]

I wonder if 'pointer-events: none' would ensure it doesnt trigger the hover state...

[36degrees]

I'd had a similar thought, but sadly not, as the pointer events just 'go through' the hint and find the label.

[hannalaakso]

Great work everyone 🙌

[aliuk2012]

Addresses alphagov/govuk-design-system-backlog#162