From e9c8581ffcd4a43c4e812037a076967e0d968261 Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Fri, 30 Sep 2011 21:25:47 -0500
Subject: Added selectable labels for radio buttons.

The radio buttons in association facet and radio widget are now
linked to their labels so that they can be selected by clicking
the labels.

Ticket #1782
---
 install/ui/widget.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

(limited to 'install/ui/widget.js')

diff --git a/install/ui/widget.js b/install/ui/widget.js
index b25dc8f7..7acaf9a3 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -936,13 +936,23 @@ IPA.radio_widget = function(spec) {
         for (var i=0; i<that.options.length; i++) {
             var option = that.options[i];
 
+            // TODO: Use ID generator or accept ID from spec to avoid conflicts.
+            // Currently this ID is unique enough, but it will not work if the
+            // radio button is used multiple times for the same attribute, for
+            // example both in adder dialog and details facet.
+            var id = that.entity.name+'-'+that.name+'-'+i+'-radio';
+
             $('<input/>', {
-                'type': 'radio',
-                'name': that.name,
-                'value': option.value
+                id: id,
+                type: 'radio',
+                name: that.name,
+                value: option.value
             }).appendTo(container);
 
-            container.append(option.label);
+            $('<label/>', {
+                text: option.label,
+                'for': id
+            }).appendTo(container);
         }
 
         if (that.undo) {
-- 
cgit