[Snyk] Upgrade govuk-frontend from 4.4.0 to 4.4.1

[snyk-bot]

Snyk has created this PR to upgrade govuk-frontend from 4.4.0 to 4.4.1.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

---

• The recommended version is 1 version ahead of your current version.
• The recommended version was released 22 days ago, on 2022-12-16.

Release notes

Package name: govuk-frontend

• 4.4.1 - 2022-12-16
  

  Fixes

  We've made fixes to GOV.UK Frontend in the following pull requests:

  • #3107: Fix focus styles for links split over multiple lines in Chromium 108+ (Chrome 108+, Edge 108+, Opera 94+)
• 4.4.0 - 2022-11-14
  

  New features

  Change the Button component's background and text colour

  For non-GOV.UK branded websites, you can now change the Button component background and text colour.

  To change the Button component background colour, set the $govuk-button-background-colour Sass variable.

  To change the Button component text colour, set the $govuk-button-text-colour Sass variable.

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

  $govuk-button-background-colour: govuk-colour("yellow");
  $govuk-button-text-colour: govuk-colour("black");
  @ import "node_modules/govuk-frontend/govuk/components/button/index";

  This was added in pull request #2752: Change the Button component background and text colour. Thanks to @ NickColley for this contribution.

  Localise the navigation menu toggle button

  When using the header Nunjucks macro, you can now translate the text of the mobile navigation menu toggle button by using the menuButtonText parameter.

  You should avoid lengthy values for the menuButtonText parameter. If the text is too long it can overflow and cause visual issues.

  This was added in pull request #2720: Add parameter to localise mobile menu toggle button.

  Localise the character count's textarea description/fallback text

  When using the character count Nunjucks macro, you can now translate the description of textarea by using the textareaDescriptionText option.

  This text is announced by screen readers when the character count input is focused. It's also displayed visually as a fallback if JavaScript is not available.

  This was added in pull request #2742: Add ability to customise character count fallback text, and the option renamed to textareaDescriptionText in pull request #2915.

  Localise the character count's counter message

  You can now translate the text shown by the character count component to inform users of:

  • when they have reached the maximum number of characters or words
  • the number of characters or words over or under the allowed maximum

  The Nunjucks macro accepts new options so you can customise each message. You can:

  • Use charactersAtLimitText or wordsAtLimitText to provide the text that shows when users have reached the limit.
  • Use charactersUnderLimitText or wordsUnderLimitText to provide the text that shows when users are under the limit. The component will pluralise the message according to the configured locale and the number of characters or words remaining.
  • Use charactersOverLimitText or wordsOverLimitText to provide the text that shows when users are over the limit. The component will pluralise the message according to the configured locale and the number of characters or words remaining.

  You'll find guidance about the plural forms in our documentation about localising GOV.UK Frontend. The component will replace %{count} with the number of characters over or under the limit.

  If you're not using Nunjucks macros, you can use data-* attributes to provide these translations. Within the attribute value, any quotation marks or other characters reserved by HTML needs to be converted into their HTML entity equivalents.

  You can:

  • use data-i18n.characters-at-limit or data-i18n.words-at-limit for when users are at the limit
  • configure the text that informs the end user they are under the character or word limit, by using data-i18n.characters-under-limit.{other,many,few,two,one,zero} or data-i18n.words-under-limit.{other,many,few,two,one,zero}, with one suffix for each plural form required by your locale
  • configure the text that informs the end user they are over the character or word limit, by using data-i18n.characters-over-limit.{other,many,few,two,one,zero} or data-i18n.words-over-limit.{other,many,few,two,one,zero}, with one suffix for each plural form required by your locale

  You can also provide these messages using a JavaScript configuration object when creating an instance of the component or initialising all components. See our guidance on localising GOV.UK Frontend for how to do this.

  This was added in the following pull requests:

  • #2895 Add macro options to configure CharacterCount translations
  • #2887 Allow CharacterCount component to receive i18n config via JS

  Localise the character count's input description for assistive technologies

  When configuring the character count's limit in JavaScript, you can customise the description provided to assistive technologies when users focus the input (so it indicates the overall limit of characters or words).

  Depending on the plural form required by your locale, you can pass the description in the HTML using the data-i18n.textarea-description.{other,many,few,two,one,zero} attribute on the element to provide the text to set as the description.

  You can also provide these messages using a JavaScript configuration object when creating an instance of the component or initialising all components. See our guidance on localising GOV.UK Frontend for how to do this.

  This was added in pull request #2915.

  Localise the accordion's toggle buttons

  You can now translate the text of the accordion component's show and hide toggle buttons.

  When using the Nunjucks macro, you can use the new showSectionText and hideSectionText parameters to customise the text of the 'show' and 'hide' toggles in each section.

  You can also use showAllSectionsText and hideAllSectionsText parameters to customise the text of the toggle at the top of the accordion.

  If you're not using the Nunjucks macro, you can customise these using data-* attributes. Within the attribute value, any quotation marks or other characters reserved by HTML needs to be converted into their HTML entity equivalents.

  • data-i18n.show-section
  • data-i18n.show-section-aria-label
  • data-i18n.hide-section
  • data-i18n.hide-section-aria-label
  • data-i18n.show-all-sections
  • data-i18n.hide-all-sections

  You can also change this text for all instances of the Accordion using a JavaScript configuration object. See our guidance on localising GOV.UK Frontend for how to do this.

  This was added in pull requests:

  • #2818: Add support for localisation via data-* attributes to Accordion component
  • #2826: Add support for localisation via JavaScript configuration to Accordion component

  Suppress deprecation warnings

  You can now suppress warnings from deprecations within GOV.UK Frontend by updating the $govuk-suppressed-warnings map in Sass. Every deprecation warning will now include a warning "key" which you can use in the following code, placed at the root of your sass project:

  $govuk-suppressed-warnings: (
    deprecated-feature
  );

  This was added in #2911 Add warning suppression functionality

  Configure components in JavaScript

  JavaScript components can get the same configuration options in 2 ways - through data attributes, as before, and now when creating an instance. These components are:

  • the Button component, for its preventDoubleClick option (matching data-prevent-double-click)
  • the CharacterCount component, for its maxlength, maxwords and threshold options (matching data-maxlength, data-maxwords and data-threshold, respectively)
  • the ErrorSummary component, for its disableAutoFocus option (matching data-disable-auto-focus)
  • the NotificationBanner component, for its disableAutoFocus option (matching data-disable-auto-focus)

  You can leave out these configuration options when using the Nunjucks macro and provide configuration when:

  • creating a component, in a configuration object as second argument
  • initialising components in bulk using initAll

  For example:

  // Creating a single instance
  var button = document.querySelector('[data-module="button"]')
  new GOVUKFrontend.Button(button, {preventDoubleClick: true})

  // Or initialising components in bulk
  GOVUKFrontend.initAll({
  button: {
  preventDoubleClick: true
  }
  // Or, for the other components,
  // characterCount: {/* options /},
  // errorSummary: {/ options /},
  // notificationBanner: {/ options */}
  })

  You can find more information about component configuration in GOV.UK Frontend documentation.

  This was added in pull requests specific for each components:

  • NotificationBanner – #2843
  • ErrorSummary – #2854
  • Button – #2867
  • CharacterCount – #2883

  Recommended changes

  Update the HTML for the error summary

  If you're not using the Nunjucks macros, you can improve the experience for screen reader users by making these changes to the error summary markup:

  • Remove aria-labelledby="error-summary-title" and role="alert" from the parent element (govuk-error-summary)
  • Add a div wrapper around the contents of govuk-error-summary with the attribute role="alert"
  • Remove id="error-summary-title" from the error summary h2 (govuk-error-summary__title)

  This will enable screen reader users to have a better, more coherent experience with the error summary. It will make sure users of JAWS 2022 or later will hear the entire contents of the error summary on page load and therefore have further context on why there is an error on the page they're on.

  This was added in pull request #2677: Amend error summary markup to fix page load focus bug in JAWS 2022.

  Deprecated features

  Stop using the compatibility mode settings

  In GOV.UK Frontend v5.0 we will stop supporting compatibility with legacy codebases. We are therefore deprecating the compatibility mode variables associated with legacy codebases:

  • $govuk-compatibility-govukfrontendtoolkit
  • $govuk-compatibility-govuktemplate
  • $govuk-compatibility-govukelements

  This was introduced in pull request #2882: Deprecate compatibility mode settings.

  Stop using settings associated with legacy codebases

  In GOV.UK Frontend v5.0 we will stop supporting compatibility with legacy codebases. As part of this, we're deprecating settings controlled by compatibility mode variables. This includes the govuk-compatibility mixin and the following settings:

  • $govuk-use-legacy-palette
  • $govuk-use-legacy-font
  • $govuk-typography-use-rem
  • $govuk-font-family-tabular

  This was introduced in pull request #2844: Remove compatibility mode from govuk-frontend.

  Fixes

  In pull request 2851: Support Prototype Kit v13 we've introduced support for the plugins system included in the upcoming Prototype Kit v13.

  We've made fixes to GOV.UK Frontend in the following pull requests:

  • #2807: Tidy up and refactor the Character Count JavaScript
  • #2811: Use Element.id to get module id for accordion
  • #2821: Avoid duplicated --error class on Character Count
  • #2800: Improve Pagination component print styles
  • #2909: Fix JavaScript errors when entering text into the Character Count in IE8

from govuk-frontend GitHub release notes

Commit messages

Package name: govuk-frontend

• f31e6f8 Merge pull request #3108 from alphagov/support-release-v4.4.1
• 9cec325 Release v4.4.1
• 8cad4bc Merge pull request #3107 from alphagov/cherry-pick-chrome-links-fix
• dc6f98e Document in CHANGELOG
• d188e40 Fix link focus styles in Chromium 108+

Compare

---

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs