Update dependency govuk-frontend to v5 #356
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
![renovate[bot]](https://avatars.githubusercontent.com/in/2740?s=60&v=4){kind=small}
renovate
bot
requested review from
louisehuyton,
danielwilsonkainos and
JordanHoey96
and removed request for
a team
renovate
bot
force-pushed
the
renovate/govuk-frontend-5.x
branch
from
7190bc5
to
c0c9b34
Compare
renovate
bot
force-pushed
the
renovate/govuk-frontend-5.x
branch
from
c0c9b34
to
83e6e11
Compare
renovate
bot
force-pushed
the
renovate/govuk-frontend-5.x
branch
from
83e6e11
to
fafceae
Compare
renovate
bot
force-pushed
the
renovate/govuk-frontend-5.x
branch
2 times, most recently
from
af6c520
to
67c0fc7
Compare
renovate
bot
force-pushed
the
renovate/govuk-frontend-5.x
branch
5 times, most recently
from
ff1e7d7
to
265ea38
Compare
renovate
bot
force-pushed
the
renovate/govuk-frontend-5.x
branch
from
265ea38
to
68517a6
Compare
auto-merge was automatically disabled
April 2, 2024 11:32
Pull request was closed
Renovate Ignore NotificationBecause you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR contains the following updates:
4.7.0->5.3.0Release Notes
alphagov/govuk-frontend (govuk-frontend)
v5.3.0Compare Source
New features
Use the Password input component to help users accessibly enter passwords
The Password input component allows users to choose:
This helps users use longer and more complex passwords without needing to remember what they've already typed.
This change was introduced in pull request #4442: Create password input component. Thanks to @andysellick for the original contribution.
Recommended changes
Update the HTML for the Character count component
We've updated the HTML for the Character count component. The component wrapper
data-module="govuk-character-count"and its form groupclass="govuk-form-group"are now combined as the same<div>. The hint text used as the count message now appears directly after the<textarea>.If you're not using Nunjucks macros, then you should:
<div>to the component wrapper<div><div>and closing</div>tags used by the form group<textarea>The following example shows some HTML and the difference once it’s updated.
HTML before:
HTML after:
Check your changes against the Character count example in the Design System to make sure you’ve correctly implemented them.
This change was introduced in pull request #4566: Use Character count
formGroupas module wrapper.Remove redundant
roleattributes from elementsWe've made minor changes to the HTML of the page template, as well as the header, footer and pagination components.
You can update your HTML to remove the
roleattribute from some elements. These include the:mainrole on themainelement in the templatebannerrole on theheaderelement in the Header componentcontentinforole on thefooterelement in the Footer componentnavigationrole on thenavelement in the Pagination componentThese roles were present to support legacy browsers, such as older versions of Internet Explorer. GOV.UK Frontend no longer supports these browsers, so you can now remove these roles.
You do not need to change anything if you're using the Nunjucks versions of the page template or these components,
This change was introduced in pull request #4854: Remove redundant
roleattributes.Fixes
We've fixed an upstream issue in the cssnano npm package that caused elements with transparency to render incorrectly in Internet Explorer 11. This affected the pre-compiled CSS files in the GOV.UK Frontend npm package and GitHub releases for versions 5.0, 5.1 and 5.2. This was fixed in:
We've made fixes to GOV.UK Frontend in the following pull requests:
KeyboardEvent.keyover deprecatedKeyboardEvent.keyCodein the Tabs componentKeyboardEvent.keyover deprecatedKeyboardEvent.keyCodein the Button componentKeyboardEventproperties from the Exit this Page componentv5.2.0Compare Source
In this release, we’ve adjusted our responsive type scale, which is available behind a feature flag. The type scale change is to make text easier to read on smaller screens. We’ve also deprecated the
useTudorCrownparameter.To install this version with npm, run
npm install [email protected]. You can also find more information about how to stay up to date in our documentation.New features
We've adjusted our responsive type scale
We've made the following adjustments to our responsive type scale:
To enable these changes, set the feature flag variable
$govuk-new-typography-scaletotruebefore you import GOV.UK Frontend in your Sass files:If your service uses custom elements made using GOV.UK Frontend, test your service against the new typography scale to assess if you need to make any adjustments.
You can read more on upgrading your service to the new type scale in our upgrade guide.
This change was introduced in pull request #2421: Adjust the responsive type scale
Insert custom HTML into component form group wrappers
You can now insert custom HTML into form group wrappers for all components with form fields.
govukInput({ formGroup: { beforeInput: { html: "example" }, afterInput: { html: "example" }, } })This change was introduced in pull request #4567: Add
beforeInput(s)andbeforeInput(s)options to form groups.Deprecated features
Stop using the
useTudorCrownparameter in the Heading componentThe rollout for the revised GOV.UK logo has started and the Tudor crown logo is now shown by default. We’ve deprecated the
useTudorCrownparameter and will remove it in the next major release.You can now remove the
useTudorCrownparameter, along with any other adjustments made to display the Tudor crown logo in your service.This change was introduced in pull request #4740: Make Tudor Crown logo the default
Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
calc()compatibility in Radios and Checkboxesv5.1.0Compare Source
To install this version with npm, run
npm install [email protected]. You can also find more information about how to stay up to date in our documentation.New features
Update to the new GOV.UK logo
The GOV.UK logo has been updated to reflect the changing of the monarch. King Charles III uses the Tudor Crown, rather than the St Edward’s Crown chosen by Queen Elizabeth II.
If your service uses GOV.UK branding, you must update your service between 19 February and 1 March 2024 to use the new logo.
These changes were made in the following pull requests:
Include the new logo assets
Multiple new image assets are included in this release. You’ll need to copy these to your service's image assets folder if they’re not being used directly from the Frontend package. By default this folder is located at
/assets/images.If you’re using Nunjucks, the asset path may have been changed by the
assetPathglobal variable orassetsPathparameter on the header component.Copy the following files from
/dist/assets/imagesinto your assets folder. Any images with the same name as an existing image can be safely overwritten.Update the logo in the header of your page
If you’re using the
govukHeaderNunjucks macro in your service, add theuseTudorCrownparameter to the macro instantiation. This will become the default in a future version of GOV.UK Frontend.If you’re not using the Nunjucks macro, locate the SVG code for the existing logo and replace it with this updated SVG.
Add attributes to component form group wrappers
You can now add attributes to the form group wrapper for all components with form fields.
govukRadios({ formGroup: { attributes: { "data-attribute": "value" } } })This change was introduced in pull request #4565: Allow
attributesoption on form groups.Use tabular numbers with the
govuk-font-tabular-numbersmixinYou can now use tabular numbers in your authored Sass by including the new
govuk-font-tabular-numbersmixin.Previously, you’d use the
govuk-fontmixin with the$tabularparameter. However, thegovuk-fontmixin includes styles unrelated to tabular numbers, which are not needed in some contexts.These additional styles are not included if you use
govuk-font-tabular-numbers. Switching to the new mixin can reduce the size of your compiled CSS without affecting the appearance of pages.This change was introduced in pull request #4307: Refactor tabular number activation into their own mixin.
Recommended changes
Replace instances of
govuk-typography-responsivewithgovuk-font-sizeWe've renamed the Sass mixin
govuk-typography-responsivetogovuk-font-sizeand have deprecatedgovuk-typography-responsive. You can still usegovuk-typography-responsive, but we'll remove it in a future breaking release (GOV.UK Frontend v6.0.0).This is an experimental change to see if the name
govuk-font-sizebetter communicates the Sass mixin's intended use than the namegovuk-typography-responsive.We're interested in feedback from the community on this name change, so please let us know what you think through our usual channels.
This change was introduced in pull request #4291: Rename
govuk-typography-responsivetogovuk-font-size.Remove the
aria-labelledbyattribute from accordion sectionsIf you’re not using our Nunjucks macros, remove the
aria-labelledbyattribute from all accordion sections (divelements that have thegovuk-accordion__section-contentclass).This change was introduced in pull request #4628: Remove
aria-labelledbyfrom accordion sections.Deprecated features
Stop using the
elementparameter on buttonsWe’ve deprecated the
elementNunjucks parameter and will remove it in the next major release.In the future, if the
hrefparameter is set the component will automatically use the<a>element. If thehrefparameter is not set the component will automatically use the<button>element. It will not be possible to override this change.This change was introduced in pull request #4646: Deprecate
elementparameter on button component.Stop using
govuk-body-xs,govuk-!-font-size-14and '14' on the type scaleWe’ve deprecated point 14 (14px large screens, 12px small screens) on the GOV.UK Frontend responsive type scale, including font override classes that use point 14:
govuk-body-xsgovuk-!-font-size-14We’ll remove these classes and point 14 on the type scale in the next major release, GOV.UK Frontend release v6.0.0. With this change in the v6.0.0 release, you’ll no longer be able to call the Sass mixins
govuk-fontorgovuk-font-sizewith$sizeset to '14'.This change was introduced in #4649: Deprecate 14 on the type scale and #4713: Ensure
govuk-font-size()handles string keys.Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
matchMedia()v5.0.0Compare Source
You can find a summary of the main changes to GOV.UK Frontend v5 on the Frontend site. It's important to note our old frameworks (such as GOV.UK Elements) are no longer compatible with this release. It also stops Internet Explorer 11 from running GOV.UK Frontend JavaScript and removes support completely for Internet Explorer 8 to 10.
Your service will not stop working in Internet Explorer 11, but components will look and behave differently without JavaScript. Read more about how we provide support for different browsers.
Service teams should be using a progressive enhancement approach to make sure users can still access any content and complete their tasks.
If you still need to provide support for older versions of Internet Explorer, you should stay on the latest GOV.UK Frontend v4 release.
If you need it, we have a checklist for the changes you might need to make for v5, which you can view or copy (needs a Google account).
Breaking changes
You must make the following changes when you migrate to this release, or your service might break.
Update package file paths for Sass
In preparation for additional build targets, we've moved our package files into a directory called
dist.Replace
govuk-frontend/govukwithgovuk-frontend/dist/govukin any Sass@importpaths.For example:
@​import "node_modules/govuk-frontend/dist/govuk/all";If you've added
node_modules/govuk-frontendas a Sass import path, update it with the/distsuffix:If you're building your Sass code through Rails Assets Pipeline or Sprockets, refer to the section 'Update package file paths in Rails Assets Pipeline or Sprockets'.
Refer to the detailed guidance on importing using Sass.
These changes were introduced in #3498: Remove built
distandpackagefrom sourceUpdate package file paths for Nunjucks
In preparation for additional build targets, we've moved our package files into a directory called
dist.Replace
govuk-frontendwithgovuk-frontend/distin anynunjucks.configure()search paths:Refer to the detailed guidance on using Nunjucks.
These changes were made in the following pull requests:
govuk-frontendvia local packagedistandpackagefrom sourceUpdate package file paths for assets such as images and fonts
In preparation for additional build targets, we've moved our package files into a directory called
dist.If you're serving the assets from the GOV.UK Frontend assets folder (
node_modules/govuk-frontend/govuk/assets), update your routing to the new assets path :node_modules/govuk-frontend/dist/govuk/assets.Refer to the detailed guidance on importing assets.
These changes were introduced in #3498: Remove built
distandpackagefrom sourceUpdate package file paths in Rails Assets Pipeline or Sprockets
In preparation for additional build targets, we've moved our package files into a directory called
dist.Update the
node_modules/govuk-frontendpart of the path tonode_modules/govuk-frontend/dist, if you've added the path to GOV.UK Frontend package insidenode_modulesto:Rails.application.config.assets.pathsappend_pathThese changes were introduced in #3498: Remove built
distandpackagefrom sourceUpdate package file paths if including JavaScript directly
In preparation for additional build targets, we've moved our package files into a directory called
dist.If you've set up your routing to serve GOV.UK Frontend's
all.jsfile fromnode_modules, update the path you're serving tonode_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js.Update any
<script>tag with the new path and filename, if necessary. Make sure they have atype="module"attribute. For example:Replace
<script>window.GOVUKFrontend.initAll()</script>to import and initialise GOV.UK Frontend using ES modules:Refer to the detailed guidance on importing JavaScript.
These changes were introduced in #3498: Remove built
distandpackagefrom sourceUpdate package file paths for Node.js and other bundlers
In preparation for additional build targets, we've moved our package files into a directory called
dist.If you're importing GOV.UK Frontend using
import ... from 'govuk-frontend'orrequire('govuk-frontend'), you have nothing to change.If you're using
importto import individual components, replacegovuk-frontend/govukwithgovuk-frontend/dist/govuk. For example:If you're using
requireto import individual components, replacegovuk-frontend/govukwithgovuk-frontend/dist/govukand update the file name to<COMPONENT_NAME>.bundle.js. For example:Refer to the detailed guidance on importing JavaScript.
These changes were introduced in #3498: Remove built
distandpackagefrom sourceVerify your code does not rely on polyfills we have now removed
We have removed polyfills for Internet Explorer 8 to 11:
DOMTokenList,Element.prototype.classList,Element.prototype.closest,Element.prototype.matches, andEvent- required for Internet Explorer 11 and belowElement.prototype.dataset- required for Internet Explorer 10 and belowDate.now,Document,Element,Element.prototype.nextElementSibling,Element.prototype.previousElementSibling,Function.prototype.bind,Object.defineProperty,String.prototype.trimandWindow- required for Internet Explorer 8However, because these polyfills create or extend global objects ('polluting the global namespace'), you might have other code in your service unintentionally relying on the inclusion of these polyfills. You might need to introduce your own polyfills or rewrite your JavaScript to avoid using the polyfilled features.
These changes were introduced in pull request #3570: Remove Internet Explorer 8 to 10 JavaScript polyfills, helpers, config
Stop Internet Explorer 11 and other older browsers running unsupported JavaScript
Add
type="module"to all HTML<script>tags that include or bundle GOV.UK Frontend.This is to stop Internet Explorer 11 and other older browsers running the JavaScript, which relies on features older browsers might not support and could cause errors.
Please note that
<script>withtype="module"runs JavaScript in a slightly different way than<script>without `type="module". You'll need to assess the impact of these nuances and make sure that:<script>tag, you'll need to make sure it's usingtype="module"ordefer. This is because the tag loading GOV.UK Frontend will be deferred because of itstype="module"attribute<script>tag withouttype="module"If your service has JavaScript you want to run successfully in Internet Explorer (for example JavaScript for analytics), you will need to load it in a separate
<script>tag withouttype="module"and make sure its code is compatible with the browsers it should run in (see previous section about polyfills).These changes were introduced in pull request #3720: Remove IE11 vendor polyfills
Update the
<script>snippet at the top of your<body>tagPage templates now include a new
govuk-frontend-supportedclass on the<body>tag when GOV.UK Frontend JavaScript components are fully supported.If you are not using our Nunjucks page template, replace the existing snippet:
with:
These changes were introduced in [pull request #3801:
Add class .govuk-frontend-supported for ES modules support] (#3801)
Update the hash used by your Content Security Policy
If your Content Security Policy uses a hash to let the snippet above run, you'll need to update it from:
to:
These changes were introduced in [pull request #3801:
Add class .govuk-frontend-supported for ES modules support] (#3801)
Remove calls to component
initmethods from your JavaScriptIf you instantiate individual components, remove any calls to component
initmethods, as initialisation now happens automatically. If you initialise the JavaScript usingwindow.GOVUKFrontend.initAll(), you will not need to make any changes.For example, the following:
becomes:
This change was introduced in pull request #4011: Remove component init() methods and initialise in constructor.
Remove Internet Explorer 8 stylesheets, settings and mixins
We no longer support Internet Explorer 8 (IE8) in GOV.UK Frontend or provide dedicated stylesheets for the browser. Remove any references to these stylesheets from your HTML.
We've removed the
govuk-if-ie8andgovuk-not-ie8mixins, and the$govuk-is-ie8and$govuk-ie8-breakpointsettings. These were deprecated in GOV.UK Frontend v4.6.0.You should:
govuk-if-ie8mixin entirely (because the code passed to the mixin was only ever for Internet Explorer 8)govuk-not-ie8mixin with the contents that were previously passed to the mixin (because now we always want the code passed to the mixin)ie8from the$govuk-suppressed-warningslist, if presentIf a library you depend on is not yet updated and relies on these mixins and variables, as a temporary workaround you can define the following mixins and variables before importing:
This change was introduced in pull request #3559: Remove IE8-related Sass and CSS build tasks.
Remove references to "Compatibility mode" and related features from your Sass
GOV.UK Frontend is no longer compatible with our old frameworks:
You cannot migrate an existing service to GOV.UK Frontend v5.0 if it is still using one of these frameworks -- you'll need to remain on the latest v4.x release until you've finished the migration. Remove any references to these Sass variables and mixins:
$govuk-compatibility-govukelements$govuk-compatibility-govuktemplate$govuk-compatibility-govukfrontendtoolkitthe
govuk-compatibilitymixin which could be used to conditionally output CSS when compatibility mode was enabledremove
compatibility-modefrom the$govuk-suppressed-warningslist, if presentWe've additionally removed features that were managed using the above variables. We've removed the following features and their corresponding variables:
$govuk-use-legacy-palette$govuk-use-legacy-font$govuk-font-family-tabular$govuk-typography-use-remThese changes were introduced in:
Remove references to font family variables from your Sass
Remove any references to following Sass variables:
$govuk-font-family-gds-transport$govuk-font-family-nta$govuk-font-family-nta-tabularIf you were using
$govuk-font-family-gds-transportto set the font on an element, we recommend using thegovuk-fontmixin instead.This change was introduced in pull request #3949: Simplify font family settings.
Remove references to
govuk-button--disabledclass from the HTML for the Button componentFor the Button component, remove any references to the
govuk-button--disabledclass that we deprecated in GOV.UK Frontend v4.6.0.Use the
disabledattribute to mark<button>and<input>elements as being disabled instead.We no longer support link buttons being disabled or using disabled styles.
This change was introduced in pull request #3557: Remove deprecated
govuk-button--disabledclass.Remove references to the JavaScript for the Details component
The Details component no longer uses JavaScript, and is no longer polyfilled in older browsers.
If you are importing the JavaScript for this component individually, remove any references to it.
If you are not using our Nunjucks macros, remove the
data-module="govuk-details"attribute from all<details>elements.We've styled the details component so content does not look 'broken' in browsers that do not support it. If your service supports these browsers, you will need to add your own polyfills.
This change was introduced in:
Update the GOV.UK logo
We've updated the GOV.UK logo to merge the GOV.UK text with the crown graphic. This is to make sure the full logo is always rendered correctly even if parts of the page, such as CSS or the Transport webfont, fail to load. We've also modified styles relating to the logo.
If you're using the
govukHeaderNunjucks macro you don't need to change anything.Otherwise, to update to the new logo:
<span class="govuk-header__logotype-text">and its content<span class="govuk-header__logotype">around the svg elementThis change was introduced in pull request #4449: Implement transitional crown in the Header component (v5.0).
Check your favicons, app icons and OpenGraph image still work
We've changed the names, formats and sizes of icon assets we distribute in Frontend. You will want to check that the correct files are copied in the right place and served at the right URLs.
The following files have been added to the assets folder:
The following files have been removed from the assets folder:
If you're not using the Nunjucks page template, you will need to replace the list of icons in the template's head with the following:
You will need to update the file path to match your assets folder if it's not at the default location.
This change was introduced in pull request #4445: Implement transitional crown favicons (v5.0).
Remove the fallback GOV.UK crown logo from the HTML for the Header component
The Header component previously included a fallback PNG version of the GOV.UK crown logo for Internet Explorer 8. As Frontend no longer supports Internet Explorer 8, we've removed this fallback.
If you're not using the Nunjucks macros, you'll need to remove this fallback from your HTML code. In your Header component:
govuk-header__logotype-crown-fallback-imageimage, starting with<!--[if IE 8]>and ending with<![endif]-->.<!--[if gt IE 8]><!-->and<!--<![endif]-->from around thegovuk-header__logotype-crownSVG, but don't remove the SVG.govuk-logotype-crown.pngfile from your assets folder.You do not need to change any HTML if you're using the supplied Nunjucks macros, but you might still need to remove the
govuk-logotype-crown.pngimage depending on how you are serving the font and image assets.This change was introduced in pull request #3641: Remove fallback GOV.UK logo for IE8.
Remove references to
govuk-header__navigation--no-service-nameclass from the HTML for the Header componentWe've removed the
govuk-header__navigation--no-service-nameclass which we deprecated in GOV.UK Frontend v4.3.0.We no longer supply a dedicated class for headers with navigation but no service name. If you still need this feature, you can reproduce it in your own code using the
govuk-spacingSass mixin.You could:
app-header-navigationclass to the header's<nav>tag (you can use thenavigationClassesoption for the Header component if you're using Nunjucks)This change was introduced in pull request #3595: Remove deprecated
govuk-header__navigation--no-service-nameclass.Add the
hiddenattribute to the mobile menu button in the Header componentWe've removed some styles from the
govuk-header__menu-buttonclass. These styles were included on the mobile menu button to avoid introducing a breaking change in GOV.UK Frontend v4.3.0.If you're not using Nunjucks macros, and have not done so already, add the
hiddenattribute to the button's HTML to ensure it continues working as expected.You do not need to make any changes if using the Nunjucks macro.
When working correctly, the button should only show on narrow screens when JavaScript is available. It should be hidden on wider screens or if JavaScript is unavailable.
This change was introduced in pull request #3596: Remove redundant display style from
govuk-header__menu-button.Update references to
govuk-header__link--service-nameclass from the HTML for the Header componentWe've removed the
govuk-header__link--service-nameclass which we deprecated in GOV.UK Frontend v4.2.0.Use the
govuk-header__service-nameclass instead.This change was introduced in pull request #3594: Remove deprecated
govuk-header__link--service-nameclass.Update references to
govuk-!-margin-staticandgovuk-!-padding-static classesfrom the HTMLWe've removed the override classes starting with
govuk-!-margin-staticandgovuk-!-padding-static, which were deprecated in GOV.UK Frontend v4.3.1.Use the classes starting with
govuk-!-static-marginandgovuk-!-static-paddinginstead.This change was introduced in pull request #3593: Remove deprecated static spacing classes.
Update references to the
govuk-warning-text__assistiveclass from the HTML for the Warning Text componentFor the Warning Text component, we've removed the
govuk-warning-text__assistiveclass and its styles from GOV.UK Frontend. This class is unnecessary, as it duplicates the functionality of thegovuk-visually-hiddenclass already present in Frontend.If you're not using Nunjucks macros, update your warning text HTML to replace the
govuk-warning-text__assistiveclass with thegovuk-visually-hiddenclass.This change was introduced in pull request #3569: Remove unnecessary class from Warning Text component.
Check your browser console for component initialisation errors
GOV.UK Frontend JavaScript components now provide errors if you initialise a component incorrectly.
These errors will be:
initAll()functionTo make sure the components behave as intended, we encourage you to check your browser console and address any errors by updating your markup or configuration.
Errors you might see include:
SupportError- when GOV.UK Frontend is not supported in the current browserElementError- when component templates have missing or broken HTML elementsConfigError- when component JavaScript configuration does not match our documentationThese changes were introduced in:
SupportErrorwhen instantiating components where GOV.UK Frontend is not supportedElementErrorwhen the module is not of the expected type alphagov/govuk-frontend#4104](https://github.com/alphagov/govuk-frontend/pull/4104\)))MissingElementErrorand use it within the Skip LinkElementErrorwhen "Exit this page" button is missingElementErrorwhen the menu of the header is missing but a toggle is presentElementErrorfor missing elements during Character count instantiationCheck any JavaScript that uses
HTMLElement.getAttributeto get the disabled state of a button works as expectedThe
disabledattribute on 'Disabled buttons' created using our Nunjucks macros no longer includes a value.If you are using
$button.getAttribute('disabled')to check for the disabled attribute in JavaScript, this will now return an empty string. This might cause unexpected behaviour if you are relying on the return value being the string 'disabled' or being truthy.Instead, we recommend checking for the
disabledattribute using$button.hasAttribute('disabled')or the$button.disabledIDL attribute.This change was introduced in pull request #2830: Set the boolean disabled attribute consistently in the Button component.
Check that inverse buttons still look as expected if you have customised the brand colour
Inverse button components now use the
$govuk-brand-coloursetting to determine the button's text colour and the button's background tint when hovered or activated. The button will only look different if$govuk-brand-colourhas been changed from the default.You can restore the previous blue colour by setting
$govuk-inverse-button-text-colourbefore importing the button component's Sass.This change was introduced in pull request #4043: Add ability to customise inverse button colours.
Check any Selects that have options without explicit values work as expected
The
govukSelectmacro will no longer include an empty value attribute for options that do not have a value set.If that option is selected, the value of the Select will become the text content of the option, rather than an empty string.
If you need to maintain the existing behaviour, you can set the value to an empty string.
This change was introduced in pull request #3773: Omit the value attribute from select options with no value.
New features
Use the Task list component to give users an overview of the tasks they need to complete
The Task list component displays all the tasks a user needs to do, and allows users to easily identify which ones are done and which they still need to do.
Each task in the list can have a title, status, link and an optional hint. When a link is added, the whole row is clickable.
This change was introduced in pull request #2261: Task list component..
Use the new focus style for links containing non-text content
We've added a new focus style for use with non-text content, such as links containing images and focusable elements that are not form controls. This new style paints a visible yellow and black outline around the entire element, ensuring the focus style is visible in all situations.
For links containing images, we've added the
govuk-link-imageclass. You should only use this class on links containing an image. If it also contains text, continue to usegovuk-linkinstead.You can use these styles in your own code by including the
govuk-focused-boxSass mixin.This change was introduced in pull request #3819: Add linked image focus style.
New link styles are now enabled by default
In GOV.UK Frontend v3.12.0 we introduced new link styles which are now enabled by default. They have:
The new link styles are now enabled by default. If you are setting
$govuk-new-link-stylestotruein your Sass you can now remove this.This change was introduced in:
Customise the colours of inverse buttons
For non-GOV.UK branded websites, you can now change the colours of inverse buttons - buttons intended for use on dark backgrounds.
To change the inverse button's background colour, set the
$govuk-inverse-button-background-colourSass variable.To change the inverse button's text colour, set the
$govuk-inverse-button-text-colourSass variable.This change was introduced in pull request #4043: Add ability to customise inverse button colours.
Precompiled CSS and JavaScript
The precompiled CSS and JavaScript files found in our GitHub releases are now also published to
govuk-frontendon npm.These changes were introduced in:
govuk-frontend.min.csspackage bundleCheck your tags align with design changes to the Tag component
We've changed the design of the Tag component to improve accessibility and readability.
Text within the tag is no longer bold and uppercase with extra letter spacing. It's now regular 19px text with the first letter of a word capitalised and the rest of the content lowercase. Due to this, there might be changes to the width of existing tags.
The colours have also changed to make them more distinguishable from buttons.
Check your service is using the correct capitalisation in the contents of tags and tags within phase banners.
This change was introduced in:
Recommended changes
We've recently made some non-breaking changes to GOV.UK Frontend. Implementing these changes will make your service work better.
Remove the X-UA-Compatible meta tag
Remove the meta tag from your page template.
Internet Explorer versions 8, 9 and 10 included a feature that would try to determine if the page was built for an older version of IE and would silently enable compatibility mode, which would modify the rendering engine's behaviour to match the older version of IE. Setting this meta tag prevented that behaviour.
Internet Explorer 11 deprecated this meta tag and defaulted to always using IE11's renderer when the page has a HTML5 doctype ().
As Frontend no longer supports Internet Explorer versions older than 11, you can now remove this meta tag.
This change was introduced in pull request #4434: Remove X-UA-Compatible meta tag.
Update the Pagination component's default
aria-labelWe've updated the default value of the Pagination component's
aria-labelto be more descriptive of the contents of the region. If you're using the component's default label, you might wish to update it to the new default of 'Pagination'.You do not need to change anything if you're using the
govukPaginationNunjucks macro.This change was introduced in pull request #3899: Update default
aria-labelin Pagination component.Update the Exit this Page button's default text
We've updated the default text of the Exit this Page button. It now includes visually-hidden text to clarify that the button is a safety tool and not a generic method of leaving the current page.
If you are using the component's default text, you might wish to update it to the new value:
<span class="govuk-visually-hidden">Emergency</span> Exit this pageYou do not need to change anything if you're using the
govukExitThisPageNunjucks macro.This change was introduced in pull request #3989: Update default Exit This Page button text.
Add the
relattribute to the Exit this Page button and secondary linkUpdate the Exit this Page button and secondary link to include a new attribute and value:
rel="nofollow noreferrer".Adding this attribute does 2 things:
This fixes a potential risk where the external website could detect that a user had visited from a GOV.UK page and play that information back to the user, which could risk a user's personal safety in some contexts.
You do not need to change the Exit this Page button if you're using the
govukExitThisPageNunjucks macro. You will still have to update the secondary link manually.This change was introduced in [pull request #4054: Add
relattribute to the Exit this Page button](https://togiConfiguration
📅 Schedule: Branch creation - "after 7am and before 11am every weekday" in timezone Europe/London, Automerge - At any time (no schedule defined).
🚦 Automerge: Enabled.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR has been generated by Mend Renovate. View repository job log here.