Formulator,xhtml_style: render multi radio and checkboxs with a label

This way, clicking on the label is enough to select the radio button,
or tick the checkbox, no need to click on the small button.
This is also probably better for accessibility.

CSS is adjusted a bit, so that the style for "general" field labels
do not apply to this new label.

product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5.css.css

@@ -447,16 +447,16 @@ fieldset.bottom > .field > label {
   padding: revert;
 }
 
-.content .field label {
+.content .field > label {
   width: 30%;
 }
 
-.content .field label,
+.content .field > label,
 .content .field .input {
   float: left;
 }
 
-body[dir="rtl"] .content .field label,
+body[dir="rtl"] .content .field > label,
 body[dir="rtl"] .content .field .input {
   float: right;
 }
@@ -473,7 +473,7 @@ fieldset.bottom .field .input,
   vertical-align: middle;
 }
 
-.content .required label {
+.content .required > label {
   font-weight: bold;
 }
 

product/Formulator/Widget.py

@@ -1277,21 +1277,25 @@ class RadioWidget(SingleItemsWidget):
       return string.join(rendered_items, "<br />")
 
   def render_item(self, text, value, key, css_class, extra_item):
-    return self.render_element('input',
-                          type="radio",
-                          css_class=css_class,
-                          name=key,
-                          value=value,
-                          extra=extra_item) + text
+    return render_element(
+        'label',
+        contents=self.render_element('input',
+            type="radio",
+            css_class=css_class,
+            name=key,
+            value=value,
+            extra=extra_item) + text)
 
   def render_selected_item(self, text, value, key, css_class, extra_item):
-    return self.render_element('input',
-                          type="radio",
-                          css_class=css_class,
-                          name=key,
-                          value=value,
-                          checked=None,
-                          extra=extra_item) + text
+    return render_element(
+        'label',
+        contents=self.render_element('input',
+            type="radio",
+            css_class=css_class,
+            name=key,
+            value=value,
+            checked=None,
+            extra=extra_item) + text)
 
 RadioWidgetInstance = RadioWidget()
 
@@ -1322,21 +1326,26 @@ class MultiCheckBoxWidget(MultiItemsWidget):
         return string.join(rendered_items, "<br />")
 
     def render_item(self, text, value, key, css_class, extra_item):
-        return self.render_element('input',
-                              type="checkbox",
-                              css_class=css_class,
-                              name=key,
-                              value=value,
-                              extra=extra_item) + text
+        return render_element(
+            'label',
+            contents=self.render_element('input',
+                type="checkbox",
+                css_class=css_class,
+                name=key,
+                value=value,
+                extra=extra_item) + text)
 
     def render_selected_item(self, text, value, key, css_class, extra_item):
-        return self.render_element('input',
-                              type="checkbox",
-                              css_class=css_class,
-                              name=key,
-                              value=value,
-                              checked=None,
-                              extra=extra_item) + text
+        return render_element(
+            'label',
+            contents=self.render_element('input',
+                type="checkbox",
+                css_class=css_class,
+                name=key,
+                value=value,
+                checked=None,
+                extra=extra_item) + text)
+
 
 MultiCheckBoxWidgetInstance = MultiCheckBoxWidget()