mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
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:
parent
2659494a80
commit
486d4e5bc0
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user