Extend chart component to allow headings to be removed from the DOM

alphagov · Nov 1, 2024 · 1043867 · 1043867
1 parent 874aa64
commit 1043867
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,11 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
-# 44.10.0
+## Unreleased
+
+* Extend chart component to allow headings to be removed from the DOM ([PR #4362](https://github.com/alphagov/govuk_publishing_components/pull/4362))
+
+## 44.10.0
 
 * Chart component accessibility improvements ([PR #4344](https://github.com/alphagov/govuk_publishing_components/pull/4344))
 * Add new custom analytics tracker for search and use in layout super nav header ([PR #4354](https://github.com/alphagov/govuk_publishing_components/pull/4354))

diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb
@@ -14,6 +14,7 @@
   keys ||= []
   chart_overview ||= nil
   minimal ||= false
+  hide_heading ||= minimal
   hide_legend ||= minimal
   link ||= false
   height ||= 400
@@ -87,7 +88,7 @@
 <% if rows.length > 0 && keys.length > 0 %>
   <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" if @external_script[:loaded] == 1 %>
   <%= tag.div(**component_helper.all_attributes) do %>
-    <% if chart_heading && !minimal %>
+    <% if chart_heading && !hide_heading %>
       <div class="gem-c-chart__header">
         <%= render "govuk_publishing_components/components/heading", {
           text: chart_heading,

diff --git a/app/views/govuk_publishing_components/components/docs/chart.yml b/app/views/govuk_publishing_components/components/docs/chart.yml
@@ -362,4 +362,40 @@ examples:
             - 118
             - 85
             - 80
+  with_hidden_heading:
+    description: |
+      The heading element is optional, allowing a heading to be set outside the component. Hiding the heading doesn't remove the need to populate `chart_heading` with text, as `chart_heading` is needed for accessibility.
+    data:
+      chart_heading: Page views
+      hide_heading: true
+      h_axis_title: Day
+      v_axis_title: Views
+      chart_overview: This is a graph of views per day
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 117
+            - 33
+            - 89
+            - 79
+        - label: January 2016
+          values:
+            - 3
+            - 8
+            - 37
+            - 82
+            - 118
+            - 85
+            - 80
 
diff --git a/spec/components/chart_spec.rb b/spec/components/chart_spec.rb
@@ -85,6 +85,14 @@ def component_name
     assert_select "h4.gem-c-heading", text: "hello"
   end
 
+  it "can be rendered without a visible heading" do
+    data[:hide_heading] = true
+    render_component(data)
+
+    assert_select ".gem-c-chart__header", false
+    assert_select "h2.gem-c-heading", false
+  end
+
   it "can include an overview" do
     overview = "This chart shows a gradual decline in the numbers of hedgehogs using social media since 2008."
     data[:chart_overview] = overview