Merge pull request #126 from epimorphics/issue/119-improve-labels-ins…

…tructions updates text when example report is open
epimorphics · Aug 15, 2024 · 84cf697 · 84cf697
2 parents 5400aa3 + 5262152
commit 84cf697
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/app/assets/javascripts/report_type.js b/app/assets/javascripts/report_type.js
@@ -0,0 +1,16 @@
+document.addEventListener("DOMContentLoaded", function() {
+    document.querySelectorAll('details').forEach(function(detail) {
+      var summary = detail.querySelector('summary');
+      var span = summary.querySelector('span.summary');
+
+      detail.addEventListener('toggle', function() {
+        var isHidden = !detail.open;
+        span.textContent = span.textContent.replace(
+          isHidden ? 'close' : 'view', 
+          isHidden ? 'view' : 'close'
+        );
+      });
+    });
+});
+
+
diff --git a/app/views/report_design/select_report.html.haml b/app/views/report_design/select_report.html.haml
@@ -15,26 +15,26 @@
     .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
-                      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 " )