threshold-label

DEFRA · Jul 26, 2023 · 40b84d0 · 40b84d0
1 parent 63e2bc8
commit 40b84d0
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/server/src/js/components/line-chart.js b/server/src/js/components/line-chart.js
@@ -126,7 +126,7 @@ function LineChart (containerId, stationId, data, options = {}) {
         .attr('class', 'threshold__remove')
         .attr('tabindex', 0)
         .attr('data-threshold-remove', '')
-        .attr('aria-label', 'Remove threshold (Visual only)')
+        .attr('aria-label', `Remove ${threshold.level}m threshold (Visual only)`)
         .attr('aria-controls', `${containerId}-visualisation`)
         .attr('transform', 'translate(20,0)')
       remove.append('circle').attr('class', 'threshold__remove-bg').attr('r', 16).attr('x1', -5).attr('y1', -5)
@@ -449,8 +449,7 @@ function LineChart (containerId, stationId, data, options = {}) {
   //
 
   const defaults = {
-    btnAddThresholdClass: 'defra-button-text-s',
-    btnAddThresholdText: 'Show on chart <span class="govuk-visually-hidden">(Visual only)</span>'
+    btnAddThresholdClass: 'defra-button-text-s'
   }
   options = Object.assign({}, defaults, options)
 
@@ -514,7 +513,7 @@ function LineChart (containerId, stationId, data, options = {}) {
   document.querySelectorAll('[data-threshold-add]').forEach(container => {
     const button = document.createElement('button')
     button.className = options.btnAddThresholdClass
-    button.innerHTML = options.btnAddThresholdText
+    button.innerHTML = `Show<span class="govuk-visually-hidden"> ${container.getAttribute('data-level')}m threshold</span> on chart <span class="govuk-visually-hidden">(Visual only)</span>`
     button.setAttribute('aria-controls', `${containerId}-visualisation`)
     button.setAttribute('data-id', container.getAttribute('data-id'))
     button.setAttribute('data-threshold-add', '')

diff --git a/server/views/rainfall-station.html b/server/views/rainfall-station.html
@@ -105,7 +105,7 @@ <h2 class="govuk-heading-s govuk-!-margin-bottom-0">
   <div class="govuk-grid-column-full">
     <h2 class="govuk-heading-s govuk-!-margin-top-4 govuk-!-margin-bottom-4">Rainfall over the last 5 days in millimetres</h2>
     <div id="bar-chart" class="defra-bar-chart"></div>
-      <a data-journey-click="Rainfall:Station data:Rainfall - Download csv" href="/rainfall-station-csv/{{model.stationId}}" class="defra-button-secondary defra-button-secondary--icon"><svg focusable="false" aria-hidden="true" width="14" height="20" viewBox="0 0 14 20"><path d="M1.929 9L7 14.071 12.071 9M7 14.071V1M1 18h12" fill="none" stroke="currentColor" stroke-width="2"/></svg>Download data CSV (12KB)</a>
+      <a data-journey-click="Rainfall:Station data:Rainfall - Download csv" href="/rainfall-station-csv/{{model.stationId}}" class="defra-button-secondary defra-button-secondary--icon govuk-!-margin-bottom-4"><svg focusable="false" aria-hidden="true" width="14" height="20" viewBox="0 0 14 20"><path d="M1.929 9L7 14.071 12.071 9M7 14.071V1M1 18h12" fill="none" stroke="currentColor" stroke-width="2"/></svg>Download data CSV (12KB)</a>
   </div>
 </div>
 {% endif %}