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.

diff --git a/src/pgwui_sql/static/sql_edit.js b/src/pgwui_sql/static/sql_edit.js
index d8828caf85d9bc8a6047ff3bdcf4d19bb7289943..35d65dfa872d93d0f1f38b13f21b39cbbc16a2b5 100644 (file)
--- 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 c509e09b963dd050911e5c512056e9f669671b64..1fac2b269c654f6539bc0d5a839b35534ce7e160 100644 (file)
--- 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}"