Reduce border width of form inputs in the error state

[36degrees]

Reduce border width of form inputs in error state.

We rely on the input border getting thicker in order to meet WCAG 2.1 1.4.11: Non-text Contrast.

However, when the text input or textarea is in the error state, it already has a thicker border, and so the border only changes from red to black (alongside the addition of the yellow outline). The contrast between the red and the black is only 2.75:1, so the change in state from error to focused may not be perceivable by some users.

Reduce the error border width on inputs down to 2px, which is the same as the normal border width for a form input.

As the border width is now no thicker than the normal border width, remove the overrides that suppress the focus state's box shadow from errored inputs.

For components with multiple inputs, like the date input,this change does make it even more important to ensure that the error message clearly explains which field has the error. Although fields with an error continue to be differentiated from others by the thicker left border and the bold error text, the red border around the specific input can now only be seen as an enhancement. We are updating the documentation in the Design System to stress the importance of being explicit about which field an error message relates to.

Remove the border from the file input in its error state, aligning it with radios / checkboxes, where the error state is indicated by the red left-hand border on the form group and the error message.

Finally, deprecate $govuk-border-width-form-element-error to be removed in v4.0.

Fixes #1820

Before	After

[vanitabarrett]

Looks good - I think it just needs an entry in the Changelog?

[EoinShaughnessy]

@vanitabarrett Was $govuk-border-width-form-element-error the thing that changed borders from red to black/an override/something else entirely?

[vanitabarrett]

@EoinShaughnessy No, it set the width of the border rather than the colour.

We used to make the border of an element thicker when it was in an error state, but we now don't (it keeps it's original thinner border size) - you can see the difference in the screenshots in the PR description. Ollie's explanation in the PR covers the reason why we've made this change. I think to really summarise it down to one or two lines, it's because we need the focus state to be made clear to users - a change from red border to black border isn't enough, but a change from red to black PLUS a change in border thickness is. Because the focus state already has a thick border, we need to reduce the size of the error border so there's a visible change in thickness when someone focuses on an input in error state.

Not sure if that helps or is more confusing! Happy to jump on a call to explain.

[EoinShaughnessy]

@vanitabarrett It helps, thanks! I drew on your explanation to update our release notes about why we made these changes. Not sure what I've added is definitely what we want, though - probably a good one to chat about at our catchup tomorrow!