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.

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

Custom radios / checkboxes #296

Merged
merged 15 commits into from Nov 18, 2016

Conversation

@robinwhittleton
Copy link
Contributor

commented Aug 27, 2016

This requires no change to the existing HTML: the custom inputs are built using pseudoelements. In a no-JS / no-CSS / IE8 scenario it falls back to standard inputs. To style the radio and checkboxes differently a class is needed on the label - this is automatically added by the new SelectionButton JS.

This is partially based on Verify’s styles, and updates a design by @timpaul and @joelanman inspired by observations from user research and lots of requests from @cjforms. The inputs are sized to match the height of text inputs.

Image showing the design of the new radio buttons and checkboxes

Tested on:

  • IE 7-11
  • Edge 14
  • OS X Firefox 48
  • OS X Chrome 51
  • OS X Safari 9
  • iOS Safari 5.0 - 9.1
  • Android 4.4+ Chrome

Android Browser on BrowserStack’s Nexus 4 (4.2) is massively unresponsive and doesn’t seem to let you click on the radios most of the time. It will need to be tested on a real device.

Would absolutely love any feedback.

  • Base implementation + testing
  • Check that this works with click events in Selenium (testing in verify indicated possible problems)
  • Make it use currentColor for compatibility with custom colour themes
  • Make the pseudo-elements permanent and just repaint the background colour on state change
  • Add a translucent hover state
  • Test in old Android devices
  • Fix general problems with Dragon Naturally Speaking 13 on IE11 (Dragon 12.5 is fine)
  • Padding no longer exists after legends - investigate recommended changes

@robinwhittleton robinwhittleton changed the title Initial implementation of custom radios / checkboxes Custom radios / checkboxes Aug 27, 2016

@robinwhittleton robinwhittleton force-pushed the custom-radios branch 2 times, most recently from de67f1d to c756b54 Aug 27, 2016

@joelanman

This comment has been minimized.

Copy link
Member

commented Aug 27, 2016

Tim Paul and me :)

@robinwhittleton

This comment has been minimized.

Copy link
Contributor Author

commented Aug 27, 2016

Oops! Fixed.

@paulmsmith

This comment has been minimized.

Copy link

commented Aug 27, 2016

Nice

@nickcolley

This comment has been minimized.

Copy link
Contributor

commented Aug 27, 2016

Might be worth marking as [Do not merge] since it relies on the upstream addition to selection buttons?

image

Be good to test this out on some real devices, looks good.

@robinwhittleton robinwhittleton changed the title Custom radios / checkboxes Custom radios / checkboxes [DO NOT MERGE] Aug 27, 2016

@nickcolley

This comment has been minimized.

Copy link
Contributor

commented Aug 27, 2016

Some interesting information around touch sizes http://www.lukew.com/ff/entry.asp?1085 , might be relevant :P

@robinwhittleton robinwhittleton force-pushed the custom-radios branch from c756b54 to de5098c Aug 27, 2016

@robinwhittleton

This comment has been minimized.

Copy link
Contributor Author

commented Aug 27, 2016

Interesting research! The actual input has increased in height from 29px to 37px, but as we’ve removed the grey background it no longer needs the padding which means that the overall height of the hit area has gone down from 60px to 37px. As long as people are still trying to press on the control maybe that’s not a problem though.

@joelanman

This comment has been minimized.

Copy link
Member

commented Aug 27, 2016

this work comes from user research that shows that in general people don't know the grey area is the hit box. so while the actual hit box is reduced, the perceived hit box is increased.

also worth noting that, at least in Chrome on OSX, our current radios aren't actually 29px (perceived)

image

@robinwhittleton

This comment has been minimized.

Copy link
Contributor Author

commented Aug 28, 2016

Just remembered, I also want to get @cfq / @accessiblewebuk / @aduggin’s seal of approval on this before we merge, or at least before we do a release.

@aduggin

This comment has been minimized.

Copy link
Contributor

commented Aug 29, 2016

@robinwhittleton Can you make a rendered version available on a public url (for example, in the sandbox) so we can get it fully tested?

@joelanman

This comment has been minimized.

Copy link
Member

