govuk_publishing_components 23.12.1 → 23.12.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f576e3d439679c36e70503acbdd7b7ae2bed87c9d2dea7a5bbdd11743e8f8161
-  data.tar.gz: f4b49a21872957da107631f6dc2d0f3ff38d624cde346e2f30ac9f0b4b26e572
+  metadata.gz: ee5a24f565f5900b36058d428d5944f205d001d89d4fec819ce73696cab40f92
+  data.tar.gz: a3c714fac1eace552f26dabf2da1f357ac0b8a0dc79a7e328f99c748206bcec9
 SHA512:
-  metadata.gz: d26821d9c8fc386600981d8173bdd6e7cac6d9a4dc8a03c9c64128dc9ce5c66ecfbfcc079a7e03070dd81d5be4eaf9f9547becbafe148f7de1b1c2f38ee76a52
-  data.tar.gz: 544cdceba43441a149e1770abeb5074d1a8c40c4d87d023a0d47cd0b42c94a8d142a1a51b7e022293483f5ea9f6f54d64aba2cd63e121c33ea9ee5c6948c4296
+  metadata.gz: 6354ef8debf4cab296f119140d6a4018a0484b6c5ef61734a3d4e1920d9e7ea6c0b60219ca14a2275ec0b9d32ae73aae61a9a116218a5eab8651526fd09b9d72
+  data.tar.gz: fe69a6990d168343f224155fa7430d22e7f023fab8a9af88ae95f0d08de457bb088c0411e80c85b66e8aef75b5164f2ed5f20e1a5cbc5f350f31a87a8dcf7612

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -11,9 +11,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.options = {
       outOf: 65,
       applyOnInit: true,
-      toggleText: 'Toggle between chart and table',
       autoOutdent: false,
       outdentAll: false,
+      chartVisibleText: 'Change to table and accessible view',
+      tableVisibleText: 'Change to chart view',
+      chartAlertText: 'Chart visible',
+      tableAlertText: 'Table visible',
       toggleAfter: false, // BOOL set TRUE to append the toggle link
       returnReference: false // for testing purposes
     }
@@ -27,6 +30,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // store a reference to the table in the object
     this.$table = $module
 
+    // a container around the graph element so that it can be targeted by screen readers, allowing us to inform screen reader users that the graph isn't accessible
+    this.$graphContainer = document.createElement('div')
+    this.$graphContainer.className = 'mc-chart-container'
+
     // lets make what will become the new graph
     this.$graph = document.createElement('div')
 
@@ -39,6 +46,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$graph.setAttribute('class', this.$table.className)
     this.$graph.classList.add('mc-chart')
 
+    // get the id of the current chart within the page so that it can be used during the generation of the toggleLink
+    this.chartId = this.getChartId($module)
+
     // set the stacked option based on
     // giving the table a class of mc-stacked
     this.options.stacked = this.$table.classList.contains('mc-stacked')
@@ -102,7 +112,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.addClassesToHeader()
       this.applyWidths()
       this.insert()
-      this.$table.classList.add('visually-hidden')
+      this.$table.classList.add('mc-hidden')
       this.applyOutdent()
     }
   }
