GOV.UK Frontend release v3.2.0

This release is another smaller release with some new features and fixes 🐛 🔨

If you're using GOV.UK Frontend with GOV.UK Template, the button component is now readable when it has an active focus state.

Thanks to Emma Lewis for helping with this release.

New features

Add classes to the form group wrapper of the character count component

You can now add classes to the form group wrapper of the character count component.

govukCharacterCount({
  formGroup: {
    classes: 'app-character-count--custom-modifier'
  }
})

• Pull request #1553: Include formGroup on character count and pass through to textarea to allow class to be added to character count form group. Thanks to Emma Lewis.

Fixes

• Pull request #1548: Fix fieldset legend text clipping when using a custom or fallback font.
• Pull request #1559: Stop IE8 from downloading GDS Transport font.
• Pull request #1564: Ensure legacy styles do not override button active state.

GOV.UK Frontend release v3.1.0

This release contains a few improvements and fixes that include accessibility improvements to the details component.

Thanks to @htmlandbacon and @andrew-mcgregor for their help with this release.

Changelog

New features

Add attributes to the fieldset on the date input component

You can now pass attributes to add to the fieldset on the date input component.

Pull request #1541: Allow date input fieldset attributes to be set. Thanks to andrew-mcgregor for raising this.

Add ARIA role to the fieldset component

You can now pass an ARIA role to the fieldset component.

Pull request #1541: Allow date input fieldset attributes to be set.

Add inputmode to the input component

You can now pass inputmode to the input component.

govukInput({
  inputmode: 'email'
})

• Pull request #1527: Add inputmode option to the input component

Fixes

• Pull request #1523: Improve accessibility of details component by polyfilling only where the native element is not available.
• Pull request #1512: Update components to only output items when they are defined.
• Pull request #1538: Simplify button types to avoid unnecessary type attribute.
• Pull request #1542: Only default two thirds/one-third layout when footer has two sections.

GOV.UK Frontend release v3.0.0

In this release, we’ve made some important changes to improve the accessibility of pages built with GOV.UK Frontend. This includes making sure that the styles, components and patterns in GOV.UK Frontend meet level AA of WCAG 2.1.

We recommend you update GOV.UK Frontend with npm.

If you’re updating compiled files, you only need to:

• update and add data-module attributes
• update CSS class names

Contact the GOV.UK Design System team if you need help updating or installing GOV.UK Frontend.

Thanks to @colinrotherham, edwardhorsford, @frankieroberto and @Nooshu for their help with this release.

Breaking changes

You must make the following changes when you migrate to this release, or your service may break.

Update file paths, attributes and class names

To make sure GOV.UK Frontend's files do not conflict with your code, we've moved our package files into a directory called govuk.

If you’re using Sass

Add govuk/ after govuk-frontend/ to @import paths in your Sass file.

For example:

@import "node_modules/govuk-frontend/govuk/all";

If you’ve added node_modules/govuk-frontend as a Sass include path, add govuk/ to your @import paths:

@import "govuk/all";

If you’re using Javascript

You must do the following.

1. Update file paths.
2. Update and add data-module attributes.
3. Update CSS class names.

Update file paths

You must add govuk/ to your import paths.

If you're importing node_modules/govuk-frontend/all.js, change this import path to node_modules/govuk-frontend/govuk/all.js.

If you’re importing a specific path, add govuk/ after govuk-frontend/. For example, if you're importing the button component:

import Button from 'govuk-frontend/govuk/components/button/button'

Update and add data-module attributes

You do not need to do anything if you're using Nunjucks macros and the initAll function.

If you are not using Nunjucks macros, add a govuk- prefix to data-module attribute values. For example:

<div class="govuk-accordion" data-module="govuk-accordion">
...
</div>

The button and details components now also use the data-module attribute for initialisation. If you are not using Nunjucks macros, add:

• data-module="govuk-button" to each <button> HTML tag
• data-module="govuk-details" to each <details> HTML tag

If you're using your own JavaScript code to initialise components, add a govuk- prefix to any selectors that find components using the data-module attribute.

Pull request #1443: Ensure GOV.UK Frontend component selectors cannot conflict when initialised

