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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update focus state for radios and checkboxes #1316

merged 4 commits into from May 10, 2019


Copy link

commented May 3, 2019

Affected components

  • Radios
  • Checkboxes


  • When focussed, double the border width to 4px
  • Reduce the size of the 'bullet' in small radios by 2px
  • Remove transparent outline used when users have overridden colours in their browser

馃憠 Preview
馃枼 Browserstack screenshots





Before (compatibility mode)

Screenshot_2019-05-03 GOV UK Frontend(2)

After (compatibility mode)

Screenshot_2019-05-03 GOV UK Frontend(3)

Before (colours overridden, Firefox 66)


After (colours overridden, Firefox 66)


Browser testing

  • Internet Explorer 8 (Windows 7)
  • Internet Explorer 9 (Windows 7)
  • Internet Explorer 10 (Windows 8)
  • Internet Explorer 11 (Windows 10)
  • Edge 18 (Windows 10)
  • Edge 17 (Windows 10)
  • Google Chrome 74 (Windows 10)
  • Mozilla Firefox 66 (Windows 10)
  • Safari 12 (macOS Mojave)
  • Google Chrome 74 (macOS Mojave)
  • Mozilla Firefox 66 (macOS Mojave)
  • Safari (iOS 12.2)
  • Google Chrome (iOS 12.2)
  • Google Chrome (Android 9)
  • Samsung Internet (Android 8)

Closes #1304

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1316 May 3, 2019 Inactive

@36degrees 36degrees force-pushed the radio-checkbox-focus-state branch from 4816df8 to 24ce5d3 May 3, 2019

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1316 May 3, 2019 Inactive

@nickcolley nickcolley added this to the v3.0.0 milestone May 8, 2019

@nickcolley nickcolley added this to Needs review in Design System Sprint Board via automation May 8, 2019

@36degrees 36degrees marked this pull request as ready for review May 9, 2019

Copy link

left a comment

I thought this would be more complex honestly ha, nice!

Needs a CHANGELOG entry.

Good to merge when tested... and ready

36degrees added 4 commits May 3, 2019
Reduce size of small radio 鈥榖ullets鈥
This provides more space between the outline and the bullet when focused, and makes them visually more similar to the full-sized radios and checkboxes.
Remove transparent outline
Now that there is a visible state change (the border-width increasing by 2px) when colours are overridden, the additional outline which was only used in that context can be removed.

@36degrees 36degrees force-pushed the radio-checkbox-focus-state branch from 24ce5d3 to 9187a3e May 10, 2019

@36degrees 36degrees merged commit 544f269 into v3 May 10, 2019

2 checks passed

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

Design System Sprint Board automation moved this from Needs review to Done May 10, 2019

@36degrees 36degrees deleted the radio-checkbox-focus-state branch May 10, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants
You can鈥檛 perform that action at this time.