govuk_publishing_components 64.1.2 → 64.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b76aa67410518b26c0c6d78c41091e672f6e365fc88b9da459cceb52839edcbb
-  data.tar.gz: 4ce5beffe1d098ae456534a6bb82e414092b645e96b0b342f75700c6b237a635
+  metadata.gz: ac4e471b589031c6a117d700be0a816631ed09e325fd174a05965d7d86f5ad95
+  data.tar.gz: 8a9a5455dd4b3464b4abd50a2b84fb7a21d39415e7c72f6043232f8711f20db7
 SHA512:
-  metadata.gz: e7212d1dd0e31d1a87adf5463afb9b57b0751a398adabf47357f93586499ac70b2009c6032b9a4c356f9e07f63c9ef7d968041bcabc01d784a708d7703df704d
-  data.tar.gz: e3793bc2726f8e95f930dabcaf0a0cd8bd8e3bf14077c105b757878986fce456a74a9e1cc492488ad7f5be0bd3bc14cd5f9bed9cc54e260e763ef2a820168764
+  metadata.gz: b695337f57ca2b458e5df63e52338565ad1e0021be84e912a29373b0119d5ce96c49a5b78bc88b577372ef2efcfcb2b147e1bb7e1c6433cf1b069499187196f2
+  data.tar.gz: 216b8f0d3f45d9a8732983b26361632d6597bc21279c170dbbf4a123e416b9c1863abb922e898afe0af3d897fa0b6fe4b742fb9d21b16ea4a59cdaef10a1f98c

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -193,13 +193,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var toggleText = document.createElement('span')
     var toggleStatus = document.createElement('span')
 
-    toggleText.classList.add('mc-toggle-text')
+    toggleText.classList.add('js-toggle-text')
     toggleText.innerHTML = chartVisibleText
 
     toggleStatus.classList.add('govuk-visually-hidden', 'mc-toggle-status')
     toggleStatus.setAttribute('role', 'alert')
 
-    link.classList.add('govuk-body-s', 'mc-toggle-button')
+    link.classList.add('gem-c-button', 'govuk-button', 'govuk-button--secondary')
     link.appendChild(toggleText)
     link.appendChild(toggleStatus)
 
@@ -213,7 +213,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.toggleLink.addEventListener('click', function (e) {
       e.preventDefault()
 
-      var toggleText = that.toggleLink.querySelector('.mc-toggle-text')
+      var toggleText = that.toggleLink.querySelector('.js-toggle-text')
       var toggleStatus = that.toggleLink.querySelector('.mc-toggle-status')
 
       that.$graphContainer.classList.toggle('mc-hidden')

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -684,7 +684,7 @@ $search-icon-height: 20px;
     border-top: 0;
     border-bottom: 2pt solid $govuk-print-text-colour;
     margin: 0 0 5mm;
-    background: none;
+    background: transparent;
 
     &:has(.gem-c-layout-super-navigation-header__header-logo .govuk-visually-hidden) {
       border: 0;
@@ -698,6 +698,10 @@ $search-icon-height: 20px;
     .govuk-width-container {
       margin: 0;
     }
+
+    .gem-c-layout-super-navigation-header__container {
+      background: transparent;
+    }
   }
 
   .gem-c-layout-super-navigation-header__header-logo {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss

@@ -283,26 +283,6 @@
     text-align: left;
   }
 
-  .mc-toggle-button {
-    border: 1px solid $govuk-border-colour;
-    color: $govuk-link-colour;
-    cursor: pointer;
-    margin: govuk-spacing(0);
-    padding: govuk-spacing(2);
-    background-color: govuk-colour("white");
-
-    &:hover {
-      background-color: govuk-colour("light-grey");
-      color: $govuk-link-hover-colour;
-    }
-
-    &:focus {
-      background-color: $govuk-focus-colour;
-      border-color: transparent;
-      @include govuk-focused-text;
-    }
-  }
-
   // Hides the original table
   .mc-hidden,
   .mc-hidden caption {

data/app/controllers/govuk_publishing_components/applications_page_controller.rb

@@ -8,11 +8,11 @@ module GovukPublishingComponents
         },
         {
           type: "publishing",
-          apps: %w[content-data-admin collections-publisher travel-advice-publisher whitehall datagovuk_find local-links-manager places-manager support manuals-publisher service-manual-publisher short-url-manager specialist-publisher content-tagger publisher transition search-admin].sort,
+          apps: %w[content-data-admin collections-publisher travel-advice-publisher whitehall datagovuk_find local-links-manager places-manager support manuals-publisher service-manual-publisher short-url-manager specialist-publisher content-tagger publisher transition search-admin fact-check-manager content-block-manager].sort,
         },
         {
           type: "utility",
-          apps: %w[account-api signon govspeak govspeak-preview release govuk-developer-docs govuk-chat].sort,
+          apps: %w[account-api signon govspeak govspeak-preview release govuk-developer-docs govuk-chat govuk_web_banners].sort,
         },
       ]
 
@@ -41,6 +41,9 @@ module GovukPublishingComponents
             gem_version_status: app.gem_version == GovukPublishingComponents::VERSION ? "green" : "red",
             sass_version: app.sass_version,
             ruby_version: app.ruby_version,
+            ruby_version_status: app.ruby_status(app.ruby_version),
+            yarn_version: app.yarn_version,
+            yarn_version_status: app.yarn_version.to_f >= 4 ? "green" : "red",
           }
         end
       end

