From a9c783ed4e165f92e37c6ef1a65822d9967679a3 Mon Sep 17 00:00:00 2001
From: Ben Harris <bjh21@bjh21.me.uk>
Date: Sat, 12 Nov 2022 12:07:35 +0000
Subject: [PATCH] js: Label all form controls and put controls inside labels

This should help with accessibility and means we don't need to give IDs
to tick-boxes.
---
 emcclib.js | 18 ++++++++++--------
 emccpre.js |  4 ----
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/emcclib.js b/emcclib.js
index 036caf3..274da30 100644
--- a/emcclib.js
+++ b/emcclib.js
@@ -585,11 +585,13 @@ mergeInto(LibraryManager.library, {
      * construction.
      */
     js_dialog_string: function(index, title, initialtext) {
-        dlg_form.appendChild(document.createTextNode(UTF8ToString(title)));
+        var label = document.createElement("label");
+        label.textContent = UTF8ToString(title);
+        dlg_form.appendChild(label);
         var editbox = document.createElement("input");
         editbox.type = "text";
         editbox.value = UTF8ToString(initialtext);
-        dlg_form.appendChild(editbox);
+        label.appendChild(editbox);
         dlg_form.appendChild(document.createElement("br"));
 
         dlg_return_funcs.push(function() {
@@ -608,7 +610,9 @@ mergeInto(LibraryManager.library, {
      * gives the separator.
      */
     js_dialog_choices: function(index, title, choicelist, initvalue) {
-        dlg_form.appendChild(document.createTextNode(UTF8ToString(title)));
+        var label = document.createElement("label");
+        label.textContent = UTF8ToString(title);
+        dlg_form.appendChild(label);
         var dropdown = document.createElement("select");
         var choicestr = UTF8ToString(choicelist);
         var items = choicestr.slice(1).split(choicestr[0]);
@@ -621,7 +625,7 @@ mergeInto(LibraryManager.library, {
             dropdown.appendChild(option);
             options.push(option);
         }
-        dlg_form.appendChild(dropdown);
+        label.appendChild(dropdown);
         dlg_form.appendChild(document.createElement("br"));
 
         dlg_return_funcs.push(function() {
@@ -649,12 +653,10 @@ mergeInto(LibraryManager.library, {
     js_dialog_boolean: function(index, title, initvalue) {
         var checkbox = document.createElement("input");
         checkbox.type = "checkbox";
-        checkbox.id = "cb" + String(dlg_next_id++);
         checkbox.checked = (initvalue != 0);
-        dlg_form.appendChild(checkbox);
         var checkboxlabel = document.createElement("label");
-        checkboxlabel.setAttribute("for", checkbox.id);
-        checkboxlabel.textContent = UTF8ToString(title);
+        checkboxlabel.appendChild(checkbox);
+        checkboxlabel.appendChild(document.createTextNode(UTF8ToString(title)));
         dlg_form.appendChild(checkboxlabel);
         dlg_form.appendChild(document.createElement("br"));
 
diff --git a/emccpre.js b/emccpre.js
index 93d2e45..f971878 100644
--- a/emccpre.js
+++ b/emccpre.js
@@ -110,12 +110,9 @@ var blitters = [];
 
 // State for the dialog-box mechanism. dlg_dimmer and dlg_form are the
 // page-darkening overlay and the actual dialog box respectively;
-// dlg_next_id is used to allocate each checkbox a unique id to use
-// for linking its label to it (see js_dialog_boolean);
 // dlg_return_funcs is a list of JS functions to be called when the OK
 // button is pressed, to pass the results back to C.
 var dlg_dimmer = null, dlg_form = null;
-var dlg_next_id = 0;
 var dlg_return_funcs = null;
 
 // void dlg_return_sval(int index, const char *val);
@@ -208,7 +205,6 @@ function dialog_init(titletext) {
     dlg_form.appendChild(title);
 
     dlg_return_funcs = [];
-    dlg_next_id = 0;
 }
 
 function dialog_launch(ok_function, cancel_function) {