commented Aug 29, 2016

Why does it need to fall back to default inputs in a no js situation?

@robinwhittleton

This comment has been minimized.

Copy link
Contributor Author

commented Aug 29, 2016

<input /> is an empty element: it can’t have pseudo-elements because there is text content for a ::before to be before or an ::after to be after. Therefore if we want to keep the same HTML structure we need to attach out pseudo-elements to the parent label. That poses a problem – we can’t style the parent based on child state (currently) so we need to base our pseudo-element styles on the classes that SelectionButtons applies. If we don’t have these classes then the fake inputs will be able to display their selected state, so we need to make sure that they don’t show up in the absence of JavaScript.

@cjforms

This comment has been minimized.

Copy link

commented Aug 30, 2016

Based on a design by @timpaul and @joelanman, (and as @joelanman pointed out) inspired by observations from user research. Plus lots of requests from me.

@edwardhorsford

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2016

Is this deployed anywhere we can try?

What do these do on hover?
What do these look like with focus?

Any thoughts on the below hover effect? (stolen from @selfthinker)
verify_radios_with_hover

@robinwhittleton

This comment has been minimized.

Copy link
Contributor Author

commented Aug 30, 2016

Is this deployed anywhere we can try?

Not yet.

What do these do on hover?

No change. I like @selfthinker’s idea. What would you want to do with checkbox hover states?

What do these look like with focus?

Due to removal of padding I went for outline of the element (square with checkboxes):
Demo of outline

@edwardhorsford

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2016

@robinwhittleton It's something I'd want to try in user research. I suspect you could do a greyed out tick on hover. I think once the radio or checkbox has been checked, hovering over it should not show the greyed symbol.

An alternate would be to show a hover effect that is not the same as the tick or dot and could work whether the control was selected or not. Something like changing the white ring for a grey ring, or grey inner-stroke.


Seperately - how do these work for people who use css to adjust contrast / change colours?

@robinwhittleton

This comment has been minimized.

Copy link
Contributor Author

commented Aug 30, 2016

It’s worth having the conversation about contrast issues, but my gut feeling is that browser-default checkboxes and radios already don’t respond to setting user colours?

@edwardhorsford

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2016

@robinwhittleton My worry is especially about something like this happening:
screen shot 2016-08-30 at 12 13 09

Where the controls themselves disappear rather than being the wrong style.

Chatting with @nickcolley on Slack, it sounds like we may have a solution?

@nickcolley

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2016

The idea I put forward on slack was to remove the white background from the input and allow the colour to be defined by the text color of the label.

image
image

In the above examples the container I set the background-color and color and you can see the changes reflect properly when using currentColor and removing the background from the input.

Might be some edge cases I've not thought about though..

@robinwhittleton

This comment has been minimized.

Copy link
Contributor Author

commented Aug 30, 2016

Hmm. That generally works. I think on Verify start page we’d want to keep the white background though.

verify-radio-background

But that can be an override for specific situations.

@edwardhorsford

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2016

@robinwhittleton The current live verify radios do not work if the user has custom colours set (using firefox). Clicking on the option does nothing (visually). Where can I raise this?
screen shot 2016-08-30 at 14 07 54

@robinwhittleton

This comment has been minimized.

Copy link
Contributor Author

commented Aug 30, 2016

New issue on verify-frontend? The fix might be to complete this PR though and merge that in.

@tombye

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2016

This is ace, thanks Robin. Minor question: is the js-enabled class needed in the selectors?

I might be missing something but I think the styles can all be based off the selection-button-radio and selection-button-checkbox classes which are only applied if the JS for that runs anyway. If that's the case it would be nice to hang these styles off that rather than being dependant on the user having JS at all.

@robinwhittleton

This comment has been minimized.

Copy link
Contributor Author

commented Aug 30, 2016

For the most part that wouldn’t be a problem, but imagine this situation:

  1. Developer copies HTML from an existing service by opening devtools and right-click / Copy HTML on a node.
  2. Developer then pastes that rendered HTML (which includes selection-button-radio) into a new place and changes the name and text of the radio and label.
  3. Developer doesn’t notice any difference as the JS is applying that class anyway.
  4. User without JS finds a custom radio button and no way of selecting it.

