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

robinwhittleton · 2016-11-11T17:15:22Z

What problem does the pull request solve?

Chrome and Safari’s focus ring differs from everyone else. This was reported in #324

What does it do?

Sets Chrome and Safari’s default outline-offset: -2px to be 0 to match other browsers.

How has this been tested?

Tested in Firefox, Chrome and Safari on elements locally. Original patch went through wider testing in govuk_template.

Screenshots (if appropriate):

Screenshots in the original PR: alphagov/govuk_template#259

What type of change is it?

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Put an `x` in all the boxes that apply

My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.

This normalises Chrome and Safari to match the default styles for focus outlines. It was fixed in govuk_template, so we just need to import the latest version and update the govuk-template-base SASS to match.

- Remove rounded corners on form inputs elements and textareas in iOS (PR #342) - Fix focus outline on form fields in Chrome / Safari (PR #346) - Updates the contribution guidelines (PR #339) - Recommend .visually-hidden over .visuallyhidden (PR #341)

- 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

- 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

We don't need to set this to zero everywhere, only on some inputs. alphagov/govuk_elements#346

Fix focus outline on form fields in Chrome / Safari

9f67991

This normalises Chrome and Safari to match the default styles for focus outlines. It was fixed in govuk_template, so we just need to import the latest version and update the govuk-template-base SASS to match.

timpaul added the in progress label Nov 11, 2016

gemmaleigh approved these changes Nov 11, 2016

View reviewed changes

gemmaleigh removed the in progress label Nov 11, 2016

robinwhittleton merged commit c3ab36d into master Nov 11, 2016

robinwhittleton deleted the fix-focus-outline branch November 11, 2016 18:45

robinwhittleton mentioned this pull request Nov 11, 2016

Version 2.1.1 #347

Merged

Guntrisoft mentioned this pull request Dec 2, 2016

Update govuk_elements to version 2.2.1 guidance-guarantee-programme/pension_guidance#701

Merged

NickColley added a commit to alphagov/govuk-frontend that referenced this pull request May 20, 2019

Simplify outline-offset usage

0b23b26

We don't need to set this to zero everywhere, only on some inputs. alphagov/govuk_elements#346

NickColley added a commit to alphagov/govuk-frontend that referenced this pull request May 20, 2019

Simplify outline-offset usage

8d0be8a

We don't need to set this to zero everywhere, only on some inputs. alphagov/govuk_elements#346

NickColley added a commit to alphagov/govuk-frontend that referenced this pull request May 20, 2019

Simplify outline-offset usage

944bfaf

We don't need to set this to zero everywhere, only on some inputs. alphagov/govuk_elements#346

NickColley added a commit to alphagov/govuk-frontend that referenced this pull request May 22, 2019

Simplify outline-offset usage

127eddf

We don't need to set this to zero everywhere, only on some inputs. alphagov/govuk_elements#346

aliuk2012 pushed a commit to alphagov/govuk-frontend that referenced this pull request Jun 14, 2019

Simplify outline-offset usage

12b5cd9

We don't need to set this to zero everywhere, only on some inputs. alphagov/govuk_elements#346

aliuk2012 pushed a commit to alphagov/govuk-frontend that referenced this pull request Jun 14, 2019

Simplify outline-offset usage

5b3bd49

We don't need to set this to zero everywhere, only on some inputs. alphagov/govuk_elements#346

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

robinwhittleton commented Nov 11, 2016

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

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

Conversation

robinwhittleton commented Nov 11, 2016

What problem does the pull request solve?

What does it do?

How has this been tested?

Screenshots (if appropriate):

What type of change is it?

Put an x in all the boxes that apply

Put an `x` in all the boxes that apply