Merge pull request #3459 from alphagov/filter-panel-prefix

Filter section: make a11y heading prefix configurable

app/views/components/_filter_section.html.erb

@@ -4,7 +4,7 @@
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   open ||= nil
   status_text ||= ""
-  heading_text ||= ""
+  visually_hidden_heading_prefix ||= ""
   heading_level ||= 2
   summary_aria_attributes ||= {}
 
@@ -16,7 +16,9 @@
 <%= tag.details(**component_helper.all_attributes) do %>
   <%= tag.summary class: "app-c-filter-section__summary", aria: summary_aria_attributes do %>
       <%= content_tag("h#{heading_level}", class: "app-c-filter-section__summary-heading") do %>
-        <span class="govuk-visually-hidden">Filter by</span>
+        <% if visually_hidden_heading_prefix.present? %>
+          <span class="govuk-visually-hidden"><%= visually_hidden_heading_prefix %></span>
+        <% end %>
         <%= heading_text %>
       <% end %>
 

app/views/components/docs/filter_section.yml

@@ -15,18 +15,25 @@ accessibility_criteria: |
 examples:
   default:
     data:
-      heading_text: Filter by something
+      heading_text: Some metadata field
       block: |
         <span>Filter form controls</span>
   open:
     data:
-      heading_text: Filter by something
+      heading_text: Some metadata field
       open: true
       block: |
         <span>Filter form controls open by default</span>
+  with_visually_hidden_heading_prefix:
+    description: Prefix the heading text with visually hidden text for screenreaders to make it more descriptive.
+    data:
+      heading_text: Some metadata field
+      visually_hidden_heading_prefix: Filter by
+      block: |
+        <span>Filter form controls</span>
   status_text:
     data:
-      heading_text: Filter by something
+      heading_text: Some metadata field
       status_text: 1 Selected
       block: |
         <span>Filter form controls with status text</span>

spec/components/filter_section_spec.rb

@@ -26,9 +26,15 @@ def render_component(locals)
     assert_select ".app-c-filter-section[open=open]"
   end
 
-  it "set section heading text with hidden context for accessibility" do
+  it "sets the heading text" do
     render_component({ heading_text: "section heading" })
 
+    assert_select ".app-c-filter-section__summary-heading", text: "section heading"
+  end
+
+  it "adds the visually hidden heading prefix if given" do
+    render_component({ heading_text: "section heading", visually_hidden_heading_prefix: "Filter by" })
+
     assert_select ".app-c-filter-section__summary-heading", include: "section heading"
     assert_select ".app-c-filter-section__summary-heading .govuk-visually-hidden", text: "Filter by"
   end