From 486d4e5bc0074ec89291a39d44c351d0d11eea06 Mon Sep 17 00:00:00 2001
From: Unknown <ac_flood@hotmail.fr>
Date: Wed, 16 Aug 2017 17:09:02 +0200
Subject: [PATCH] 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.
---
 src/dat/gui/GUI.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/dat/gui/GUI.js b/src/dat/gui/GUI.js
index 803ee1b..02ec1d0 100644
--- a/src/dat/gui/GUI.js
+++ b/src/dat/gui/GUI.js
@@ -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;
 }