From 0165faa9fbb284109cb9a215e8e0abf6f3c491b7 Mon Sep 17 00:00:00 2001
From: "Karl O. Pinc" <kop@karlpinc.com>
Date: Sun, 29 Sep 2024 22:19:13 -0500
Subject: [PATCH] Prevent a click on the download help from toggling the
 downlaod checkbox

A <label with for=> is simulated in javascript.  This is less than
ideal for accessability.
---
 src/pgwui_sql/static/sql_edit.js     | 18 ++++++++++++++++--
 src/pgwui_sql/templates/sql_edit.mak |  9 ++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/pgwui_sql/static/sql_edit.js b/src/pgwui_sql/static/sql_edit.js
index d8828ca..35d65df 100644
--- a/src/pgwui_sql/static/sql_edit.js
+++ b/src/pgwui_sql/static/sql_edit.js
@@ -59,6 +59,14 @@ function toggleEOLInfoRow() {
     }
 }
 
+function toggleDownload() {
+    const dl_ckbox = document.getElementById('download_id');
+    if (dl_ckbox.checked) {
+        dl_ckbox.checked = false;
+    } else {
+        dl_ckbox.checked = true;
+    }
+}
 
 /* Initialization */
 
@@ -81,13 +89,19 @@ function attachEvents() {
               + ' spurious/extra columns.'
             ));
     document.getElementById('download_help_id')
-        .addEventListener("click", () =>
+        .addEventListener("click", (event) => {
+            event.stopPropagation();
             window.alert(
               "Downloading does not put SQL results in the webserver's RAM,"
               + " or your browser's RAM,"
               + ' so downloading may be able to return larger data sets'
               + ' than on-screen display.'
-              ));
+            );
+        });
+
+    const dl_ckbox = document.getElementById('download_label_id');
+    dl_ckbox.addEventListener("click", toggleDownload);
+    dl_ckbox.addEventListener("keydown", toggleDownload);
 }
 
 attachEvents();
diff --git a/src/pgwui_sql/templates/sql_edit.mak b/src/pgwui_sql/templates/sql_edit.mak
index c509e09..1fac2b2 100644
--- a/src/pgwui_sql/templates/sql_edit.mak
+++ b/src/pgwui_sql/templates/sql_edit.mak
@@ -190,9 +190,12 @@
 <%def name="download_row(tab_index)">
       <tr>
         ## Download
-        <%self.lib:td_label for_id="download_id">
-          Download<span id="download_help_id" class="help">?</span>
-        </%self.lib:td_label>
+        ## Can't use the self.lib:td_label tag because labels with for=
+        ## ids always pick up the click event even when propagation is stopped.
+        <td class="label"><label id="download_label_id"
+                                 tabindex="${tab_index.val}">Download<span
+              id="download_help_id" class="help">?</span>:</label></td>
+        <% tab_index.inc() %>
         <%self.lib:td_input tab_index="${tab_index}">
           <input name="download"
                  tabindex="${tab_index.val}"
-- 
2.34.1