shithub: puzzles

Info  •  Files  •  Log  •  Branches

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.

--- a/emcclib.js

+++ b/emcclib.js

@@ -585,11 +585,13 @@

      * 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 @@

      * 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 @@

             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 @@

     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"));

--- a/emccpre.js

+++ b/emccpre.js

@@ -110,12 +110,9 @@

 // 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 @@

     dlg_form.appendChild(title);

     dlg_return_funcs = [];

-    dlg_next_id = 0;

 }

 function dialog_launch(ok_function, cancel_function) {