Merge pull request #1608 from alphagov/make-chart-colours-readable

Change bar chart numbers and colours to be accessible
alphagov · Jul 30, 2020 · 2056569 · 2056569
2 parents 3e1a11b + 2607a78
commit 2056569
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git 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
@@ -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
@@ -190,6 +190,51 @@ examples:
             </tr>
           </tbody>
         </table>
+  chart_with_colours:
+    data:
+      block: |
+        <table class="js-barchart-table mc-auto-outdent">
+          <thead>
+            <tr>
+              <th scope="col">Number position</th>
+              <th scope="col">Apples</th>
+              <th scope="col">Oranges</th>
+              <th scope="col">Bananas</th>
+              <th scope="col">Pears</th>
+              <th scope="col">Grapes</th>
+              <th scope="col">Strawberries</th>
+              <th scope="col">Plums</th>
+              <th scope="col">Apricots</th>
+              <th scope="col">Pineapples</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Numbers inside bar</td>
+              <td>16</td>
+              <td>48</td>
+              <td>39</td>
+              <td>50</td>
+              <td>24</td>
+              <td>10</td>
+              <td>62</td>
+              <td>29</td>
+              <td>81</td>
+            </tr>
+            <tr>
+              <td>Numbers outside bar</td>
+              <td>2</td>
+              <td>1</td>
+              <td>2</td>
+              <td>1</td>
+              <td>1</td>
+              <td>3</td>
+              <td>3</td>
+              <td>1</td>
+              <td>2</td>
+            </tr>
+          </tbody>
+        </table>
   address:
     data:
       block: |