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