Accessibility: Replace span by label for form controls

Using https://stackoverflow.com/questions/6248666/how-to-generate-short-uid-like-ax4j9z-in-js#answer-6248722, for short technical id generation with collision detection.
This commit is contained in:
Unknown 2017-08-16 17:09:02 +02:00
parent 2659494a80
commit 486d4e5bc0

View File

@ -996,6 +996,18 @@ function recallSavedValue(gui, controller) {
}
}
var _generatedUIDs = {};
function _generateUIDWithCollisionChecking() {
while (true) {
var uid = ("0000" + ((Math.random() * Math.pow(36, 4)) | 0).toString(36)).slice(-4);
if (!_generatedUIDs.hasOwnProperty(uid)) {
_generatedUIDs[uid] = true;
return uid;
}
}
}
function add(gui, object, property, params) {
if (object[property] === undefined) {
throw new Error(`Object "${object}" has no property "${property}"`);
@ -1018,9 +1030,10 @@ function add(gui, object, property, params) {
dom.addClass(controller.domElement, 'c');
const name = document.createElement('span');
const name = document.createElement('label');
dom.addClass(name, 'property-name');
name.innerHTML = controller.property;
name.htmlFor = formControlId;
const container = document.createElement('div');
container.appendChild(name);
@ -1039,6 +1052,12 @@ function add(gui, object, property, params) {
gui.__controllers.push(controller);
var formControl = container.querySelectorAll('select, input')[0];
if (formControl != undefined)
{
formControl.id = formControlId;
}
return controller;
}