zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-21 08:01:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

js: Label all form controls and put controls inside labels

Browse Source 
This should help with accessibility and means we don't need to give IDs
to tick-boxes.
This commit is contained in:
Ben Harris
2022-11-12 12:07:35 +00:00
parent 8f40128f08
commit a9c783ed4e
2 changed files with 10 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
emcclib.js
View File

@ -585,11 +585,13 @@ mergeInto(LibraryManager.library, {
* construction. * construction.
*/ */
js_dialog_string: function(index, title, initialtext) { 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"); var editbox = document.createElement("input");
editbox.type = "text"; editbox.type = "text";
editbox.value = UTF8ToString(initialtext); editbox.value = UTF8ToString(initialtext);
dlg_form.appendChild(editbox); label.appendChild(editbox);
dlg_form.appendChild(document.createElement("br")); dlg_form.appendChild(document.createElement("br"));
dlg_return_funcs.push(function() { dlg_return_funcs.push(function() {
@ -608,7 +610,9 @@ mergeInto(LibraryManager.library, {
* gives the separator. * gives the separator.
*/ */
js_dialog_choices: function(index, title, choicelist, initvalue) { 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 dropdown = document.createElement("select");
var choicestr = UTF8ToString(choicelist); var choicestr = UTF8ToString(choicelist);
var items = choicestr.slice(1).split(choicestr[0]); var items = choicestr.slice(1).split(choicestr[0]);
@ -621,7 +625,7 @@ mergeInto(LibraryManager.library, {
dropdown.appendChild(option); dropdown.appendChild(option);
options.push(option); options.push(option);
} }
dlg_form.appendChild(dropdown); label.appendChild(dropdown);
dlg_form.appendChild(document.createElement("br")); dlg_form.appendChild(document.createElement("br"));
dlg_return_funcs.push(function() { dlg_return_funcs.push(function() {
@ -649,12 +653,10 @@ mergeInto(LibraryManager.library, {
js_dialog_boolean: function(index, title, initvalue) { js_dialog_boolean: function(index, title, initvalue) {
var checkbox = document.createElement("input"); var checkbox = document.createElement("input");
checkbox.type = "checkbox"; checkbox.type = "checkbox";
checkbox.id = "cb" + String(dlg_next_id++);
checkbox.checked = (initvalue != 0); checkbox.checked = (initvalue != 0);
dlg_form.appendChild(checkbox);
var checkboxlabel = document.createElement("label"); var checkboxlabel = document.createElement("label");
checkboxlabel.setAttribute("for", checkbox.id); checkboxlabel.appendChild(checkbox);
checkboxlabel.textContent = UTF8ToString(title); checkboxlabel.appendChild(document.createTextNode(UTF8ToString(title)));
dlg_form.appendChild(checkboxlabel); dlg_form.appendChild(checkboxlabel);
dlg_form.appendChild(document.createElement("br")); dlg_form.appendChild(document.createElement("br"));

4
emccpre.js
View File

@ -110,12 +110,9 @@ var blitters = [];
// State for the dialog-box mechanism. dlg_dimmer and dlg_form are the // State for the dialog-box mechanism. dlg_dimmer and dlg_form are the
// page-darkening overlay and the actual dialog box respectively; // 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 // 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. // button is pressed, to pass the results back to C.
var dlg_dimmer = null, dlg_form = null; var dlg_dimmer = null, dlg_form = null;
var dlg_next_id = 0;
var dlg_return_funcs = null; var dlg_return_funcs = null;
// void dlg_return_sval(int index, const char *val); // void dlg_return_sval(int index, const char *val);
@ -208,7 +205,6 @@ function dialog_init(titletext) {
dlg_form.appendChild(title); dlg_form.appendChild(title);
dlg_return_funcs = []; dlg_return_funcs = [];
dlg_next_id = 0;
} }
function dialog_launch(ok_function, cancel_function) { function dialog_launch(ok_function, cancel_function) {