@@ -164,24 +174,42 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   // construct a link to allow the user to toggle between chart and table
-  MagnaCharta.prototype.construct.toggleLink = function (toggleText) {
-    var link = document.createElement('a')
-    link.setAttribute('href', '#')
-    link.classList.add('mc-toggle-link')
-    link.innerHTML = toggleText
-    link.setAttribute('aria-hidden', 'true')
+  MagnaCharta.prototype.construct.toggleLink = function (chartVisibleText) {
+    var link = document.createElement('button')
+
+    // These spans are for managing the content within the button
+    // toggleText is the public facing content whilst toggleStatus is visually hidden content that we use to let screen reader users know that the toggle link has been clicked
+    var toggleText = document.createElement('span')
+    var toggleStatus = document.createElement('span')
+
+    toggleText.classList.add('mc-toggle-text')
+    toggleText.innerHTML = chartVisibleText
+
+    toggleStatus.classList.add('govuk-visually-hidden', 'mc-toggle-status')
+    toggleStatus.setAttribute('role', 'alert')
+
+    link.classList.add('mc-toggle-button')
+    link.appendChild(toggleText)
+    link.appendChild(toggleStatus)
 
     return link
   }
 
   // toggles between showing the table and showing the chart
-  MagnaCharta.prototype.addToggleClick = function () {
+  MagnaCharta.prototype.addToggleClick = function (chartVisible, tableVisible, chartAlert, tableAlert) {
     var that = this
 
     this.toggleLink.addEventListener('click', function (e) {
       e.preventDefault()
-      that.$graph.classList.toggle('visually-hidden')
-      that.$table.classList.toggle('visually-hidden')
+
+      var toggleText = that.toggleLink.querySelector('.mc-toggle-text')
+      var toggleStatus = that.toggleLink.querySelector('.mc-toggle-status')
+
+      that.$graphContainer.classList.toggle('mc-hidden')
+      that.$table.classList.toggle('mc-hidden')
+
+      toggleText.innerHTML = toggleText.innerHTML === tableVisible ? chartVisible : tableVisible
+      toggleStatus.innerHTML = toggleStatus.innerHTML === tableAlert ? chartAlert : tableAlert
     })
   }
 
@@ -191,8 +219,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // get at options and properties
     var thead = this.construct.thead.call(this)
     var tbody = this.construct.tbody.call(this)
-    this.toggleLink = this.construct.toggleLink(this.options.toggleText)
-    this.addToggleClick(this.toggleLink)
+    this.toggleLink = this.construct.toggleLink(this.options.chartVisibleText)
+    this.addToggleClick(this.options.chartVisibleText, this.options.tableVisibleText, this.options.chartAlertText, this.options.tableAlertText)
 
     if (this.options.hasCaption) {
       var caption = this.construct.caption.call(this)
@@ -379,7 +407,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   MagnaCharta.prototype.insert = function () {
-    this.$table.insertAdjacentElement('afterend', this.$graph)
+    var label = document.createElement('span')
+    var labelId = 'mc-chart-not-accessible-' + this.chartId
+
+    label.innerHTML = 'This content is not accessible - switch to table'
+    label.className = 'mc-hidden'
+    label.id = labelId
+
+    this.$graphContainer.setAttribute('aria-labelledby', labelId)
+    this.$graphContainer.appendChild(this.$graph)
+    this.$graphContainer.appendChild(label)
+
+    this.$table.insertAdjacentElement('afterend', this.$graphContainer)
   }
 
   MagnaCharta.prototype.applyOutdent = function () {
@@ -419,5 +458,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
+  MagnaCharta.prototype.getChartId = function (module) {
+    var allCharts = document.querySelectorAll('table.js-barchart-table')
+    var id = null
+
+    allCharts.forEach(function (chart, i) {
+      if (chart === module) {
+        id = i
+      }
+    })
+
+    return id
+  }
+
   Modules.MagnaCharta = MagnaCharta
 })(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss

@@ -14,6 +14,10 @@
     &:focus {
       z-index: 1;
     }
+
+    &::-ms-reveal {
+      display: none;
+    }
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss

@@ -270,15 +270,26 @@
     text-align: left;
   }
 
-  .mc-toggle-link {
-    display: block;
-    margin-top: 30px;
+  .mc-toggle-button {
+    @extend %govuk-body-s;
+    border: 1px solid $govuk-border-colour;
+    color: $govuk-link-colour;
+    cursor: pointer;
+    margin: govuk-spacing(0);
+    padding: govuk-spacing(2);
+    background-color: govuk-colour("white");
+
+    &:focus {
+      @include govuk-focused-text;
+      background-color: $govuk-focus-colour;
+      border-color: transparent;
+    }
   }
 
   // Hides the original table
-  .visually-hidden,
-  .visually-hidden caption {
-    @include govuk-visually-hidden;
+  .mc-hidden,
+  .mc-hidden caption {
+    display: none;
 
     // It's reapplied to captions because Firefox can't hide
     // table captions unless it's applied directly to it. Go figure.

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.12.1".freeze
+  VERSION = "23.12.2".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 23.12.1
+  version: 23.12.2
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-01-08 00:00:00.000000000 Z
+date: 2021-01-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config