Update CSS class names

You do not need to do anything if you're using Nunjucks.

If you're using HTML or custom JavaScript, change:

• js-character-count to govuk-js-character-count
• js-header-toggle in the GOV.UK Frontend header component to govuk-js-header-toggle

Pull request #1444: Renames js- css prefix to govuk-js-

If you’re using Nunjucks

1. Change the list of paths in nunjucks.configure so that the only GOV.UK Frontend path is node_modules/govuk-frontend/:

nunjucks.configure([
  "node_modules/govuk-frontend/"
])

2. If you've extended the page template, add govuk/ to the template path:

{% extends "govuk/template.njk" %}

3. Change the import paths in your components so they include govuk/components/. For example:

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

Update asset paths

In the assets path, add govuk/ after govuk-frontend/:

/node_modules/govuk-frontend/govuk/assets

If your code uses Express.js, you must also use the following code in your configuration file:

app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/govuk/assets')))

Pull requests:

• #1458: Namespace nunjucks and components
• #1467: Update the main entry point in package.json

Migrate to the new accessible focus states

The focus state of components now meets the new WCAG 2.1 level AA requirements.

You must update your component’s focus state to make your design consistent with our new focus styles.

If you've extended or created components, you can no longer use the govuk-focusable or govuk-focusable-fill Sass mixins.

If you're using govuk-focusable, you must remove it. There’s no direct replacement, so you must use our Sass variables to make your components consistent with GOV.UK Frontend.

If you're using govuk-focusable-fill, include the govuk-focused-text mixin inside your component's :focus selector. For example:

.app-component:focus {
  @include govuk-focused-text;
}

Pull requests:

• #1309: Update links (and things that look like links) to use the new focus style
• #1312: Update form inputs focus to comply with WCAG 2.1
• #1313: Add new focus style to buttons
• #1321: Update footer links to use new focus style
• #1324: Update accordion to use new WCAG 2.1 compliant focus style
• #1326: Update tabs component to WCAG 2.1 compliant focus style
• #1361: Remove govuk-focusable, govuk-focusable-fill mixins, introduce govuk-focus-text mixin

Update colours

You can now use the following new colour variables that we've added to the colour palette:

• dark-blue
• dark-grey
• mid-grey
• light-grey

5 Sass colour variables no longer exist. Replace the following colour variables if you're using Sass:

Colour variable removed	Suggested replacement
bright-red	red
grey-1	dark-grey
grey-2	mid-grey
grey-3	light-grey
grey-4	light-grey

You should check the contrast ratio of your colours.

If you're not using Sass, change the values of the following colours:

Colour name	Old value	Replace with
purple	#2e358b	#4c2c92
red	#b10e1e	#d4351c
yellow	#ffbf47	#ffdd00
green	#006435	#00703c
grey-2	#bfc1c3	#b1b4b6
grey-3	#dee0e2	#f3f2f1
grey-4	#f8f8f8	#f3f2f1
light-blue	#2b8cc4	#5694ca
blue	#005ea5	#1d70b8
bright-red	#df3034	#d4351c

We've also changed the background of the following components:

• buttons - green instead of a custom green
• confirmation panels - green instead of turquoise
• links in their hover state - dark-blue instead of light-blue

If you're using legacy projects like GOV.UK Elements, you can keep your current colours by turning on compatibility mode.

Read our blog post about why we changed the colour palette.

Pull request #1288: Update colour palette.

Check the new version of the font

The size and baseline of the Design System's font are now more consistent with other fonts. Text now aligns vertically in text boxes without you needing to adjust it.

If you've extended or created components, you should check that your text is still vertically aligned correctly.

If you're using GOV.UK Frontend and GOV.UK Template, you can turn on compatibility mode to keep using the font from GOV.UK Template.

Pull requests:

• #1434: Update font to use v2 of GOV.UK Transport font
• #1441: Removing font style adjustments

Update links from error summary components to radios and checkboxes

If you've linked from an error summary component to the first input in a radios or checkboxes component, the link will no longer work.
...

GOV.UK Frontend release v2.13.0

This release contains features and fixes that make GOV.UK Frontend work better in certain scenarios.

