Commit ce72da9f authored by Jérome Perrin's avatar Jérome Perrin

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.
parent cc60f03a
Pipeline #20571 passed with stage
in 0 seconds
......@@ -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;
}
......
......@@ -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',
return render_element(
'label',
contents=self.render_element('input',
type="radio",
css_class=css_class,
name=key,
value=value,
extra=extra_item) + text
extra=extra_item) + text)
def render_selected_item(self, text, value, key, css_class, extra_item):
return self.render_element('input',
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
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',
return render_element(
'label',
contents=self.render_element('input',
type="checkbox",
css_class=css_class,
name=key,
value=value,
extra=extra_item) + text
extra=extra_item) + text)
def render_selected_item(self, text, value, key, css_class, extra_item):
return self.render_element('input',
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
extra=extra_item) + text)
MultiCheckBoxWidgetInstance = MultiCheckBoxWidget()
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment