Update to govuk-frontend 3.0

[alex-ju]

What

Update govuk_publishing_components to use govuk-frontend 3.0.
Fix focus states on a few components to align them with the colour contrast requirements

Why

• Keep frontend code in sync with the Design System updates
• Meet WCAG 2.1 requirements regarding colour contrast

Notes

• this PR is raised for visibility and be used as a base for discussions ready for review
• for more details regarding changes see govuk-frontend 3.0 changelog

Compatibility checks

These changes were tested with applications in the following states using the appropriate compatibility flags.

• applications with a direct dependency on govuk_elements_rails, govuk_frontend_toolkit and an indirect dependency on govuk_template (e.g. Service manual frontend)
• applications with a direct dependency on govuk_frontend_toolkit and an indirect dependency on govuk_template (e.g. Frontend)
• applications with an indirect dependency on govuk_template - dependent on static (e.g. Calendars)
• applications without dependencies on legacy projects (e.g. Content Publisher)

Visual Changes

There are visual changes for almost all components, especially related to focus states (which are harder to get with a basic visual comparison). I would recommend using the preview app when reviewing as images don't capture all the states.

View Changes

https://govuk-publishing-compo-pr-1010.herokuapp.com/component-guide

Trello card

[andysellick]

Since we seem to be using govuk-focusable so much would it be worth making our own mixin for the code that you've written to replace it?

Also I've not talked to anyone about this yet but do you know the reason for removing this mixin? It was kind of useful...

[andysellick]

Initial review, I've only up to the commit Replace govuk-focusable mixins.

[andysellick]

Another partial review, I've got up to (but not including) Update start button icon.

I've noticed that a few of my comments are already out of date, so it's possible you've already addressed them in later commits. I'll review my review and mark/update as appropriate.

[andysellick]

To be addressed after this PR is merged, logged here: #1028 and here: #1032

Some more thoughts...

• the accessible autocomplete doesn't have the new focus styles (because it's mostly pulled in from another repo) but we're going to address that separately
• links that wrap have a potential overlap issue with the line below slightly cropping the line above, as seen in the attachment component (note how the bottom of the 'P' in 'department' is missing). Might be something to talk to the Design System team about (also we might need to adjust the line height in this component)

Here's an only semi-related but interesting example from the contents list component, where the second line is indented, leaving a trailing bit of the first line's underline visible (I thought it was a quote mark when I first spotted it)

[andysellick]

Also fairly obvious but worth pointing out that apps will break with this update - I just tried it in finder-frontend and it failed because apparently we're using the govuk-focusable mixin in that app.

UPDATE: actually might just be finder-frontend that has the problem. Shouldn't be too hard to fix then 😁

[andysellick]

Tables look good with the new, slightly lighter grey...

Old:

[andysellick]

To be addressed after this PR is merged, logged here: #1028

The new focus style takes up a bit more vertical space than it used to. The worst example of this so far that I've found is the image card.

I don't know if this is actually a problem though. You're most likely to notice this if you're using a keyboard, in which case moving the focus won't be a problem. Also the one you're currently focussed on is fine.

Might be worth looking at some of these issues after this PR is merged, just noting it here for reference. Other components where this is a problem:

• textarea, with text beneath it
• metadata
• organisation logo (see below)

[andysellick]

Unrelated to this PR, logged separately here: #1029

This is unrelated but worth adding to the 'to check later' list... the layout header with links doesn't seem to collapse early enough, plus when the links do collapse the dropdown menu doesn't seem to work?

[andysellick]

Unrelated to this PR, logged separately here: #1030

Page title (with context link) lacks a focus state for the link. This was a problem prior to this PR, so arguably out of scope, but we should fix it.

It's even worse for the inverse option...

[vanitabarrett]

Do we need to update the govspeak 'highlight answer' to use the green instead of the turquoise?
https://govuk-publishing-compo-pr-1010.herokuapp.com/component-guide/govspeak/highlight_answer/preview

[alex-ju]

@vanitabarrett Thanks for the review. Tried to address the comments. Do let me know if the review is still in progress.

Do we need to update the govspeak 'highlight answer' to use the green instead of the turquoise?
https://govuk-publishing-compo-pr-1010.herokuapp.com/component-guide/govspeak/highlight_answer/preview

Updated to use the new colour

@andysellick Thanks for the review. Tried to address all the comments (aside from the ones with an associated issue - 🙌 for that). For those comments without a thread I tried to reply below.

The hover + focus state for next/previous navigation could do with a bit of attention...

Updated to preserve the focus state when hovering

Skip link hasn't picked up the new focus style, might be defining it itself?

This is how the component is coming from govuk-frontend. We can propose enhancements upstream or do overwrites if we have good reasons for that.

We might want to tweak the image card component a little... if you focus and hover some of the links, you get a double underline.

Fixed the focus/hover states on image card component

[andysellick]

🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀 🎉 ❤️ 🚀

[alex-ju]

Rebased again before merging. Thanks everyone who commented on this, that helped a lot!