data/app/controllers/govuk_publishing_components/audit_controller.rb

@@ -5,11 +5,12 @@ module GovukPublishingComponents
         account-api
         collections
         collections-publisher
+        content-block-manager
         content-data-admin
-        content-publisher
         content-tagger
         datagovuk_find
         email-alert-frontend
+        fact-check-manager
         feedback
         finder-frontend
         frontend
@@ -18,13 +19,13 @@ module GovukPublishingComponents
         govspeak-preview
         govuk-chat
         govuk-developer-docs
+        govuk_web_banners
         local-links-manager
         manuals-publisher
         places-manager
         publisher
         release
         search-admin
-        search-v2-evaluator
         service-manual-publisher
         short-url-manager
         signon

data/app/models/govuk_publishing_components/applications_page.rb

@@ -1,12 +1,14 @@
 module GovukPublishingComponents
   class ApplicationsPage
-    attr_reader :source
+    attr_reader :source, :ruby_version
 
     def initialize(application)
       @application = application
       @dir = get_directory
       @gemfilelock = get_file("Gemfile.lock")
-      @rubyfile = get_file(".ruby-version")
+      rubyfile = get_file(".ruby-version")
+      @ruby_version = rubyfile.strip if rubyfile
+      @packagejson = get_file("package.json")
     end
 
     def readable_name
@@ -21,8 +23,41 @@ module GovukPublishingComponents
       parse_file(@gemfilelock, /sass-embedded \(([^)>=~ ]+)\)/)
     end
 
-    def ruby_version
-      @rubyfile.strip if @rubyfile
+    def ruby_status(version)
+      version = version.to_f # to_f ignores non-numbers on the string end, so 3.3.1 becomes 3.1
+      versions = [
+        {
+          version: 3.3,
+          eol: "2027-03-31",
+        },
+        {
+          version: 3.2,
+          eol: "2026-03-31",
+        },
+        {
+          version: 3.1,
+          eol: "2024-04-23",
+        },
+      ]
+      today = Date.today # rubocop:disable Rails/Date
+      result = "not set"
+
+      versions.each do |v|
+        next unless version >= v[:version]
+
+        version_eol = Date.parse(v[:eol])
+        age = version_eol - today
+        result = "green"
+        result = "orange" if age < 100
+        result = "red" if age.negative?
+        break
+      end
+
+      result
+    end
+
+    def yarn_version
+      parse_file(@packagejson, /"packageManager"\s*:\s*"yarn@(\d+(?:\.\d+)*)"/)
     end
 
   private

data/app/views/govuk_publishing_components/applications_page/_table-content.html.erb

@@ -32,6 +32,15 @@
       <% if app[:ruby_version] %>
         <%= render "govuk_publishing_components/components/tag", {
           text: app[:ruby_version],
+          colour: app[:ruby_version_status],
+        } %>
+      <% end %>
+    </td>
+    <td class="govuk-table__cell">
+      <% if app[:yarn_version] %>
+        <%= render "govuk_publishing_components/components/tag", {
+          text: app[:yarn_version],
+          colour: app[:yarn_version_status],
         } %>
       <% end %>
     </td>

data/app/views/govuk_publishing_components/applications_page/show.html.erb

@@ -25,6 +25,7 @@
         <th scope="col" class="govuk-table__header sticky-table-header">Gem version</th>
         <th scope="col" class="govuk-table__header sticky-table-header">Sass version</th>
         <th scope="col" class="govuk-table__header sticky-table-header">Ruby version</th>