Obviously good developers should test with JS disabled, but it’s easy for something to slip through. Wrapping all of this in a .js-enabled is being a little more defensive.

@tombye

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2016

Makes sense.

Fix radios in Windows high contrast mode
Windows has a high contrast theme that sets borders and background to different colours. In our case we’ve rendered the custom checkboxes using only borders, so that’s fine. The custom radio however has its outline rendered with a border, but the bullet rendered with a background. In high contrast mode the bullet was black-on-black and wasn’t showing.

We can fix this by rendering the bullet with borders instead. We just set a width and height of 0, then make the border 10px thick on every side.

Tested in IE8+, Fx, Chrome, old iOS Safari and IE Mobile.

@gemmaleigh gemmaleigh force-pushed the custom-radios branch from 6f6a1b0 to 4e50e9b Nov 18, 2016

@gemmaleigh

This comment has been minimized.

Copy link
Contributor

commented Nov 18, 2016

Thanks for all your work on this @robinwhittleton and to everyone else who contributed and offered advice.

We'll release an update to govuk_elements for custom radio buttons and checkboxes today and update the govuk_prototype_kit to include them too.

@gemmaleigh gemmaleigh merged commit 0fcc699 into master Nov 18, 2016

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

robinwhittleton pushed a commit that referenced this pull request Nov 18, 2016

