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)

GOV.UK Frontend release 2.6.0

🎉 A new autocomplete attribute support added to text input, date input and textarea components (See the changelog for more details) 🎉

Thanks @andysellick, @bilbof, @dankmitchell and @edwardhorsford for contributing to this release.

Changelog

🆕 New features:

• Enable autocomplete attributes for input components.

  You can now set the autocomplete attribute on input, date input and textarea components using the component macros.

  This was already possible to do with the attributes option but this change highlights the new WCAG 2.1 success criteria Identify Input Purpose which "is to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities".

  See autofill for the full list of attributes that can be used.

  (PR #1146)

🔧 Fixes:

• Include Accordion component in global namespace

  Accordion component was not exported and was therefore unavailable in global namespace

  (PR #1157)

• Fix Checkboxes and Radios targeting selectors outside it's scope

  Thanks to @andysellick and @bilbof for helping us with this issue.

  (PR #1156)

• Fixes styling of the accordion component when there is no JavaScript or it has been turned off

  Thanks @dankmitchell for reporting this issue (#1130)

  (PR #1149)

• Remove hover state for accordion sections on mobile

  (PR #1148)

• Fix container not being centered in IE8

  Since the header and the footer component use this container it also fixes centering for these components.

  (PR #1147)

• Make gutters in the header consistent with the grid

  This means that the header will now line up with the grid.

  Thanks to @edwardhorsford for raising this issue.

  (PR #1144)

GOV.UK Frontend release v2.5.1

Quick release to simplify the markup for the most common case for summary list component: when they're used in the check answer pattern, which only has one action per row.

Changelog

🔧 Fixes:

• Update summary list to simplify actions

  Only output actions in a list when there's multiple actions.

  (PR #1131)

GOV.UK Frontend release v2.5.0

Two brand NEW components added in this release.

Contributions from the community include:
@frankieroberto, @injms and first time contributor @bsushmith

Changelog

🆕 New features:

• Accordion component 🎉

  Contributed by @frankieroberto, as well as @injms, @hannalaakso, @joelanman and others.

  The accordion component lets users show and hide sections of related content on a page.

  For more information see guidance.

  (PR #958)

• Add desktop specific grid column widths

  This allow you to define different grid behaviour for the tablet and desktop
  breakpoints. For example, you can make a column two-thirds on desktop but
  expand to full-width on smaller tablet sized screens.

  (PR #1094)

• Add summary list component

  This component was initially developed to allow us to build the
  'check your answers' pattern.

  It is mostly the same as in the original pattern with some notable differences:

  • On smaller screens it wraps by default
  • It's possible to have multiple actions

  (PR #1065)

🔧 Fixes:

• Update visually hidden class to fix ordering issue in VoiceOver OSX

  We have fixed an issue in VoiceOver OSX where using the govuk-visually-hidden class in links would result in the text being announced out of order.

  We also now recommend to use aria-label or aria-labelledby where appropriate.

  Thanks to @stevenaproctor and the accessibility team at HMRC for letting us know about this issue.

  (PR #1109)

• Improve rendering in older Internet Explorer

  Added a meta tag to ensure that older IE versions always render with the correct rendering engine

  (PR #1119)