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

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;
+    }
   }
 }

app/views/govuk_publishing_components/components/_chart.html.erb

@@ -92,14 +92,17 @@
       } %>
     <% end %>
 
-    <div class="gem-c-chart__chart" id="<%= chart_id %>">
-      <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 %>
-      </div>
+    <% aria_attributes = { hidden: true } if minimal %>
+    <%= content_tag :div, id: chart_id, class: "gem-c-chart__chart", aria: aria_attributes do %>
+      <% unless minimal %>
+        <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" %>
+        </div>
+      <% end %>
 
       <%= line_chart(chart_format_data, library: chart_library_options) %>
-    </div>
+    <% end %>
 
     <% unless minimal %>
       <div class="gem-c-chart__table" id="<%= table_id %>">

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
+    assert_select ".gem-c-chart__chart .govuk-visually-hidden", false
   end
 
   it "does not render a minimal version if a link is not supplied" do