govuk_publishing_components 43.4.1 → 44.0.0

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

@@ -38,7 +38,7 @@
   data_attributes[:ga4_intervention_banner] = "" unless disable_ga4 # Added to the parent element for the GA4 pageview object to use
 
   suggestion_tag_options = {
-    class: "govuk-link",
+    class: "govuk-link gem-print-link",
     href: suggestion_link_url,
     data: suggestion_data_attributes,
   }

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

@@ -18,7 +18,6 @@
     <%= csrf_meta_tags %>
     <%= favicon_link_tag "govuk_publishing_components/favicon-#{environment}.png" %>
     <%= stylesheet_link_tag css_filename, media: "all" %>
-    <%= javascript_include_tag "govuk_publishing_components/vendor/modernizr" %>
     <% if GovukPublishingComponents::Config.use_es6_components %>
       <%= javascript_include_tag js_module_filename, type: "module" %>
     <% end %>

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

@@ -45,9 +45,11 @@
 
 <%= tag.div(**helper.all_attributes) do %>
   <h3 class="gem-c-option-select__heading js-container-heading">
-    <span class="gem-c-option-select__title js-container-button" id="<%= title_id %>"><%= title %></span>
-    <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="gem-c-option-select__icon gem-c-option-select__icon--up" aria-hidden="true" focusable="false"><path d="m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z"/></svg>
-    <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="gem-c-option-select__icon gem-c-option-select__icon--down" aria-hidden="true" focusable="false"><path d="m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z"/></svg>
+    <div class="gem-c-option-select__toggle js-container-toggle">
+      <span class="gem-c-option-select__title js-container-button" id="<%= title_id %>"><%= title %></span>
+      <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="gem-c-option-select__icon gem-c-option-select__icon--up" aria-hidden="true" focusable="false"><path d="m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z"/></svg>
+      <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="gem-c-option-select__icon gem-c-option-select__icon--down" aria-hidden="true" focusable="false"><path d="m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z"/></svg>
+    </div>
   </h3>
 
   <%= content_tag(:div, class: options_container_classes, id: options_container_id, tabindex: "-1") do %>

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

@@ -12,6 +12,7 @@
   heading ||= nil
   heading_caption ||= nil
   heading_size ||= nil
+  visually_hidden_heading ||= false
   small ||= false
   inline ||= false
   heading_level = shared_helper.get_heading_level
@@ -46,6 +47,7 @@
 
   legend_classes = %w(govuk-fieldset__legend)
   legend_classes << "govuk-fieldset__legend--#{size}"
+  legend_classes << "govuk-visually-hidden" if visually_hidden_heading
 
   aria = "#{hint_id} #{"#{error_id}" if has_error}".strip if hint or has_error
 

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

@@ -35,7 +35,7 @@
     <strong class="gem-c-step-nav-header__part-of">Part of</strong>
     <% if path %>
       <a href="<%= path %>"
-        class="gem-c-step-nav-header__title govuk-link"
+        class="gem-c-step-nav-header__title govuk-link gem-print-link"
         <% unless disable_ga4 %>
           data-ga4-link='<%= ga4_data %>'
         <% end %>

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

@@ -15,7 +15,7 @@
       <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 && !always_display_as_list %>
           <a href="<%= links[0][:href] %>"
