Update focus style on Error Summary and Notification Banner

[querkmachine]

Applies the same govuk-focused-box mixin used for images in #3819 to the Error Summary and Notification Banner components, as per @davidc-gds's suggestion.

Merging this would be one way to resolve #1936, as it fixes the problem of the yellow outline not providing sufficient contrast.

Screenshots

Error Summary

Notification Banner

Thoughts

There was some questions as to whether we should use the exact same focus style as #3819, or develop ones specific to these components that replicate way that text input focus works—with the coloured border becoming thicker and only having the yellow focus colour outline it, as current.

In my mind, using the same (yellow and black) outline is the 'safer' option. As I found when digging into #3925, the Notification Banner component is currently tied to the $govuk-brand-colour setting and there is no requirement or guarantee that the colour used provides sufficient contrast with white. In that case, the black outline would be necessary for WCAG compliance. (However, the more ideal solution would probably be to divorce the colour of the Notification Banner from the brand colour.)

[dav-idc]

Just as I was good with the pull request for the govuk-focused-box focus addition for linked images, I'm also good with this one.

I'l agree it's a bit 'loud' with the 3 layered colours. But also, when these success / error messages come up, they are deserving of attention. So, I can personally justify the value in them being louder than normal.

Additionally, they aren't generally tab-able items -- they only receive focus when focus is intentionally applied by the service, and not by the user. So in regular navigation scenarios using the tab key, this focus won't come up.

I know that alternate focus stylings were being investigated though, including one that @christopherthomasdesign was suggesting. It might be worth double-checking if we're all ok with this 'noisy' focus.

Referencing the banner focus issue in #3870, it could even be that the consistent approach there would be to add weight to the borders on banners when focused. I mean it'd need some tweaking, but something like:

I think especially on the banners, having 3 layers of variously contrasting lines creating a striped effect is more visually noisy than you need it to be. Especially for the error summary, which creates a slightly alarming combination of red, yellow and black stripes. Error summary is focussed by default when you land on a page so that state will be what most people see when they get an error.

And to add to the discussion, here's the option where the yellow and black orderings are reversed:

As I said at the top of this comment though, I'm leaning towards the version currently in this PR. Partially because the current version will have very strong contrast and pass the upcoming AAA 'Focus appearance' WCAG 2.2 criterion, regardless of the colour used for the border around the error summary, notification banner, or even success panel elements. It basically is an incredibly visible and successful focus state regardless of the content inside it.

The other options presented can become muddled if the inner content's border colour is too light (for the 2-colour proposal) or too dark (for the black-inner-outline proposal).

But yes, I also acknowledge this focus is basically an ideally functional focus, and doesn't take into account aesthetics much.

[querkmachine]

Of note, this is one of the few existing focus styles we have that meets the WCAG 2.2 Focus Appearance criterion. 😉 #3839 (comment)

[querkmachine]

Closing this off as we're now doing a deeper exploration into the use and appropriateness of our focus styles. alphagov/govuk-design-system#3007