Thanks to Colin Oakley and Paul Massey for their help with this release 🎉

Changelog

🆕 New features

• You can now override the visually hidden 'Support links' text in the footer by setting meta.visuallyHiddenTitle.

  (Pull request #1387)

🔧 Fixes

• Secondary buttons and warning buttons now have the correct background colour when they're disabled.

  (Pull request #1392)

• The crown logo image in the header now:

  • has height and width attributes set
  • aligns better with 'GOV.UK' in IE8

  (Pull request #1419)

GOV.UK Frontend release v2.12.0

This release includes some new Nunjucks features and bug fixes.

Thanks to Colin Rotherham, Thomas Leese and gunjam for their help with this release.

Changelog

🆕 New features:

• Support custom attributes on summary list action links

  You can now use the attributes macro option to add additional HTML attributes to summary list action links.

  (PR #1372)

• Support aria-describedby on all form fields

  All form fields now support an initial aria-describedby value, populated before the optional hint and error message IDs are appended.

  Useful when fields are described by errors or hints on parent fieldsets.

  (PR #1347)

🔧 Fixes:

• Update colour for MHCLG

  Fixes the brand colour for MHCLG to their correct corporate "green" brand.

  (PR #1319)

• Remove deprecated @else-if statement, replace with @else if

  (PR #1333)

• Prevent the fallback PNG image for the crown in the header from being
  downloaded unnecessarily in Internet Explorer and Edge.

  (PR #1337)

GOV.UK Frontend release v2.11.0

Changelog

🆕 New features:

• Add new secondary and warning button variants

  (PR #1207)

• Add new govuk-shade and govuk-tint functions for creating shades and tints of
  colours.

  (PR #1207)

• Add support for custom row classes on the summary list component (including support for some rows without action links)

  (PR #1259)

• Ensure fieldset never exceeds max-width

  This fix ensures that both WebKit/Blink and Firefox are prevented from expanding their fieldset widths to the content's minimum size.

  This was preventing max-width: 100% from being applied to select menus inside a fieldset.

  See discussion in "Reset your fieldset" and raised by issue #1264

  (PR #1269)

🔧 Fixes:

• Add various fixes to the summary list component:

  1. Fixes the 1px row height change when borders are removed
     Padding is now adjusted by 1px instead

  2. Fixes the text alignment when the actions column isn't added
     So the key column always stays at 30% width

  (PR #1259)

GOV.UK Frontend v2.10.0

Changelog

🆕 New features:

• Add smaller versions of radio buttons and checkboxes

  Thanks to @owenm6 for their help and support on this one.

  (PR #1125)

🔧 Fixes:

• Prevent duplicate checkbox aria-describedby

  Addresses an edge case where a checkbox with a hint (but without a fieldset) is output with duplicate aria-describeby attributes. Fixes issue #1248.

  Thanks to @colinrotherham for fixing this issue.

  (PR #1265)

GOV.UK Frontend v2.9.0

This release contains features and fixes that allow GOV.UK Frontend to work better in a few scenarios, thanks everyone for your help.

Thanks to @danboscaro, @alex-ju, @edwardhorsford, @stevesims, @injms

Changelog

🆕 New features:

• Add classes to action items in the summary list component

  (PR #1233)

• Allow initAll to be scoped to a specific part of a page

  See "Initialise GOV.UK Frontend in only certain sections of a page" for more information.

  (PR #1216)

🔧 Fixes:

• Fix tabs bullet point character encoding issue when not enhanced

  Thanks Ed Horsford and Steve Sims for their help on this one.

  (PR #1247)

• Update padding of govuk-main-wrapper

  This increases the padding of govuk-main-wrapper (on tablet and above) to be more inline with GOV.UK. When updating, your pages will have 10px more white space above and below the 'main' content area.

  (PR #1073)

• Remove error-summary dependence on document.onload

  (PR #1215)

• Ensure font is not loaded twice on slow networks

  This is only an issue for users that are using alphagov/govuk_template alongside GOV.UK Frontend.

  (PR #1242)

GOV.UK Frontend v2.8.0

Considerations for fixed components such as modals

We have been made aware that the change to force scroll bars to appear at all times can change the behaviour of some components such as modals.

If you're using your own components that rely on the overflow state of the document (such as modals) you should make sure you test those components when updating to this version.

🎉   Highlights

This release:

• improves the experience for users using phones with non‑rectangular displays (such as those with notches)
• introduces a new button enhancement to try and prevent 'double clicks' firing two click events
• makes error messages more explicit for screen reader users
• fixes an issue where the content 'jumps around' in browsers that resize the viewport when displaying scrollbars
• fixes issues with the summary list and inset text components
• allows you to use the attributes option on inputs within the date input component

Thanks to everyone that contributed to this release.

🆕   New features

Enable pattern attribute for input

You can now set the pattern attribute on input fields using the component macros:

{{ govukInput({
  name: "example",
  pattern: "[0-9]*"
}) }}

As well as pattern, custom attributes can also be added on day/month/year inputs (e.g. data-example) shown below:

{{ govukDateInput({
  items: [
    {
      pattern: "[0-9]*",
      attributes: {
        "data-example": "value"
      }
    }
  ]
}) }}

(PR #1172)

Prevent horizontal jump as scrollbars appear

As content vertical height grows (e.g. autocomplete results appear), browsers may add scroll bars causing the page to jump horizontally in position.

To avoid this, re-introduce fix from GOV.UK Template:
#1204

(PR #1230)

Accommodate camera notches on new devices (iPhone X, Google Pixel 3 etc)

On newer devices with "camera notches", browsers reserve a safe area in landscape orientation (known as pillarboxing) so content isn't obscured.

To avoid this, support has been added for viewport-fit=cover as shown here:

https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Thanks to @colinrotherham for contributing this feature.

(PR #1176)

Prefix error messages with a visually hidden "Error:" to make it clearer to users of assistive technologies

To help users of some assistive technologies, like screen readers, the error message component now includes a hidden 'Error:' prefix before the message.

If you have error messages written in another language then you'll need to translate the 'Error' prefix.

(PR #1221)

Prevent accidental multiple submissions of forms

If a user double clicks a submit button in a form, we debounce this event and ignore the second click.

HTML data attribute:

<button class="govuk-button" data-prevent-double-click="true">
  Submit
</button>

Nunjucks macro:

{{ govukButton({
  text: "Submit",
  preventDoubleClick: true
}) }}

Thanks to @quis for contributing this feature.

(PR #1018)

🔧   Fixes

Ensure that files within the core, objects and overrides layers can be imported individually

Unlike components, the files within these layers did not previously import their dependencies (for example, most of them require the govuk-exports mixin but did not import it).

We've also added tests to ensure that files within these layers can be imported and rendered to CSS without erroring, which should catch this in the future.

Thanks to Alasdair McLeay for originally raising a PR to fix this.

(PR #1235)

Ensure inset component does not misalign nested components

Thanks to Paul Hayes for raising this issue.

(PR #1232)

Improve word wrapping in summary list component

Thanks to Edward Horsford and Lee Kowalkowski for their help on this one.

Also thanks to Malcolm Butler for exploring a previous version of this fix.

(PR #1220)

GOV.UK Frontend release 2.7.0

Apart from adding a configuration file to allow us to support extensions in the GOV.UK Prototype Kit, this release contains a fix for disabling incorrect iOS/Edge text size adjustments and fixes wrapping of long lines in the summary list component.

Thanks @colmjude, @matcarey, @colinrotherham and @MoJ-Longbeard for contributing to this release

Changelog

🆕 New features:

• Added config file for prototype kit.

  Added a configuration file for an experimental feature in Prototype kit to allow departments to use their own frontend alongside govuk-frontend

  Thanks @matcarey (HMRC) for this contribution

  (PR #1102)

• Disable incorrect iOS/Edge text size adjustments

  To cater for non-responsive websites, iOS and Edge automatically increase font sizes (iOS in landscape, Edge in portrait on HiDPI displays).

  Since we have already considered typography at these device sizes, this feature is now turned off.

  (PR #1178)

🔧 Fixes:

• Fix wrapping of long lines of text in summary list

  Thanks to @MoJ-Longbeard for raising the issue.

  (PR #1169)