Add a hover state for radios and checkboxes

[robinwhittleton]

This gives radio buttons and checkboxes a faint grey hover state, except in the following situations:

1. Where the input is already selected
2. Where the input is disabled
3. Where the user is on a mobile device (Android Chrome, iOS9.1+)

We originally had this as part of the initial custom radios / checkboxes work, but it was removed. The @media hover block wasn’t supported in iOS 9.0 and lower, and without that support ghost checkmarks would remain in place after unchecking them. This was decided to be too off-putting to warrant inclusion. Now that GOV.UK’s browsers and devices page suggests that iOS 9.3+ can be considered a reasonable minimum, we can consider adding hover back in again as a usability enhancement.

Fixes #357 .

How has this been tested?

Tested in latest Firefox, Chrome and iOS11 (Simulator). There’s nothing particularly complicated here, and I can’t see any particular problems with support for this. Firefox for Android, IE mobile and iOS9.0 and lower don’t support the hover media query, so unchecking a checkbox will leave a ghost checkmark in place until another click happens elsewhere in the page. The usage of these browsers will need to be balanced against the usability enhancement for other browsers. IE9+ should support all the main CSS here without problem.

Screenshots (if appropriate):

This is the behaviour with the patch:

What type of change is it?

• New feature (non-breaking change which adds functionality)

[NickColley]

Following the launch of the GOV.UK Design System, GOV.UK Elements will now only get major bug fixes and security patches.

I spoke to @timpaul about this, to see if this is something we should consider for the GOV.UK Design System.

Since this is an interesting addition to these components but since this does not seem to be backed by research we're going to close this out and consider it for the future if the need arises.

That said this work is great, thanks for taking the time to contribute.