Robin Whittleton
v2.2.0
- New radio buttons and checkboxes (PR #296)

You will need to make sure that your version of the GOV.UK Frontend Toolkit is at least 4.17.0.
@robinwhittleton robinwhittleton referenced this pull request Nov 18, 2016

@robinwhittleton robinwhittleton deleted the custom-radios branch Nov 18, 2016

Guntrisoft added a commit to guidance-guarantee-programme/pension_guidance that referenced this pull request Dec 2, 2016

Update govuk_elements to version 2.2.1
- made some minor adjustments to form to look good with
  new radio/checkbox styles
- removed field_with_errors wrapping div which
  conflicts with new radio/checkbox JS modules

Full list of changes:

Remove the images path override from the helpers partial
alphagov/govuk_elements#292

Bump govuk frontend toolkit to 4.16.1
alphagov/govuk_elements#288

Form validation patterns for conditionally revealing content
alphagov/govuk_elements#286

Centre text on full-width buttons
alphagov/govuk_elements#289

Lint JS code using StandardJS
alphagov/govuk_elements#290

Update govuk_frontend_toolkit to 5.0.0 and govuk_template to 0.19.0
alphagov/govuk_elements#333

Add a select box example
alphagov/govuk_elements#303

Add bullet points describing use of disabled buttons
alphagov/govuk_elements#304

Add reasoning for native over custom file inputs

Clear floats on details elements
alphagov/govuk_elements#328

Add a .bold utility class
alphagov/govuk_elements#321

Remove external link styles
alphagov/govuk_elements#274

Remove rounded corners on form inputs elements and textareas in iOS
alphagov/govuk_elements#342

Fix focus outline on form fields in Chrome / Safari
alphagov/govuk_elements#346

Updates the contribution guidelines
alphagov/govuk_elements#339

Recommend .visually-hidden over .visuallyhidden
alphagov/govuk_elements#341

Add snippets for data visualisation examples
alphagov/govuk_elements#350
alphagov/govuk_elements#351

Fix the grey left hand border example for Radios and checkboxes
alphagov/govuk_elements#349

Fix the spacing underneath the "inline" block label example
alphagov/govuk_elements#348

Custom radios / checkboxes
alphagov/govuk_elements#296

Fix contrast issues with phase banners. Use $govuk-blue for the phase tag and update the examples
alphagov/govuk_elements#364

Guntrisoft added a commit to guidance-guarantee-programme/pension_guidance that referenced this pull request Dec 5, 2016

Update govuk_elements to version 2.2.1
- made some minor adjustments to form to look good with
  new radio/checkbox styles
- removed field_with_errors wrapping div which
  conflicts with new radio/checkbox JS modules

Full list of changes:

Remove the images path override from the helpers partial
alphagov/govuk_elements#292

Bump govuk frontend toolkit to 4.16.1
alphagov/govuk_elements#288

Form validation patterns for conditionally revealing content
alphagov/govuk_elements#286

Centre text on full-width buttons
alphagov/govuk_elements#289

Lint JS code using StandardJS
alphagov/govuk_elements#290

Update govuk_frontend_toolkit to 5.0.0 and govuk_template to 0.19.0
alphagov/govuk_elements#333

Add a select box example
alphagov/govuk_elements#303

Add bullet points describing use of disabled buttons
alphagov/govuk_elements#304

Add reasoning for native over custom file inputs

Clear floats on details elements
alphagov/govuk_elements#328

Add a .bold utility class
alphagov/govuk_elements#321

Remove external link styles
alphagov/govuk_elements#274

Remove rounded corners on form inputs elements and textareas in iOS
alphagov/govuk_elements#342

Fix focus outline on form fields in Chrome / Safari
alphagov/govuk_elements#346

Updates the contribution guidelines
alphagov/govuk_elements#339

Recommend .visually-hidden over .visuallyhidden
alphagov/govuk_elements#341

Add snippets for data visualisation examples
alphagov/govuk_elements#350
alphagov/govuk_elements#351

Fix the grey left hand border example for Radios and checkboxes
alphagov/govuk_elements#349

Fix the spacing underneath the "inline" block label example
alphagov/govuk_elements#348

Custom radios / checkboxes
alphagov/govuk_elements#296

Fix contrast issues with phase banners. Use $govuk-blue for the phase tag and update the examples
alphagov/govuk_elements#364

Guntrisoft added a commit to guidance-guarantee-programme/pension_guidance that referenced this pull request Dec 5, 2016

Update govuk_elements to version 2.2.1
- made some minor adjustments to form to look good with
  new radio/checkbox styles

Full list of changes:

Remove the images path override from the helpers partial
alphagov/govuk_elements#292

Bump govuk frontend toolkit to 4.16.1
alphagov/govuk_elements#288

Form validation patterns for conditionally revealing content
alphagov/govuk_elements#286

Centre text on full-width buttons
alphagov/govuk_elements#289

Lint JS code using StandardJS
alphagov/govuk_elements#290

Update govuk_frontend_toolkit to 5.0.0 and govuk_template to 0.19.0
alphagov/govuk_elements#333

Add a select box example
alphagov/govuk_elements#303

Add bullet points describing use of disabled buttons
alphagov/govuk_elements#304

Add reasoning for native over custom file inputs

Clear floats on details elements
alphagov/govuk_elements#328

Add a .bold utility class
alphagov/govuk_elements#321

Remove external link styles
alphagov/govuk_elements#274

Remove rounded corners on form inputs elements and textareas in iOS
alphagov/govuk_elements#342

Fix focus outline on form fields in Chrome / Safari
alphagov/govuk_elements#346

Updates the contribution guidelines
alphagov/govuk_elements#339

Recommend .visually-hidden over .visuallyhidden
alphagov/govuk_elements#341

Add snippets for data visualisation examples
alphagov/govuk_elements#350
alphagov/govuk_elements#351

Fix the grey left hand border example for Radios and checkboxes
alphagov/govuk_elements#349

Fix the spacing underneath the "inline" block label example
alphagov/govuk_elements#348

Custom radios / checkboxes
alphagov/govuk_elements#296

Fix contrast issues with phase banners. Use $govuk-blue for the phase tag and update the examples
alphagov/govuk_elements#364

teneightfive added a commit to nhsuk/betahealth that referenced this pull request Jan 18, 2017

Update selection button
Some changes had been made to the base we used for selection buttons
from GDS. This PR documents a lot of the considerations that were
made during developing this component:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 7, 2017

Bring in new checkbox/radio styles
We're following the lead set by govuk_elements.  No more background,
but a bigger hit area for checkboxes and radio buttons.

Also needed a change to our `selected` classname because that's
how these new inputs are driven.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 7, 2017

Bring in govuk_elements text input styles
Similar to the radios and checkboxes, govuk_elements have added new
styles that increase the contrast of our form elements.

Worth noting that we're explicitly _not_ bringing in spacing-related
styles because we're Digital Marketplace and we do things
differently here.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 7, 2017

Bring in govuk_elements' checkbox/radio styles
We're following the lead set by govuk_elements.  No more background,
but a bigger hit area for checkboxes and radio buttons.

Also needed a change to our `selected` classname because that's
how these new inputs are driven.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 7, 2017

Bring in govuk_elements' text input styles
Similar to the radios and checkboxes, govuk_elements have added new
styles that increase the contrast of our form elements.

Worth noting that we're explicitly _not_ bringing in spacing-related
styles because we're Digital Marketplace and we do things
differently here.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 7, 2017

Bring in govuk_elements' checkbox/radio styles
We're following the lead set by govuk_elements.  No more background,
but a bigger hit area for checkboxes and radio buttons.

Also needed a change to our `selected` classname because that's
how these new inputs are driven.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 7, 2017

Bring in govuk_elements' text input styles
Similar to the radios and checkboxes, govuk_elements have added new
styles that increase the contrast of our form elements.

Worth noting that we're explicitly _not_ bringing in spacing-related
styles because we're Digital Marketplace and we do things
differently here.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 8, 2017

Bring in govuk_elements' checkbox/radio styles
We're following the lead set by govuk_elements.  No more background,
but a bigger hit area for checkboxes and radio buttons.

Also needed a change to our `selected` classname because that's
how these new inputs are driven.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 8, 2017

Bring in govuk_elements' text input styles
Similar to the radios and checkboxes, govuk_elements have added new
styles that increase the contrast of our form elements.

Worth noting that we're explicitly _not_ bringing in spacing-related
styles because we're Digital Marketplace and we do things
differently here.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 10, 2017

Bring in govuk_elements' checkbox/radio styles
We're following the lead set by govuk_elements.  No more background,
but a bigger hit area for checkboxes and radio buttons.

Also needed a change to our `selected` classname because that's
how these new inputs are driven.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 10, 2017

Bring in govuk_elements' text input styles
Similar to the radios and checkboxes, govuk_elements have added new
styles that increase the contrast of our form elements.

Worth noting that we're explicitly _not_ bringing in spacing-related
styles because we're Digital Marketplace and we do things
differently here.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 13, 2017

Bring in govuk_elements' checkbox/radio styles
We're following the lead set by govuk_elements.  No more background,
but a bigger hit area for checkboxes and radio buttons.

Also needed a change to our `selected` classname because that's
how these new inputs are driven.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 13, 2017

Bring in govuk_elements' text input styles
Similar to the radios and checkboxes, govuk_elements have added new
styles that increase the contrast of our form elements.

Worth noting that we're explicitly _not_ bringing in spacing-related
styles because we're Digital Marketplace and we do things
differently here.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 22, 2017

Bring in govuk_elements' checkbox/radio styles
We're following the lead set by govuk_elements.  No more background,
but a bigger hit area for checkboxes and radio buttons.

Also needed a change to our `selected` classname because that's
how these new inputs are driven.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pcraig3 added a commit to alphagov/digitalmarketplace-frontend-toolkit that referenced this pull request Feb 22, 2017

Bring in govuk_elements' text input styles
Similar to the radios and checkboxes, govuk_elements have added new
styles that increase the contrast of our form elements.

Worth noting that we're explicitly _not_ bringing in spacing-related
styles because we're Digital Marketplace and we do things
differently here.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

quis added a commit to alphagov/notifications-admin that referenced this pull request Apr 10, 2017

Make radio select work w/ new checkboxes/radios
The visual appearance of radio and checkbox form inputs changed in
GOV.UK Elements here:

alphagov/govuk_elements#296

This was subsequently reimplemented with different markup and no
Javascript here:
alphagov/govuk_elements#406

This has meant making the following changes to our app:
- changing the markup in our radio/checkbox macros to match the example
  markup given by GOV.UK Elements
- removing the previous Javascript file because it’s no longer needed to
  make the radios appear visual selected
- making the buttons on the scheduled job picker look like links,
  because the grey button style looked weird with the new radio buttons
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.