From 40b84d08f516b00e91e2a68d8d58a052ddd0f6c5 Mon Sep 17 00:00:00 2001
From: LeeGordon83 <lee.gordon83@gmail.com>
Date: Thu, 20 Jul 2023 15:07:11 +0100
Subject: [PATCH] threshold-label

---
 server/src/js/components/line-chart.js | 7 +++----
 server/views/rainfall-station.html     | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/server/src/js/components/line-chart.js b/server/src/js/components/line-chart.js
index b38161184..946f33720 100644
--- 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
index ed5c10ede..dc338bec8 100644
--- 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 %}