diff --git a/CHANGELOG.md b/CHANGELOG.md index e8634e6931..3b7318ec17 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ useful summary for people upgrading their application, not a replication of the commit log. +## Unreleased + +* Change bar chart numbers and colours to be accessible ([PR #1608](https://github.com/alphagov/govuk_publishing_components/pull/1608)) + ## 21.60.0 * Make component auditing more resilient ([PR #1604](https://github.com/alphagov/govuk_publishing_components/pull/1604)) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss index 5c152f75d5..7efdaca112 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss @@ -29,8 +29,9 @@ $chart-border: govuk-colour("white"); // Chart border colour $key-border: govuk-colour("white"); // Key border colour $bar-colours: govuk-colour("blue"), govuk-colour("turquoise"), govuk-colour("green"), govuk-colour("light-green"), govuk-colour("yellow"), govuk-colour("orange"), govuk-colour("red"), govuk-colour("bright-purple", $legacy: "bright-red"); - $bar-cell-colour: #ebebeb; - $bar-outdented-colour: #111111; + $bar-text-colours: govuk-colour("white"), govuk-colour("black"), govuk-colour("white"), govuk-colour("black"), govuk-colour("black"), govuk-colour("black"), govuk-colour("white"), govuk-colour("white"); + $bar-cell-colour: govuk-colour("black"); + $bar-outdented-colour: govuk-colour("black"); // CHART STYLES .mc-chart { @@ -140,6 +141,7 @@ @for $i from 0 to length($bar-colours) { .mc-bar-#{$i + 1} { background-color: nth($bar-colours, $i + 1); + color: nth($bar-text-colours, $i + 1); } } diff --git a/app/views/govuk_publishing_components/components/docs/govspeak.yml b/app/views/govuk_publishing_components/components/docs/govspeak.yml index 535be98125..59c9e66c04 100644 --- a/app/views/govuk_publishing_components/components/docs/govspeak.yml +++ b/app/views/govuk_publishing_components/components/docs/govspeak.yml @@ -190,6 +190,51 @@ examples: + chart_with_colours: + data: + block: | +
Number position | +Apples | +Oranges | +Bananas | +Pears | +Grapes | +Strawberries | +Plums | +Apricots | +Pineapples | +
---|---|---|---|---|---|---|---|---|---|
Numbers inside bar | +16 | +48 | +39 | +50 | +24 | +10 | +62 | +29 | +81 | +
Numbers outside bar | +2 | +1 | +2 | +1 | +1 | +3 | +3 | +1 | +2 | +