From bc10712e652285acd83a4ce85d832c4d1c33053e Mon Sep 17 00:00:00 2001
From: Jose Borreguero <borreguero@gmail.com>
Date: Wed, 30 Oct 2024 19:57:50 -0400
Subject: [PATCH] Add labels to form elements for accessibility

Replaced <span> tags with <label> tags in multiple sections of the configuration_ref_m.html template. This modification ensures better accessibility compliance by clearly linking labels with their corresponding input fields.

Signed-off-by: Jose Borreguero <borreguero@gmail.com>
---
 .../reduction/configuration_ref_m.html        | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/webmon_app/reporting/templates/reduction/configuration_ref_m.html b/src/webmon_app/reporting/templates/reduction/configuration_ref_m.html
index 8c93346a..abe57013 100644
--- a/src/webmon_app/reporting/templates/reduction/configuration_ref_m.html
+++ b/src/webmon_app/reporting/templates/reduction/configuration_ref_m.html
@@ -147,9 +147,9 @@
             <span class='short_label' title="You can choose to replace the ROI in the data by your own range.
 Check the following box if you want to define your own ROI and
 use it for peak selection."><strong>Force peak ROI</strong></span>
-            <span class='short_label'>Pixel<sub>min</sub></span>
+            <label class='short_label' for='peak_min'>Pixel<sub>min</sub></label>
             {{ options_form.peak_min }}
-            <span class='short_label'>Pixel<sub>max</sub></span>
+            <label class='short_label' for='peak_max'>Pixel<sub>max</sub></label>
             {{ options_form.peak_max }}
         </td>
     </tr>
@@ -173,9 +173,9 @@
             <span title="You can choose to replace the 2nd ROI in the data by your own range.
 Check the following box if you want to define your own 2nd ROI and use it for background selection.
 The option to use the 2nd ROI has to be turned ON to use this option."><strong>Force background ROI</strong></span>
-            <span class='short_label'>Bck<sub>min</sub></span>
+            <label class='short_label' for='bck_min'>Bck<sub>min</sub></label>
             {{ options_form.bck_min }}
-            <span class='short_label'>Bck<sub>max</sub></span>
+            <label class='short_label'  for='bck_max'>Bck<sub>max</sub></label>
             {{ options_form.bck_max }}
         </td>
     </tr>
@@ -191,7 +191,7 @@
 if you want to use the region on each side of the peak to estimate your background.">
                 <strong>Use side background</strong>
             </span>
-            Pixels on each side {{ options_form.bck_width }}
+            <label for='bck_width'>Pixels on each side</label> {{ options_form.bck_width }}
         </td>
     </tr>
 
@@ -211,9 +211,9 @@
             <span class='short_label' title="You can choose to replace the ROI in the data by your own range.
 Check the following box if you want to define your own ROI and
 use it for peak selection."><strong>Force peak ROI</strong></span>
-            <span class='short_label'>Pixel<sub>min</sub></span>
+            <label class='short_label' for='peak_min_s2'>Pixel<sub>min</sub></label>
             {{ options_form.peak_min_s2 }}
-            <span class='short_label'>Pixel<sub>max</sub></span>
+            <label class='short_label' for='peak_max_s2'>Pixel<sub>max</sub></label>
             {{ options_form.peak_max_s2 }}
         </td>
     </tr>
@@ -237,9 +237,9 @@
             <span title="You can choose to replace the 2nd ROI in the data by your own range.
 Check the following box if you want to define your own 2nd ROI and use it for background selection.
 The option to use the 2nd ROI has to be turned ON to use this option."><strong>Force background ROI</strong></span>
-            <span class='short_label'>Bck<sub>min</sub></span>
+            <label class='short_label' for='bck_min_s2'>Bck<sub>min</sub></label>
             {{ options_form.bck_min_s2 }}
-            <span class='short_label'>Bck<sub>max</sub></span>
+            <label class='short_label' for='bck_max_s2'>Bck<sub>max</sub></label>
             {{ options_form.bck_max_s2 }}
         </td>
     </tr>
@@ -255,7 +255,7 @@
 if you want to use the region on each side of the peak to estimate your background.">
                 <strong>Use side background</strong>
             </span>
-            Pixels on each side {{ options_form.bck_width_s2 }}
+            <label for='bck_width_s2'>Pixels on each side</label> {{ options_form.bck_width_s2 }}
         </td>
     </tr>
 
@@ -276,9 +276,9 @@
             <span class='short_label' title="You can choose to replace the ROI in the data by your own range.
 Check the following box if you want to define your own ROI and
 use it for peak selection."><strong>Force peak ROI</strong></span>
-            <span class='short_label'>Pixel<sub>min</sub></span>
+            <label class='short_label' for='peak_min_s3'>Pixel<sub>min</sub></label>
             {{ options_form.peak_min_s3 }}
-            <span class='short_label'>Pixel<sub>max</sub></span>
+            <label class='short_label' for='peak_max_s3'>Pixel<sub>max</sub></label>
             {{ options_form.peak_max_s3 }}
         </td>
     </tr>
@@ -302,9 +302,9 @@
             <span title="You can choose to replace the 2nd ROI in the data by your own range.
 Check the following box if you want to define your own 2nd ROI and use it for background selection.
 The option to use the 2nd ROI has to be turned ON to use this option."><strong>Force background ROI</strong></span>
-            <span class='short_label'>Bck<sub>min</sub></span>
+            <label class='short_label' for='bck_min_s3'>Bck<sub>min</sub></label>
             {{ options_form.bck_min_s3 }}
-            <span class='short_label'>Bck<sub>max</sub></span>
+            <label class='short_label' for='bck_max_s3'>Bck<sub>max</sub></label>
             {{ options_form.bck_max_s3 }}
         </td>
     </tr>
@@ -320,7 +320,7 @@
 if you want to use the region on each side of the peak to estimate your background.">
                 <strong>Use side background</strong>
             </span>
-            Pixels on each side {{ options_form.bck_width_s3 }}
+            <label for='bck_width_s3'>Pixels on each side</label> {{ options_form.bck_width_s3 }}
         </td>
     </tr>