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..468f7eff09 100644
--- a/app/views/govuk_publishing_components/components/_chart.html.erb
+++ b/app/views/govuk_publishing_components/components/_chart.html.erb
@@ -92,14 +92,17 @@
} %>
<% end %>
-
-
- <%= 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 %>
-
+ <% aria_attributes = { hidden: true } if minimal %>
+ <%= content_tag :div, id: chart_id, class: "gem-c-chart__chart", aria: aria_attributes do %>
+ <% unless minimal %>
+
+ <%= 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" %>
+
+ <% end %>
<%= line_chart(chart_format_data, library: chart_library_options) %>
-
+ <% end %>
<% unless minimal %>
diff --git a/spec/components/chart_spec.rb b/spec/components/chart_spec.rb
index 3ca62ebc13..edca2521b2 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
+ 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