Issue 3882 - Make checkbox labels sensitive on the option page

options.js

Index: options.js
===================================================================
--- a/options.js
+++ b/options.js
@@ -87,14 +87,21 @@
         listItem.setAttribute("data-access", item.url || item.text);
 
         var labelId = "label-" + (++maxLabelId);
-        listItem.querySelector(".display").setAttribute("id", labelId);
+        var label = listItem.querySelector(".display");
+        label.setAttribute("id", labelId);
+
         var control = listItem.querySelector(".control");
         if (control)
         {
-          // We use aria-labelledby to avoid triggering the control when
-          // interacting with the label
           control.setAttribute("aria-labelledby", labelId);

[Thomas Greiner, 2016/03/31 16:54:37]

Since we no longer need to prevent the control from being triggered, we could
get rid of this attribute now and use `<label>` as a wrapper instead (as done
with the tweaks checkboxes). That way there'd be no need for the "for" attribute
either.

[Sebastian Noack, 2016/03/31 17:18:12]

I briefly tried that but it somehow breaks the surrounding layout here. We could
probably fix that with a more elaborate change, but I didn't look into why that
is yet. But more importantly, this change only effect checkboxes, while this
code however is also used for other lists that will still need the
aria-labelledby attribute anyway.

           control.addEventListener("click", this.details[j].onClick, false);
+
+          if (label.localName == "label")
+          {
+            var controlId = "control-" + maxLabelId;
+            control.setAttribute("id", controlId);
+            label.setAttribute("for", controlId);
+          }
         }
 
         this._setEmpty(table, null);