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

View File

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

View File

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