-            class="govuk-link"
+            class="govuk-link gem-print-link"
             <% unless disable_ga4
               ga4_attributes = {
                 event_name: "navigation",
@@ -37,7 +37,7 @@
           <% links.each_with_index do |link, index| %>
             <li class="gem-c-step-nav-related__link-item">
               <a href="<%= link[:href] %>"
-                class="govuk-link"
+                class="govuk-link gem-print-link"
                 <% unless disable_ga4
                   ga4_attributes = {
                     event_name: "navigation",

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

@@ -18,11 +18,11 @@ examples:
       text: "Coronavirus (COVID-19):"
       nowrap_text: what you need to do
       href: "/page"
-  with_light_text:
+  inverse:
     data:
       text: "Coronavirus (COVID-19)"
       href: "/page"
-      light_text: true
+      inverse: true
     context:
       dark_background: true
   with_subtext:
@@ -35,7 +35,7 @@ examples:
       text: Emergency something
       href: "/page"
       subtext: This is about the emergency that is happening right now unfortunately so pay attention
-      light_text: true
+      inverse: true
     context:
       dark_background: true
   mobile_subtext:
@@ -56,7 +56,7 @@ examples:
       text: Remain calm
       subtext: Better things are ahead
       subtext_href: "/page"
-      light_text: true
+      inverse: true
     context:
       dark_background: true
   simple_arrow:
@@ -68,7 +68,7 @@ examples:
     data:
       text: Getting financial help and keeping your business safe
       href: "/financial-help"
-      light_text: true
+      inverse: true
       simple_light: true
     context:
       dark_background: true

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

@@ -6,6 +6,12 @@ body: |
 
   It is expected to be embedded inside an element that provides text styles
   (such as `.govuk-body`) so does not provide its own text styling.
+accessibility_criteria: |
+    All touch targets (e.g the attachment link) must be 24px large, or leave sufficient space (target-size). See [Understanding Success Criterion 2.5.8: Target Size (Minimum))](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
+
+    To achieve this, you can embed the attachment link within another element that maintains sufficient space above and below the target. For instance, you can place individual links inside a paragraph element styled with a `.govuk-body` class, or as list items in the [list component](https://components.publishing.service.gov.uk/component-guide/list).
+
+    Attachment links within paragraphs of text do not need to meet the 24 by 24 CSS pixels requirements.    
 shared_accessibility_criteria:
 - link
 examples:

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

@@ -18,11 +18,26 @@ examples:
     data:
       number: 119
       label: Open consultations
-  passing_extra_symbols:
-    description: "In some cases, we want to communicate more than just the flat numeric value eg: `400+`, `90%`, `-20`, `1M` etc. This is why we allow values to be passed as flat strings."
+  with_plus_symbol:
+    description: "In some cases, we want to communicate more than just the flat numeric value eg: `400+`. This is why we allow values to be passed as flat strings."
     data:
       number: "400+"
       label: Other agencies and public bodies
+  with_percentage_symbol:
+    description: "In some cases, we want to communicate more than just the flat numeric value eg: `90%`. This is why we allow values to be passed as flat strings."
+    data:
+      number: "90%"
+      label: is a large percentage of something
+  with_negative_symbol:
+    description: "In some cases, we want to communicate more than just the flat numeric value eg: `-20`. This is why we allow values to be passed as flat strings."
+    data:
+      number: "-20"
+      label: is a negative number
+  with_unit_symbol:
+    description: "In some cases, we want to communicate more than just the flat numeric value eg: `1M`. This is why we allow values to be passed as flat strings."
+    data:
+      number: "1M"
+      label: is a shorter way of saying one million
   with_link:
     data:
       number: 23

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

@@ -6,9 +6,11 @@ body: |
   We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
 shared_accessibility_criteria:
   - link
-accessibility_criteria:
+accessibility_criteria: |
   The breadcrumb links must have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
   (this especially applies when [using the inverse flag](/component-guide/breadcrumbs/inverse)).
+
+  Always place breadcrumbs at the top of a page, before the `<main>` element. Placing them here means that the "Skip to main content" link allows the user to skip all navigation links, including breadcrumbs.
 accessibility_excluded_rules:
   - skip-link # This component is creating a reference to #content which is part of the layout
 display_html: true

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

@@ -11,6 +11,7 @@ accessibility_criteria: |
   * be hidden by default
   * be visible when the associated input field if focused
   * stay visible until another input field with guidance is being focused
+uses_component_wrapper_helper: true
 shared_accessibility_criteria:
   - link
 examples:

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

@@ -7,6 +7,7 @@ body: |
 
   * nations that the alternative content relates to
   * a list of alternative URLs where applicable
+uses_component_wrapper: true
 shared_accessibility_criteria:
   - link
 accessibility_criteria: |
@@ -104,4 +105,4 @@ examples:
           applicable: false
           alternative_url: /
       type: detailed_guide
-      ga4_tracking: true
+      disable_ga4: true

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

@@ -244,6 +244,28 @@ examples:
         metadata:
           public_updated_at: 2017-07-19 15:01:48
           document_type: 'Statistical data set'
+  with_equal_item_spacing:
+    description: |
+      The new search UI has consistently equal spacing between items in the document list, instead
+      of the original larger bottom padding.
+    data:
+      equal_item_spacing: true
+      items:
+      - link:
+          text: 'Become an apprentice'
+          path: '/become-an-apprentice'
+          description: 'Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship.'
+          full_size_description: true
+      - link:
+          text: 'Become a journeyman'
+          path: '/become-a-journeyman'
+          description: 'Becoming a journeyman - what to expect, what to take, pay and training, making an application, complaining about being a journeyman.'
+          full_size_description: true
+      - link:
+          text: 'Become enlightened'
+          path: '/become-enlightened'
+          description: 'Becoming enlightened - what to expect, what to take, pay and training, making an application, complaining about being enlightened.'
+          full_size_description: true
   highlighted_result:
     description: Highlight one or more of the items in the list. This is used on finders to provide a 'top result' for a search. The `highlight_text` parameter is optional.
     data:

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

@@ -1,17 +1,13 @@
 name: Inverse header
 description: A wrapper to contain header content in white text
 body: |
-  This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overridden where unwanted. Implemented to accommodate topic and list page headings and breadcrumbs but unopinionated about its contents.
+  This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overridden where unwanted. Implemented to accommodate topic and list page headings but unopinionated about its contents.
 
   If passing links to the block make sure to add [the inverse modifier](https://design-system.service.gov.uk/styles/typography/#links-on-dark-backgrounds).
-
 accessibility_criteria: |
   The component must:
 
   * be used in conjunction with content that renders a text contrast ratio higher than 4.5:1 against the header colour to meet WCAG AA.
-
-accessibility_excluded_rules:
-  - skip-link # Examples of this component contain breadcrumbs, creating a reference to #content which is part of the layout
 examples:
   default:
     data:
@@ -45,31 +41,7 @@ examples:
           } %>
           <p class="publication-header__last-changed">Published 22 April 2016</p>
           <!-- end of example content -->
-  with_breadcrumbs_and_paragraph:
-    data:
-      padding_top: false
-      block: |
-        <!-- example content -->
-          <%= render "govuk_publishing_components/components/breadcrumbs", {
-            collapse_on_mobile: true,
-            breadcrumbs: [
-              {
-                title: "Section",
-                url: "/section"
-              },
-              {
-                title: "Education of disadvantaged children",
-                url: "/section/sub-section"
-              }
-            ],
-            inverse: true
-          } %>
-          <%= render "govuk_publishing_components/components/lead_paragraph", {
-            text: "Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.",
-            inverse: true
-          } %>
-          <!-- end of example content -->
-  with_link:
+  with_paragraph_and_link:
     data:
       block: |
         <p class="gem-c-lead-paragraph gem-c-lead-paragraph--inverse">

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

@@ -160,6 +160,21 @@ examples:
         text: "Yes"
       - value: "no"
         text: "No"
+  with_visually_hidden_heading:
+    description: |
+      If the heading/legend on the radios is not required, it can be visually hidden using this
+      option. It will still be visible to screen readers.
+    data:
+      name: "radio-group-visually-hidden-heading"
+      heading: "What is your favourite colour?"
+      visually_hidden_heading: true
+      items:
+      - value: "red"
+        text: "Red"
+      - value: "green"
+        text: "Green"
+      - value: "blue"
+        text: "Blue"
   with_description:
     data:
       name: "radio-group-description"

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

@@ -16,10 +16,8 @@ accessibility_criteria: |
 examples:
   default:
     data: {}
-  apply_custom_styling_to_the_label_and_set_search_value:
+  set_search_value:
     data:
-      inline_label: false
-      label_text: "<h1>Search GOV.UK</h1>"
       value: "driving licence"
   stop_the_label_appearing_inline:
     data:

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

@@ -8,6 +8,8 @@ accessibility_criteria: |
   An earlier version of the component did not use a heading element – this failed WCAG 2.1 Success Criterion 1.3.1 ("Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.")
 
   An early version of the component contained a hidden skip link for keyboard and screen reader users, that jumped to the step by step navigation component in the sidebar (similar to the 'skip to content' link at the top of all GOV.UK pages). User testing suggested that rather than helping users it confused them, so this has been removed.
+
+  Always place the step by step navigation header at the top of a page, before the `<main>` element. Placing the component here means that the "Skip to main content" link allows the user to skip all navigation links, including the step by step navigation header.
 shared_accessibility_criteria:
   - link
 examples:

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

@@ -114,7 +114,7 @@ examples:
     description: Disables GA4 tracking on tabs as links. Tracking is enabled by default.
     data:
       as_links: true
-      ga4_tracking: true
+      disable_ga4: true
       tabs:
         - href: "/page1"
           label: "Link 1"

data/app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb

@@ -1,7 +1,6 @@
 <div class="govuk-width-container">
   <%= render "govuk_publishing_components/components/phase_banner", {
     phase: "beta",
-    ga4_tracking: true,
     message: sanitize(t("components.layout_for_public.account_layout.feedback.banners.phase_banner_html"))
   } unless omit_account_phase_banner %>
 

data/app/views/layouts/govuk_publishing_components/application.html.erb

@@ -41,8 +41,6 @@
     <%= stylesheet_link_tag "component_guide/application", media: "all" %>
     <%= yield :application_stylesheet %>
     <%= render_component_stylesheets %>
-
-    <%= javascript_include_tag "govuk_publishing_components/vendor/modernizr" %>
     <%= yield :extra_headers %>
   </head>
   <body class="gem-c-layout-for-admin govuk-template__body <%= 'hide-header-and-footer' if @preview %>">

data/lib/govuk_publishing_components/presenters/component_wrapper_helper.rb

@@ -11,6 +11,7 @@ module GovukPublishingComponents
         check_role_is_valid(@options[:role]) if @options.include?(:role)
         check_lang_is_valid(@options[:lang]) if @options.include?(:lang)
         check_open_is_valid(@options[:open]) if @options.include?(:open)
+        check_hidden_is_valid(@options[:hidden]) if @options.include?(:hidden)
       end
 
       def all_attributes
@@ -23,6 +24,7 @@ module GovukPublishingComponents
         attributes[:role] = @options[:role] unless @options[:role].blank?
         attributes[:lang] = @options[:lang] unless @options[:lang].blank?
         attributes[:open] = @options[:open] unless @options[:open].blank?
+        attributes[:hidden] = @options[:hidden] unless @options[:hidden].nil?
 
         attributes
       end
@@ -62,6 +64,11 @@ module GovukPublishingComponents
         @options[:open] = open_attribute
       end
 
+      def set_hidden(hidden_attribute)
+        check_hidden_is_valid(hidden_attribute)
+        @options[:hidden] = hidden_attribute
+      end
+
     private
 
       def check_id_is_valid(id)
@@ -130,6 +137,15 @@ module GovukPublishingComponents
         end
       end
 
+      def check_hidden_is_valid(hidden_attribute)
+        return if hidden_attribute.nil?
+
+        options = ["", "hidden", "until-found"]
+        unless options.include? hidden_attribute
+          raise(ArgumentError, "hidden attribute (#{hidden_attribute}) is not recognised")
+        end
+      end
+
       def extend_string(option, string)
         ((@options[option] ||= "") << " #{string}").strip!
       end

data/lib/govuk_publishing_components/presenters/page_with_step_by_step_navigation.rb

@@ -77,18 +77,18 @@ module GovukPublishingComponents
         if show_sidebar?
           @sidebar ||= current_step_nav.content.tap do |sb|
             configure_for_sidebar(sb)
-            sb.merge!(small: true, heading_level: 3, tracking_id: current_step_nav.content_id, ga4_tracking: @query_parameters[:ga4_tracking])
+            sb.merge!(small: true, heading_level: 3, tracking_id: current_step_nav.content_id, disable_ga4: @query_parameters[:disable_ga4])
           end
         end
       end
 
-      def header(ga4_tracking)
+      def header(disable_ga4)
         if show_header?
           {
             title: current_step_nav.title,
             path: current_step_nav.base_path,
             tracking_id: current_step_nav.content_id,
-            ga4_tracking:,
+            disable_ga4:,
           }
         else
           {}

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "43.4.1".freeze
+  VERSION = "44.0.0".freeze
 end

data/node_modules/accessible-autocomplete/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 3.0.1 - 2024-09-12
+
+### Fixes
+
+- [Pull request #727: Add `aria-controls` to aria props](https://github.com/alphagov/accessible-autocomplete/pull/727)
+- [Pull request #724: Add accessibility controls to 'No results' list item](https://github.com/alphagov/accessible-autocomplete/pull/724)
+- [Pull request #729: Move `aria-labelledby` into computed menu props](https://github.com/alphagov/accessible-autocomplete/pull/729)
+
 ## 3.0.0 - 2024-04-19
 
 ### Breaking changes

data/node_modules/accessible-autocomplete/accessibility-criteria.md

@@ -26,7 +26,8 @@ The field with autocomplete must:
 1. Inform the user when there are matches, or if there are no matches
 1. (Optional) Inform the user how many matches are currently available
 1. Inform the user as the number of matches changes
-1. Enable the user to navigate the available matches using touch or keyboard
+1. Enable the user to navigate the available matches, using just one input method (pointer, mouse, touch or keyboard)
+1. Enable the user to navigate the available matches, with a single action at a time (no dragging movements or multi-key presses needed)
 1. Inform the user when a match is selected
 1. (Optional) Inform the user which number the currently selected match is (1 of 3 for example)
 1. Inform the user if a match is pre-selected