Add focused error state to character count

If a user goes over the character limit whilst typing, their only feedback for having done so is in the count message appear below the textarea (for a sighted user) or in the buffered announcement (for a screen reader user).

This means that users on small screens or using high magnification settings may not be aware that they have gone past the character limit until they have left the textarea and scrolled down. A sighted user may also simply not notice the character count text changing to alert them of the issue.

It was suggested in #1908 that the character count should maintain having the error state border even when the field has been given focus, so that there is another mechanism for users to recognise the issue. This diverges from the standard for other input types, however, as the character count is the only form control component that performs 'live' validation, the exception may make sense here.

CHANGELOG.md

@@ -4,6 +4,12 @@ For advice on how to use these release notes see [our guidance on staying up to
 
 ## Unreleased
 
+### Fixes
+
+We've made fixes to GOV.UK Frontend in the following pull requests:
+
+- [#5628: Add focused error state to Character count](https://github.com/alphagov/govuk-frontend/pull/5628)
+
 ## v5.8.0 (Feature release)
 
 To install this version with npm, run `npm install [email protected]`. You can also find more information about [how to stay up to date](https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version) in our documentation.

packages/govuk-frontend/src/govuk/components/character-count/_index.scss

@@ -11,6 +11,14 @@
     .govuk-textarea {
       margin-bottom: govuk-spacing(1);
     }
+
+    // If the textarea enters the error state whilst the user is focused on it,
+    // show the error state. This presents feedback to the user that the value
+    // has become invalid without needing to see the counter.
+    .govuk-textarea--error:focus {
+      border-color: $govuk-error-colour;
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element $govuk-error-colour;
+    }
   }
 
   .govuk-character-count__message {