From 1b8dbdcf82e6daee889c0c5bfcf8c686f6deb907 Mon Sep 17 00:00:00 2001
From: Daniel Couzens <dan.couzens@epimorphics.com>
Date: Thu, 15 Aug 2024 11:17:15 +0100
Subject: [PATCH 1/3] updates text when example report is open

---
 Gemfile.lock                                    |  4 ++--
 app/assets/javascripts/report_type.js           | 16 ++++++++++++++++
 app/views/report_design/select_report.html.haml |  2 +-
 3 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/javascripts/report_type.js

diff --git a/Gemfile.lock b/Gemfile.lock
index 1b02430..3a9d4a8 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -364,7 +364,7 @@ GEM
       json
       lograge
       railties
-    lr_common_styles (1.9.3)
+    lr_common_styles (1.9.4)
       bootstrap-sass (~> 3.4.0)
       font-awesome-rails (~> 4.7.0.1)
       govuk_elements_rails (~> 2.0.0)
@@ -402,7 +402,7 @@ DEPENDENCIES
   json_rails_logger (~> 1.0.0)!
   leaflet-rails
   libv8-node (>= 16.10.0.0)
-  lr_common_styles (~> 1.9.3)!
+  lr_common_styles (~> 1.9, >= 1.9.4)!
   minitest-rails-capybara
   minitest-reporters
   minitest-spec-rails
diff --git a/app/assets/javascripts/report_type.js b/app/assets/javascripts/report_type.js
new file mode 100644
index 0000000..5ca8d2d
--- /dev/null
+++ b/app/assets/javascripts/report_type.js
@@ -0,0 +1,16 @@
+document.addEventListener("DOMContentLoaded", function() {
+    document.querySelectorAll('details').forEach(function(detail) {
+      const summary = detail.querySelector('summary');
+      const span = summary.querySelector('span.summary');
+  
+      detail.addEventListener('toggle', function() {
+        const isHidden = !detail.open;
+        span.textContent = span.textContent.replace(
+          isHidden ? 'close' : 'view', 
+          isHidden ? 'view' : 'close'
+        );
+      });
+    });
+});
+
+  
\ No newline at end of file
diff --git a/app/views/report_design/select_report.html.haml b/app/views/report_design/select_report.html.haml
index b16d9cd..6c17c9d 100644
--- a/app/views/report_design/select_report.html.haml
+++ b/app/views/report_design/select_report.html.haml
@@ -34,7 +34,7 @@
                 %details
                   %summary
                     %span.summary
-                      Clck to view an example of the banded prices report type
+                      Click to view an example of the banded prices report type
                   %div.panel
                     = image_tag( "banded-prices-report-screenshot.png", alt: "Screenshot of example banded prices report " )
 

From 2aa2e839e56c0eeec4c2dd77039d730956d075c6 Mon Sep 17 00:00:00 2001
From: Daniel Couzens <dan.couzens@epimorphics.com>
Date: Thu, 15 Aug 2024 11:22:59 +0100
Subject: [PATCH 2/3] updates js syntax

---
 app/assets/javascripts/report_type.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/report_type.js b/app/assets/javascripts/report_type.js
index 5ca8d2d..821c15d 100644
--- a/app/assets/javascripts/report_type.js
+++ b/app/assets/javascripts/report_type.js
@@ -1,10 +1,10 @@
 document.addEventListener("DOMContentLoaded", function() {
     document.querySelectorAll('details').forEach(function(detail) {
-      const summary = detail.querySelector('summary');
-      const span = summary.querySelector('span.summary');
+      var summary = detail.querySelector('summary');
+      var span = summary.querySelector('span.summary');
   
       detail.addEventListener('toggle', function() {
-        const isHidden = !detail.open;
+        var isHidden = !detail.open;
         span.textContent = span.textContent.replace(
           isHidden ? 'close' : 'view', 
           isHidden ? 'view' : 'close'

From 52621527e6eb02a8a77d5771a4c2d33522dd0d04 Mon Sep 17 00:00:00 2001
From: Daniel Couzens <dan.couzens@epimorphics.com>
Date: Thu, 15 Aug 2024 12:16:53 +0100
Subject: [PATCH 3/3] adds aria labelled by

---
 app/views/report_design/select_report.html.haml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/report_design/select_report.html.haml b/app/views/report_design/select_report.html.haml
index 6c17c9d..88affb0 100644
--- a/app/views/report_design/select_report.html.haml
+++ b/app/views/report_design/select_report.html.haml
@@ -15,24 +15,24 @@
     .row
       %fieldset.col-sm-12
         %ul.list-unstyled
-          %li
+          %li{"aria-labelled-by": "average-prices-report"}
             .o-form-control
               %label.o-form-control--label
                 = radio_button_tag( step.form_param, step_values[0].value, step_values[0].active?, class: "o-form-control--input" )
                 = step_values[0].label
                 %details
-                  %summary
+                  %summary#average-prices-report
                     %span.summary
                       Click to view an example of the average prices and volumes report type
                   %div.panel
                     = image_tag( "average-prices-report-screenshot.png", alt: "Screenshot of example average prices report " )
-          %li
+          %li{"aria-labelled-by": "banded-prices-report"}
             .o-form-control
               %label.o-form-control--label
                 = radio_button_tag( step.form_param, step_values[1].value, step_values[1].active?, class: "o-form-control--input" )
                 = step_values[1].label
                 %details
-                  %summary
+                  %summary#banded-prices-report
                     %span.summary
                       Click to view an example of the banded prices report type
                   %div.panel