Add focused error state to Character count

[querkmachine]

Resolves #1908.

Background

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 focus, so that there is an additional mechanism for communicating the error state.

Changes

• Adds CSS to override the border-color and box-shadow colour of the Character count component's textarea when it simultaneously has the error class and focus.

Thoughts

This appearance from the standard for other input types, however, as the character count is the only form control component that performs 'live' validation of user input, the exception may make sense here.

There was some thought over whether only one part of the 'border' should change to being red (either the border itself, or the box-shadow). I decided against this for a few reasons:

• The focus style's box-shadow is intended to be perceived as the existing border increasing in thickness, so the border and box-shadow should be the same colour.
• Having the border be composed of three colours (black, red, and the focus's standard yellow) would be visually confusing.
• Continuing to have black appear adjacent to red would lessen the visibility of the border changing to become red.

As error red is being used in place of black in this focus state, we want it to meet the minimum contrast ratio against light colours, as black normally does. Red on white has a contrast ratio of 4.86:1, seemingly satisfying the non-text contrast criterion. A red and yellow focus state is already used on the Error summary component.

Screenshots

Before	After

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	118.52 KiB
dist/govuk-frontend-development.min.js	42.7 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	92.81 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	87.12 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.25 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	1.74 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	118.51 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	42.69 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	7.13 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	82.57 KiB	40.4 KiB
accordion.mjs	26.58 KiB	13.41 KiB
button.mjs	9.09 KiB	3.78 KiB
character-count.mjs	25.39 KiB	10.9 KiB
checkboxes.mjs	7.81 KiB	3.42 KiB
error-summary.mjs	10.99 KiB	4.54 KiB
exit-this-page.mjs	20.2 KiB	10.34 KiB
header.mjs	6.46 KiB	3.22 KiB
notification-banner.mjs	9.35 KiB	3.7 KiB
password-input.mjs	18.24 KiB	8.33 KiB
radios.mjs	6.81 KiB	2.98 KiB
service-navigation.mjs	6.44 KiB	3.26 KiB
skip-link.mjs	6.4 KiB	2.76 KiB
tabs.mjs	12.04 KiB	6.67 KiB

View stats and visualisations on the review app

---

Action run for 5e1b2ca

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 647e22444..79597179a 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -2317,6 +2317,11 @@
     margin-bottom: 5px
 }
 
+.govuk-character-count .govuk-textarea--error:focus {
+    border-color: #d4351c;
+    box-shadow: inset 0 0 0 2px #d4351c
+}
+
 .govuk-character-count__message {
     font-variant-numeric: tabular-nums;
     margin-top: 0;

---

Action run for 5e1b2ca

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss b/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss
index 972aadf4a..63f12ec46 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss
+++ b/packages/govuk-frontend/dist/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 {

---

Action run for 5e1b2ca