From be71211f07a551de7f94eda57bb30ced7d43a050 Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Tue, 22 Oct 2024 11:51:30 +0100
Subject: [PATCH] Improve link accessibility

- improve focus state around link to have a complete border and be more visible
- use aria hidden on the graph when in minimal mode
---
 .../components/_chart.scss                          | 13 +++++++++++++
 .../components/_chart.html.erb                      |  7 ++++---
 spec/components/chart_spec.rb                       |  2 +-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss
index d846b613fd..1e81e5131d 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss
@@ -50,5 +50,18 @@
 
   &:focus {
     background: transparent; // overrides govuk-link background, which obscures the graph
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-top: solid 1px $govuk-focus-colour;
+      border-left: solid 3px $govuk-focus-colour;
+      border-right: solid 3px $govuk-focus-colour;
+      box-sizing: border-box;
+    }
   }
 }
diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb
index d58adbe3e1..4aae17f2c1 100644
--- a/app/views/govuk_publishing_components/components/_chart.html.erb
+++ b/app/views/govuk_publishing_components/components/_chart.html.erb
@@ -92,14 +92,15 @@
       } %>
     <% end %>
 
-    <div class="gem-c-chart__chart" id="<%= chart_id %>">
+    <% aria_attributes = { hidden: true } if minimal %>
+    <%= content_tag :div, id: chart_id, class: "gem-c-chart__chart", aria: aria_attributes do %>
       <div class="govuk-visually-hidden">
         <%= content_tag :div, chart_overview, class: "gem-c-chart__a11y-note-1" if chart_overview %>
-        <%= content_tag :div, t("components.chart.accessibility_html", table_id: table_id), class: "gem-c-chart__a11y-note-2" unless minimal %>
+        <%= content_tag :div, t("components.chart.accessibility_html", table_id: table_id), class: "gem-c-chart__a11y-note-2" %>
       </div>
 
       <%= line_chart(chart_format_data, library: chart_library_options) %>
-    </div>
+    <% end %>
 
     <% unless minimal %>
       <div class="gem-c-chart__table" id="<%= table_id %>">
diff --git a/spec/components/chart_spec.rb b/spec/components/chart_spec.rb
index 3ca62ebc13..0e29bd0462 100644
--- a/spec/components/chart_spec.rb
+++ b/spec/components/chart_spec.rb
@@ -114,10 +114,10 @@ def component_name
     render_component(data)
 
     assert_select ".gem-c-chart.gem-c-chart--minimal"
+    assert_select ".gem-c-chart__chart[aria-hidden='true']"
     assert_select '.gem-c-chart .govuk-link[href="https://should.not.be.shown"]', false
     assert_select '.gem-c-chart .gem-c-chart__minimal-link[href="https://www.gov.uk"]'
     assert_select ".gem-c-chart__a11y-note-1", text: "This is a chart showing a rise in sea levels in the last ten years"
-    assert_select ".gem-c-chart__a11y-note-2", false
   end
 
   it "does not render a minimal version if a link is not supplied" do