Release v4.0.0 of GOV.UK Frontend

[kellylee-gds]

What

Do a major release of prioritised breaking changes in GOV.UK Frontend.

Who needs to know about this

The whole team

Done when

• Scope release v4.0.0 #2193
• Explore challenges and processes around v4.0.0 #2341
• https://github.com/alphagov/design-system-team-internal/issues/516
• Look at release notes for major versions of other products govuk-design-system#1934
• Decide and document how to release a patch fix for GOV.UK Frontend if there are unreleased changes on main #1958
• Test early v4.0.0 release notes with users #2351
• https://github.com/alphagov/design-system-team-internal/issues/515
• https://github.com/alphagov/design-system-team-internal/issues/518
• Add analytics tracking for v4.0.0 comms and documentation govuk-design-system#1890
• https://github.com/alphagov/design-system-team-internal/issues/519

GOV.UK Frontend 4.0 milestone

Header

• Review if aria-label in header navigation is necessary
• Decided to do this as part of #1739 as they both touch the same area of code - Document fallback image change to header in 4.0 release notes

Footer

• Improve the layout options for the footer component
• Footer layout isn't aligned with content layout

Removing deprecated things

• Remove deprecated main-wrapper mixins
• Remove deprecated $govuk-border-width-form-element-error setting
• Remove govuk-tag--inactive class
• Remove deprecated iff Sass function

Hints and error messages

• Consider updating hints and error messages to use paragraphs
• Remove display:block hint style as we're switching from span to div

Accordion

• Update Accordion design
• Update docs to explain that accordion summary line can only contain phrasing content

ID contains special characters

• Conditional reveals fail if ID contains characters that have a special meaning in CSS
• Character count fails if ID contains characters that have a special meaning in CSS

Other

• Difficult to notice when cookie banner HTML classes are missing
• Invalid nesting of elements in summary list when actions are included on some but not all rows (WCAG 2.1 4.1.1 Parsing)
• Fix bugs with radios and checkboxes where multiple modules have the same name
• JavaScript modules are attached to the same global variable when imported individually
• After clicking "Skip to main content", focus isn't sent to the content so screenreader can't read from there

If the release notes aren't already too long;

• Remove dependency imports from files in the core and overrides layers
• Move template from the core layer to the objects layer

Design System

• Design System milestone

Prototype Kit

• Prototype Kit milestone

Release Steps

• Create archive site for v3 documentation govuk-design-system#1889
• Test v4.0.0 pre-release and release notes with users #2352
• Draft comms for v4.0.0 release #2331
• Create release notes for GOV.UK Frontend v4.0.0 (major breaking release) #2314
• Draft release notes for the Prototype Kit
• Update the Design System to use GOV.UK Frontend v4.0.0 govuk-design-system#1851
• Update the Prototype Kit to use GOV.UK Frontend v4.0.0 govuk-prototype-kit#1063
• Release v4.0.0 of GOV.UK Frontend to npm 🚀 #2330
• Release the Prototype Kit
• Update the Frontend Docs to use GOV.UK Frontend v4.0.0  govuk-frontend-docs#155

Follow-up Work

• Give the team a bit of breathing room between the release and the next epic we pick up - at least one week - to deal with extra support queries
• Hold a team retro following the v4.0.0 release govuk-design-system#1884