+        <th scope="col" class="govuk-table__header sticky-table-header">Yarn version</th>
       </tr>
     </thead>
     <tbody class="govuk-table__body">

data/app/views/govuk_publishing_components/components/_service_navigation.html.erb

@@ -31,7 +31,7 @@
         <% if navigation_items.present? %>
           <nav aria-label="<%= navigation_aria_label %>" class="govuk-service-navigation__wrapper">
             <% if collapse_navigation_on_mobile %>
-              <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+              <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden aria-hidden="true">
                 Menu
               </button>
             <% end %>

data/app/views/govuk_publishing_components/components/docs/attachment.yml

@@ -4,8 +4,7 @@ body: |
   This component shows a link to a document that is attached to GOV.UK content
   along with a thumbnail and relevant file data.
 
-  It is intended to be rendered in Govspeak and as an attachment 'preview' in
-  Content Publisher.
+  It is intended to be rendered in Govspeak.
 
   It is not as rich in features as the [attachment rendering][Whitehall]
   provided by Whitehall, it lacks support for multiple languages, CSV previews

data/app/views/govuk_publishing_components/components/docs/details.yml

@@ -1,5 +1,6 @@
 name: Details
 description: Make a page easier to scan by letting users reveal more detailed information only if they need it
+uses_component_wrapper_helper: true
 shared_accessibility_criteria:
   - link
 accessibility_criteria: |
@@ -38,14 +39,6 @@ examples:
         <p class="govuk-body">Attorney General's office</p>
         <%= component %>
       </div>
