Merge pull request #1870 from alphagov/fix-error-focus-states

Reduce border width of form inputs in the error state

CHANGELOG.md

@@ -8,13 +8,35 @@
 
 We darkened `govuk-colour("dark-grey")` to improve the readability of hint text. It now has a contrast ratio of 7:1 and helps hint text meet the WCAG 2.1 (AAA) accessibility standard.
 
+#### Updated error styling for text input, select, textarea and file upload components
+
+The error styling for the text input, select and textarea components no longer makes the border thicker.
+
+The error styling for the file upload component no longer includes a border around the file upload input.
+
+We're making these changes to ensure that the focus state is always perceivable.
+
+When an error message relates to multiple fields, ensure you are explicit about which field has the error. You must not rely on users being able to perceive which field has the error styling.
+
+([PR #1870](https://github.com/alphagov/govuk-frontend/pull/1870))
+
 #### Add spellcheck parameter to input and textarea components
 
 Optional parameter added to the input, textarea and character count components to enable or disable the spellcheck attribute
 
 ([PR #1859](https://github.com/alphagov/govuk-frontend/pull/1859))
 ([PR #1869](https://github.com/alphagov/govuk-frontend/pull/1869))
 
+### Deprecated features
+
+#### The `$govuk-border-width-form-element-error` setting
+
+The `$govuk-border-width-form-element-error` setting has been deprecated, and will be removed in GOV.UK Frontend v4.0.
+
+Update any references to `$govuk-border-width-form-element-error` in your application's styles to reference `$govuk-border-width-form-element` instead.
+
+([PR #1870](https://github.com/alphagov/govuk-frontend/pull/1870))
+
 ### Fixes
 
 We’ve made fixes to GOV.UK Frontend in the following pull requests:

src/govuk/components/file-upload/_index.scss

@@ -47,31 +47,4 @@
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
     }
   }
-
-  .govuk-file-upload--error {
-    // As `upload--error` has border, it needs to have the same padding as
-    // the standard focused element.
-    margin-right: -$component-padding;
-    margin-left: -$component-padding;
-    padding-right: $component-padding;
-    padding-left: $component-padding;
-    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
-
-    &:focus {
-      border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `file-upload--error`
-      // already has the thicker border.
-      box-shadow: none;
-    }
-
-    // Repeat `:focus` styles to prevent error styles from being applied when
-    // input button is pressed as this moves the focus to "within".
-    // This can't be set together with `:focus` as all versions of IE fail
-    // to recognise `focus-within` and don't set any styles from the block
-    // when it's a selector.
-    &:focus-within {
-      border-color: $govuk-input-border-colour;
-      box-shadow: none;
-    }
-  }
 }

src/govuk/components/input/_index.scss

@@ -56,9 +56,6 @@
 
     &:focus {
       border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `input--error`
-      // already has the thicker border.
-      box-shadow: none;
     }
   }
 

src/govuk/components/select/_index.scss

@@ -44,9 +44,6 @@
 
     &:focus {
       border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `select--error`
-      // already has the thicker border.
-      box-shadow: none;
     }
   }
 

src/govuk/components/textarea/_index.scss

@@ -42,9 +42,6 @@
 
     &:focus {
       border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `textarea--error`
-      // already has the thicker border.
-      box-shadow: none;
     }
 
   }

src/govuk/settings/_measurements.scss

@@ -81,8 +81,11 @@ $govuk-border-width-form-element: 2px !default;
 ///
 /// @type Number
 /// @access public
+/// @deprecated Use $govuk-border-width-form-element instead. There should be no
+///   difference in thickness for inputs in the error state, in order to
+///   maintain a distinct focus state.
 
-$govuk-border-width-form-element-error: 4px !default;
+$govuk-border-width-form-element-error: 2px !default;
 
 /// Form group border width when in error state
 ///