{"action":"created","issue":{"url":"https://api.github.com/repos/alphagov/govuk_elements/issues/296","repository_url":"https://api.github.com/repos/alphagov/govuk_elements","labels_url":"https://api.github.com/repos/alphagov/govuk_elements/issues/296/labels{/name}","comments_url":"https://api.github.com/repos/alphagov/govuk_elements/issues/296/comments","events_url":"https://api.github.com/repos/alphagov/govuk_elements/issues/296/events","html_url":"https://github.com/alphagov/govuk_elements/pull/296","id":173590660,"number":296,"title":"Custom radios / checkboxes [DO NOT MERGE]","user":{"login":"robinwhittleton","id":7414,"avatar_url":"https://avatars.githubusercontent.com/u/7414?v=3","gravatar_id":"","url":"https://api.github.com/users/robinwhittleton","html_url":"https://github.com/robinwhittleton","followers_url":"https://api.github.com/users/robinwhittleton/followers","following_url":"https://api.github.com/users/robinwhittleton/following{/other_user}","gists_url":"https://api.github.com/users/robinwhittleton/gists{/gist_id}","starred_url":"https://api.github.com/users/robinwhittleton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robinwhittleton/subscriptions","organizations_url":"https://api.github.com/users/robinwhittleton/orgs","repos_url":"https://api.github.com/users/robinwhittleton/repos","events_url":"https://api.github.com/users/robinwhittleton/events{/privacy}","received_events_url":"https://api.github.com/users/robinwhittleton/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":30,"created_at":"2016-08-27T10:55:17Z","updated_at":"2016-09-01T15:14:16Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/alphagov/govuk_elements/pulls/296","html_url":"https://github.com/alphagov/govuk_elements/pull/296","diff_url":"https://github.com/alphagov/govuk_elements/pull/296.diff","patch_url":"https://github.com/alphagov/govuk_elements/pull/296.patch"},"body":"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. As the selected state requires the SelectionButton class from govuk_frontend_toolkit [this was updated to add this automatically](https://github.com/alphagov/govuk_frontend_toolkit/pull/317), and will need to be merged at the same time.\r\n\r\nThis 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.\r\n\r\n![Image showing the design of the new radio buttons and checkboxes](https://cloud.githubusercontent.com/assets/7414/18172790/ce97a722-705e-11e6-9231-e65944dbae60.png)\r\n\r\nTested on:\r\n- IE 7-11\r\n- Edge 14\r\n- OS X Firefox 48\r\n- OS X Chrome 51\r\n- OS X Safari 9\r\n- iOS Safari 5.0 - 9.1\t\r\n- Android 4.4+ Chrome\r\n\r\nAndroid 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.\r\n\r\nWould absolutely love any feedback.\r\n\r\n- [x] Base implementation + testing\r\n- [x] Check that this works with click events in Selenium (testing in verify indicated possible problems)\r\n- [x] Make it use `currentColor` for compatibility with custom colour themes\r\n- [x] Make the pseudo-elements permanent and just repaint the background colour on state change\r\n- [x] Add a translucent hover state\r\n- [ ] Potentially make it work with `em` sizing\r\n- [ ] Test in old Android devices\r\n- [ ] Check that it works with screen readers and assistive tech"},"comment":{"url":"https://api.github.com/repos/alphagov/govuk_elements/issues/comments/244111379","html_url":"https://github.com/alphagov/govuk_elements/pull/296#issuecomment-244111379","issue_url":"https://api.github.com/repos/alphagov/govuk_elements/issues/296","id":244111379,"user":{"login":"robinwhittleton","id":7414,"avatar_url":"https://avatars.githubusercontent.com/u/7414?v=3","gravatar_id":"","url":"https://api.github.com/users/robinwhittleton","html_url":"https://github.com/robinwhittleton","followers_url":"https://api.github.com/users/robinwhittleton/followers","following_url":"https://api.github.com/users/robinwhittleton/following{/other_user}","gists_url":"https://api.github.com/users/robinwhittleton/gists{/gist_id}","starred_url":"https://api.github.com/users/robinwhittleton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robinwhittleton/subscriptions","organizations_url":"https://api.github.com/users/robinwhittleton/orgs","repos_url":"https://api.github.com/users/robinwhittleton/repos","events_url":"https://api.github.com/users/robinwhittleton/events{/privacy}","received_events_url":"https://api.github.com/users/robinwhittleton/received_events","type":"User","site_admin":false},"created_at":"2016-09-01T15:14:16Z","updated_at":"2016-09-01T15:14:16Z","body":"Had a meeting with @markhurrell / @joelanman / @gemmaleigh / @miaallers: general consensus what that we were happy with the approach but wanted to tweak the design a bit and add a hover state. I’ve done this and updated the image in the first post to match the current state."}}
{"actor":{"display_login":"robinwhittleton"}}