-  with_GTM_tracking:
-    description: Applies a tracking attribute specifically for use by Google Tag Manager in [Content Publisher](https://github.com/alphagov/content-publisher).
-    data:
-      title: Help with nationality
-      data_attributes:
-        tracking: GTM-123AB
-      block: |
-        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
   with_ga4_tracking:
     description: |
       GA4 tracking is mostly handled internally by the component, apart from the required attribute `index_section_count`. This records the number of details components on the page and must be passed by the hosting application. Other GA4 attributes can also be passed if required, including to override attributes set by the component (for some reason this doesn't work in the component guide but works in applications).

data/app/views/govuk_publishing_components/components/docs/error_alert.yml

@@ -24,14 +24,12 @@ examples:
         Nullam sed neque quis turpis.
   with_data_attributes:
     description: |
-      The example shown applies a tracking attribute specifically for use by Google Tag Manager in [Content Publisher](https://github.com/alphagov/content-publisher).
-
-      Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/trackers/ga4-link-tracker.md).
+      Note that the component does not include built in tracking. If this is required consider using the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/trackers/ga4-link-tracker.md).
     data:
       message: Message to alert the user to a unsuccessful action goes here
       description: A further description
       data_attributes:
-        tracking: GTM-123AB
+        hello: world
   with_specified_id_attribute:
     data:
       id: test-id

data/app/views/govuk_publishing_components/components/docs/govspeak.yml

@@ -317,7 +317,7 @@ examples:
         </section>
         <section class="attachment embedded" id="attachment_1399344">
           <div class="attachment-thumb">
-            <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/world-location-news/294043.es-419"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-doc-afe3b0a8a9511beeca890340170aee8b5649413f948e512c9b8ce432d8513d32.png"></a>
+            <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/world-location-news/294043.es-419"><img alt="" src="#"></a>
           </div>
           <div class="attachment-details">
             <h2 class="title"><a href="https://www.gov.uk/government/world-location-news/294043.es-419">Document attachment</a></h2>
@@ -345,7 +345,7 @@ examples:
         </section>
         <section class="attachment embedded" id="attachment_1399348">
           <div class="attachment-thumb">
-            <img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-spreadsheet-471052e0d03e940bbc62528a05ac204a884b553e4943e63c8bffa6b8baef8967.png">
+            <img alt="" src="#">
           </div>
           <div class="attachment-details">
             <h2 class="title">Previewable online example</h2>
@@ -366,7 +366,7 @@ examples:
         </section>
         <section class="attachment embedded" id="attachment_1243761">
           <div class="attachment-thumb">
-            <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/statistical-data-sets/env24-fly-tipping-incidents-and-actions-taken-in-england"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-spreadsheet-471052e0d03e940bbc62528a05ac204a884b553e4943e63c8bffa6b8baef8967.png"></a>
+            <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/statistical-data-sets/env24-fly-tipping-incidents-and-actions-taken-in-england"><img alt="" src="#"></a>
           </div>
           <div class="attachment-details">
             <h2 class="title"><a aria-describedby="attachment-1243761-accessibility-help" href="https://www.gov.uk/government/statistical-data-sets/env24-fly-tipping-incidents-and-actions-taken-in-england">Fly-tipping incidents and actions reported by local authorities in 2014 to 2015</a></h2>
@@ -391,7 +391,7 @@ examples:
         </section>
         <section class="attachment embedded" id="attachment_1112527">
           <div class="attachment-thumb">
-            <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/summer-budget-2015/summer-budget-2015"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-html-b0465911e56983d98c70f0e25fba24bc206d37e8c83d4addf6421dcf6022c6cd.png"></a>
+            <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/summer-budget-2015/summer-budget-2015"><img alt="" src="#"></a>
           </div>
           <div class="attachment-details">
             <h2 class="title"><a href="https://www.gov.uk/government/publications/summer-budget-2015/summer-budget-2015">Summer Budget 2015</a></h2>
@@ -402,7 +402,7 @@ examples:
         </section>
         <section class="attachment hosted-externally" id="attachment_1425055">
           <div class="attachment-thumb">
-            <a aria-hidden="true" class="thumbnail" href="http://example.com"><img alt="" src="//www.gov.uk/government/assets/pub-cover-a380604bb953dc22ac9dcfbf3cc65598327f493c37b09ac497c45148cbaa21b1.png"></a>
+            <a aria-hidden="true" class="thumbnail" href="http://example.com"><img alt="" src="#"></a>
           </div>
           <div class="attachment-details">
             <h2 class="title"><a rel="external" href="https://www.arcgis.com/apps/opsdashboard/index.html#/f94c3c90da5b4e9f9a0b19484dd4bb14">Track coronavirus cases</a></h2>
@@ -413,7 +413,7 @@ examples:
         </section>
         <section class="attachment hosted-externally" id="attachment_1425056">
           <div class="attachment-thumb">
-            <a aria-hidden="true" class="thumbnail" href="http://example.com"><img alt="" src="//www.gov.uk/government/assets/pub-cover-a380604bb953dc22ac9dcfbf3cc65598327f493c37b09ac497c45148cbaa21b1.png"></a>
+            <a aria-hidden="true" class="thumbnail" href="http://example.com"><img alt="" src="#"></a>
           </div>
           <div class="attachment-details">
             <h2 class="title"><a rel="external" href="http://example.com">An external link (with all possible metadata)</a></h2>
@@ -431,7 +431,7 @@ examples:
         </section>
         <section class="attachment embedded" id="attachment_1398523">
           <div class="attachment-thumb">
-            <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/consultations/environmental-permitting-updating-the-standards-for-petrol-vapour-recovery-at-service-stations"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/uploads/system/uploads/attachment_data/file/498443/thumbnail_petrol-vapour-recovery-consult-sum-resp.pdf.png"></a>
+            <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/consultations/environmental-permitting-updating-the-standards-for-petrol-vapour-recovery-at-service-stations"><img alt="" src="#"></a>
           </div>
           <div class="attachment-details">
             <h2 class="title"><a href="https://www.gov.uk/government/consultations/environmental-permitting-updating-the-standards-for-petrol-vapour-recovery-at-service-stations">Consultation outcome with published date</a></h2>

data/app/views/govuk_publishing_components/components/docs/modal_dialogue.yml

@@ -10,7 +10,7 @@ body: |
 
   Modal components must be a direct descendant of the `<body>` element; we recommend placing it toward the end of the document for performance considerations.
 
-  This component is currently experimental. If you are using it, please feed back any research findings to the Content Publisher team.
+  This component is currently experimental. If you are using it, please feed back any research findings to #govuk-ruby-frontenders on Slack.
 accessibility_criteria: |
   The modal dialogue box must:
 

data/app/views/govuk_publishing_components/components/docs/table.yml

@@ -90,7 +90,7 @@ examples:
     description: |
       This option allows links to be added to the table headers for sorting. Sorting must be handled server side, it is not done by the component.
 
-      The example shown applies a tracking attribute specifically for use by Google Tag Manager in [Content Publisher](https://github.com/alphagov/content-publisher).
+      The example shown applies a data attribute too.
 
       Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/trackers/ga4-link-tracker.md).
     data:
@@ -102,7 +102,7 @@ examples:
           sort_direction: descending
           href: /?sort_direction=desc
           data_attributes:
-            tracking: "UTM-123A"
+            hello: world
         - text: Rate for vehicles
           format: numeric
           href: /?sort_direction=desc

data/app/views/govuk_publishing_components/components/docs/tabs.yml

@@ -75,24 +75,20 @@ examples:
           content: |
             <p class="govuk-body-m">Here is a single piece of content, there should be no tabs.</p>
   with_data_attributes:
-    description: |
-      The example shown applies a tracking attribute specifically for use by Google Tag Manager in [Content Publisher](https://github.com/alphagov/content-publisher).
-
-      Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/trackers/ga4-link-tracker.md).
     data:
       tabs:
         - id: "tab-with-data-attributes-1"
           label: "First section"
           title: "First section"
           tab_data_attributes:
-            tracking: GTM-123AB
+            hello: world
           content: |
             <p class="govuk-body-m">Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
         - id: "tab-with-data-attributes-2"
           label: "Second section"
           title: "Second section"
           tab_data_attributes:
-            tracking: GTM-123AB
+            hello: world
           content: |
             <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
   without_ga4_tracking_on_tabs:

data/lib/govuk_publishing_components/presenters/contents_list_helper.rb

@@ -26,10 +26,9 @@ module GovukPublishingComponents
         output = clean_string(link_text)
         # Must start with a number
         # Number must be between 1 and 999 (ie not 2014)
-        # Must be followed by a space
-        # May contain a period `1.`
+        # Must contain at least one period
         # May be a decimal `1.2`
-        number = /^\d{1,3}(\.?|\.\d{1,2})(?=\s)/.match(output)
+        number = /^\d{1,3}\.(\d{1,2})?(?=\s)/.match(output)
 
         if number
           words = output.sub(number.to_s, "").strip # remove the number from the text

data/lib/govuk_publishing_components/presenters/pagination_helper.rb

@@ -43,7 +43,7 @@ module GovukPublishingComponents
       def pages_link_helper
         return unless has_pages?
 
-        page_links = @items.each_with_index.map do |item, index|
+        page_links = @items.reject(&:blank?).each_with_index.map do |item, index|
           { href: nil, ellipsis: nil, current: nil, number: nil, visually_hidden_text: nil, **item.symbolize_keys } => { href:, ellipsis:, current:, number:, visually_hidden_text: }
 
           raise ArgumentError, "Number or ellipsis value required for item #{index}" if ellipsis.blank? && number.blank?

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "64.1.2".freeze
+  VERSION = "64.2.0".freeze
 end

data/node_modules/govuk-frontend/dist/govuk/all.bundle.js

@@ -4,7 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GOVUKFrontend = global.GOVUKFrontend || {}));
 })(this, (function (exports) { 'use strict';
 
-  const version = '5.13.0';
+  const version = '5.14.0';
 
   function getBreakpoint(name) {
     const property = `--govuk-breakpoint-${name}`;
@@ -2255,9 +2255,9 @@
       }
       if (this.mql.matches) {
         this.$menu.removeAttribute('hidden');
-        this.$menuButton.setAttribute('hidden', '');
+        setAttributes(this.$menuButton, attributesForHidingButton);
       } else {
-        this.$menuButton.removeAttribute('hidden');
+        removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
         this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
         if (this.menuIsOpen) {
           this.$menu.removeAttribute('hidden');
@@ -2272,6 +2272,34 @@
     }
   }
   ServiceNavigation.moduleName = 'govuk-service-navigation';
+  const attributesForHidingButton = {
+    hidden: '',
+    'aria-hidden': 'true'
+  };
+
+  /**
+   * Sets a group of attributes on the given element
+   *
+   * @param {Element} $element - The element to set the attribute on
+   * @param {{[attributeName: string]: string}} attributes - The attributes to set
+   */
+  function setAttributes($element, attributes) {
+    for (const attributeName in attributes) {
+      $element.setAttribute(attributeName, attributes[attributeName]);
+    }
+  }
+
+  /**
+   * Removes a list of attributes from the given element
+   *
+   * @param {Element} $element - The element to remove the attributes from
+   * @param {string[]} attributeNames - The names of the attributes to remove
+   */
+  function removeAttributes($element, attributeNames) {
+    for (const attributeName of attributeNames) {
+      $element.removeAttribute(attributeName);
+    }
+  }
 
   /**
    * Skip link component