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

--
Endi S. Dewata
From c371c34f1208b802b0e1d9c74c00b8fb23533476 Mon Sep 17 00:00:00 2001
From: Endi S. Dewata <edew...@redhat.com>
Date: Fri, 30 Sep 2011 21:25:47 -0500
Subject: [PATCH] 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/association.js |   19 +++++++++++++++----
 install/ui/widget.js      |   18 ++++++++++++++----
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/install/ui/association.js b/install/ui/association.js
index f2ef11dac63d3f5482c702f68b488e65c9502094..ebb6e421ff3b8538116471de240b1f972e08e6bf 100644
--- a/install/ui/association.js
+++ b/install/ui/association.js
@@ -908,7 +908,10 @@ IPA.association_facet = function (spec) {
             span.append(IPA.messages.association.show_results);
             span.append(' ');
 
+            var direct_id = that.entity.name+'-'+that.attribute_member+'-'+that.other_entity+'-direct-radio';
+
             that.direct_radio = $('<input/>', {
+                id: direct_id,
                 type: 'radio',
                 name: 'type',
                 value: 'direct',
@@ -919,11 +922,17 @@ IPA.association_facet = function (spec) {
                 }
             }).appendTo(span);
 
+            $('<label/>', {
+                text: IPA.messages.association.direct_enrollment,
+                'for': direct_id
+            }).appendTo(span);
+
             span.append(' ');
-            span.append(IPA.messages.association.direct_enrollment);
-            span.append(' ');
+
+            var indirect_id = that.entity.name+'-'+that.attribute_member+'-'+that.other_entity+'-indirect-radio';
 
             that.indirect_radio = $('<input/>', {
+                id: indirect_id,
                 type: 'radio',
                 name: 'type',
                 value: 'indirect',
@@ -934,8 +943,10 @@ IPA.association_facet = function (spec) {
                 }
             }).appendTo(span);
 
-            span.append(' ');
-            span.append(IPA.messages.association.indirect_enrollment);
+            $('<label/>', {
+                text: IPA.messages.association.indirect_enrollment,
+                'for': indirect_id
+            }).appendTo(span);
         }
     };
 
diff --git a/install/ui/widget.js b/install/ui/widget.js
index b25dc8f7f085dedb839d37631509621290008610..7acaf9a3e0fb503368ee246eda8c3fbbd54f1414 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) {
-- 
1.7.5.1

_______________________________________________
Freeipa-devel mailing list
Freeipa-devel@redhat.com
https://www.redhat.com/mailman/listinfo/freeipa-devel

Reply via email to