Update govuk frontend to 3.4.0

[frankieroberto]

This updates the govuk-frontend library from version 2.13.0 to 3.3.0. This mainly means that the colours have changed.

The page weight of the compiled CSS has also been reduced.

Review app: https://psd-pr-65-web.london.cloudapps.digital/

[edwardhorsford]

Many thanks for doing this work @frankieroberto!

I've had a good look through the app and there are a few snags - some likely because it highlights gaps in our codebase.

• Missing underline on skip link in header.

• Footer text now using two colours - should all be dark I think.

• Force underlines on footer links (override design system).

• Focussed hover for white buttons isn’t nice (could consider a separate issue as our existing hover for them isn’t good).

• Focus State slightly broken on autocomplete inputs - no thick black border. I suspect if we updated our autocompletes this might fix this issue. They're not using full design system styles.

• Hover state of delete buttons - should get darker (design system has introduced delete buttons since we made ours).

• Need better focus state for autocomplete clear button (suggest thick yellow background, black border bottom)

• Keycloak styles will also need updating (different app though)

[frankieroberto]

@edwardhorsford so the "Missing underline on skip link in header" is a bug within the govuk-frontend code itself, specifically when "global styles" are enabled.

Has been reported to the Design System team here: alphagov/govuk-frontend#1641

[edwardhorsford]

• Missing underline on skip link in header.
  Bug with design system - reported to them. In the short term I suggest leaving as is

• Footer text now using two colours - should all be dark I think.

• Force underlines on footer links (override design system).
  Design system team have an update coming that resolves this.

• Hover state of delete buttons - should get darker (design system has introduced delete buttons since we made ours).
  Swapped to using govuk-button--warning

• Need better focus state for autocomplete clear button (suggest thick yellow background, black border bottom)

Will raise as separate bug

• Focussed hover for white buttons isn’t nice (could consider a separate issue as our existing hover for them isn’t good).

Will fix in separate PR

• Focus State slightly broken on autocomplete inputs - no thick black border. I suspect if we updated our autocompletes this might fix this issue. They're not using full design system styles.

Will raise as separate bug

• Keycloak styles will also need updating (different app though)

Will raise as separate story Raised

[edwardhorsford]

Looks great! many thanks @frankieroberto