[Snyk] Upgrade govuk-frontend from 5.0.0 to 5.3.0

[govTechSatish]

This PR was automatically created by Snyk using the credentials of a real user.

Snyk has created this PR to upgrade govuk-frontend from 5.0.0 to 5.3.0.

ℹ️ 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 3 versions ahead of your current version.
• The recommended version was released 21 days ago, on 2024-03-26.

Release notes

Package name: govuk-frontend

• 5.3.0 - 2024-03-26
  

  To install this version with npm, run npm install govuk-frontend@5.3.0. You can also find more information about how to stay up to date in our documentation.

  New features

  Use the Password input component to help users accessibly enter passwords

  The Password input component allows users to choose:

  • whether their passwords are visible or not
  • to enter their passwords in plain text

  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 group class="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:

  • move all classes and attributes from the form group <div> to the component wrapper <div>
  • remove the opening <div> and closing </div> tags used by the form group
  • check the count message is now directly after the <textarea>

  The following example shows some HTML and the difference once it’s updated.

  HTML before:

  <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
    <div class="govuk-form-group">
      <!-- // Label, hint, error and textarea -->
    </div>
    <!-- // Count message -->
  </div>

  HTML after:

  <div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
    <!-- // Label, hint, error, textarea and count message -->
  </div>

  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 formGroup as module wrapper.

  Remove redundant role attributes from elements

  We'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 role attribute from some elements. These include the:

  • main role on the main element in the template
  • banner role on the header element in the Header component
  • contentinfo role on the footer element in the Footer component
  • navigation role on the nav element in the Pagination component

  These 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 role attributes.

  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:

  • #1573: feat: add preset and plugin options for browserslist in the cssnano repository
  • #4829: Bump the postcss group with 2 updates

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

  • #4811: Use KeyboardEvent.key over deprecated KeyboardEvent.keyCode in the Tabs component
  • #4812: Use KeyboardEvent.key over deprecated KeyboardEvent.keyCode in the Button component
  • #4813: Remove deprecated KeyboardEvent properties from the Exit this Page component
  • #4855: Fix mobile product name being misaligned in new type scale
• 5.2.0 - 2024-02-21
  

  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 useTudorCrown parameter.

  To install this version with npm, run npm install govuk-frontend@5.2.0. 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:

  • point 16 now returns 16px across all screen sizes
  • point 19 now returns 19px across all screen sizes
  • point 24 remains as 24px on large screens
  • point 24 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
  • point 27 remains as 27px on large screens
  • point 27 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
  • point 36 remains as 27px on large screens
  • point 36 now returns 27px on small screens instead of 24px and has a line height 30px instead of 25px

  To enable these changes, set the feature flag variable $govuk-new-typography-scale to true before you import GOV.UK Frontend in your Sass files:

  // application.scss
  $govuk-new-typography-scale: true;
  @ import "govuk-frontend/all";

  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) and beforeInput(s) options to form groups.

  Deprecated features

  Stop using the useTudorCrown parameter in the Heading component

  The rollout for the revised GOV.UK logo has started and the Tudor crown logo is now shown by default. We’ve deprecated the useTudorCrown parameter and will remove it in the next major release.

  You can now remove the useTudorCrown parameter, 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:

  • #4768: Fix z-index of inputs in Radios and Checkboxes component
  • #4784: Fix LibSass calc() compatibility in Radios and Checkboxes
• 5.1.0 - 2024-02-05
  Read more
• 5.0.0 - 2023-12-08
  Read more

from govuk-frontend GitHub release notes

Commit messages

Package name: govuk-frontend

• 0801b62 Merge pull request #4896 from alphagov/release-5.3.0
• 05bea72 Release v5.3.0
• 8dae1da Merge pull request #4889 from alphagov/dependabot/npm_and_yarn/types-e8219633e3
• f655ff0 Merge pull request #4888 from alphagov/dependabot/npm_and_yarn/test-b842278729
• c3685e9 Bump the types group with 1 update
• 2d22c6e Bump the test group with 1 update
• 2238606 Merge pull request #4894 from alphagov/dependabot/npm_and_yarn/postcss-1a9d4a6feb
• 15f55d7 Bump the postcss group with 3 updates
• ad66ea7 Merge pull request #4885 from alphagov/dependabot/npm_and_yarn/lint-0bc2769b6d
• 58aea13 Merge pull request #4882 from alphagov/dependabot/npm_and_yarn/babel-569e292a9e
• 7da51f7 Merge pull request #4892 from alphagov/dependabot/npm_and_yarn/html-validate-8.18.0
• c7cee2d Merge pull request #4893 from alphagov/dependabot/npm_and_yarn/filesize-10.1.1
• 79b5037 Merge pull request #4886 from alphagov/dependabot/github_actions/dot-github/workflows/actions/install-node/actions/cache-4.0.2
• d25beeb Merge pull request #4890 from alphagov/dependabot/npm_and_yarn/webpack-dev-server-5.0.4
• a3b4eef Merge pull request #4883 from alphagov/dependabot/github_actions/dot-github/workflows/actions/build/actions/cache-4.0.2
• 26a49eb Bump filesize from 10.1.0 to 10.1.1
• 0d43916 Bump html-validate from 8.15.0 to 8.18.0
• 547421d Bump webpack-dev-server from 5.0.3 to 5.0.4
• 56dedaa Merge pull request #4884 from alphagov/dependabot/github_actions/actions/cache-4.0.2
• 2337c0b Bump actions/cache in /.github/workflows/actions/install-node
• 0ee0298 Bump the lint group with 5 updates
• f487ba1 Bump actions/cache from 4.0.1 to 4.0.2
• 3bd38b9 Bump actions/cache in /.github/workflows/actions/build
• 3e2dc49 Bump the babel group with 2 updates

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