Reworked checkbox/radio grouping, added support for single non-choice checkboxes.

Added classes to inputs and selects.

Author: gtrinkwon

src/Resources/views/Form/accessible-forms.html.twig

@@ -35,36 +35,30 @@
 {%- endblock form_start -%}
 
 {%- block form_row -%}
-    {% if expanded %}
-        <fieldset class="tbxforms-fieldset">
-    {% endif %}
     {% set row_attr = row_attr|merge({'class': 'tbxforms-form-group'}) %}
     {%- if errors|length > 0 -%}
         {% set class = row_attr.class ~  ' tbxforms-form-group--error' %}
         {% set row_attr = row_attr|merge({'class': class}) %}
     {%- endif -%}
     {{- parent() -}}
-    {% if expanded %}
-        </fieldset>
-    {% endif %}
 {%- endblock form_row -%}
 
 {# Field rows become fieldsets on checkbox and radio buttons, so make the label the legend #}
 {%- block form_label -%}
     {% if label is not same as(false) -%}
-        {% if expanded %}
-            <legend>{{- block('form_label_content') -}}</legend>
-        {% else %}
+        {%- if compound -%}
+            <legend><h2 class="rnib-form-label__wrapper">{{- block('form_label_content') -}}</h2></legend>
+        {%- else -%}
             {% if not compound -%}
                 {% set label_attr = label_attr|merge({for: id}) %}
             {%- endif -%}
             {% set label_attr = label_attr|merge({'class': 'rnib-form-label'}) %}
             <h2 class="rnib-form-label__wrapper">
-                <{{ element|default('label') }}{% if label_attr %}{% with {attr: label_attr} %}{{ block('attributes') }}{% endwith %}{% endif %}>
+                <label{% if label_attr %}{% with {attr: label_attr} %}{{ block('attributes') }}{% endwith %}{% endif %}>
                     {{- block('form_label_content') -}}
-                </{{ element|default('label') }}>
+                </label>
             </h2>
-        {% endif %}
+        {%- endif -%}
     {%- endif -%}
 {%- endblock form_label -%}
 
@@ -75,9 +69,9 @@
         {%- endif -%}
         {% set label_attr = label_attr|merge({'class': 'tbxforms-label tbxforms-checkboxes__label'}) %}
 
-        <{{ element|default('label') }}{% if label_attr %}{% with {attr: label_attr} %}{{ block('attributes') }}{% endwith %}{% endif %}>
+        <label{% if label_attr %}{% with {attr: label_attr} %}{{ block('attributes') }}{% endwith %}{% endif %}>
         {{- block('form_label_content') -}}
-        </{{ element|default('label') }}>
+        </label>
     {%- endif -%}
 {% endblock %}
 
@@ -88,9 +82,9 @@
         {%- endif -%}
         {% set label_attr = label_attr|merge({'class': 'rnib-form-label rnib-form-label--option govuk-radios__label'}) %}
 
-        <{{ element|default('label') }}{% if label_attr %}{% with {attr: label_attr} %}{{ block('attributes') }}{% endwith %}{% endif %}>
+        <label{% if label_attr %}{% with {attr: label_attr} %}{{ block('attributes') }}{% endwith %}{% endif %}>
         {{- block('form_label_content') -}}
-        </{{ element|default('label') }}>
+        </label>
     {%- endif -%}
 {% endblock %}
 
@@ -105,13 +99,31 @@
 {# Adjust order of elements in form row #}
 {%- block form_row_render -%}
     <div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
+        {% if compound %}
+            <fieldset class="tbxforms-fieldset">
+
+        {% endif %}
         {{- form_label(form) -}}
         {{- form_help(form) -}}
         {{- form_errors(form) -}}
         {{- form_widget(form, widget_attr) -}}
+        {% if compound %}
+            </fieldset>
+        {% endif %}
     </div>
 {%- endblock form_row_render -%}
 
+{% block checkbox_row %}
+<div class="tbxforms-form-group">
+    <div class="tbxforms-checkboxes">
+        <div class="tbxforms-checkboxes__item">
+            {{- form_widget(form, row_attr) -}}
+            {{- form_label(form) -}}
+        </div>
+    </div>
+</div>
+{% endblock checkbox_row %}
+
 {# Checkbox / Radio buttons #}
 {%- block choice_widget_expanded -%}
     <div {{ block('widget_container_attributes') }}>
@@ -125,3 +137,25 @@
         </div>
     </div>
 {%- endblock choice_widget_expanded -%}
+
+{%- block checkbox_widget -%}
+    <input type="checkbox" class="tbxforms-checkboxes__input" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
+{%- endblock checkbox_widget -%}
+
+{%- block radio_widget -%}
+    <input type="radio" class="govuk-radios__input" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
+{%- endblock radio_widget -%}
+
+{# Add classes to input elements #}
+{%- block form_widget_simple -%}
+    {% set attr = attr|merge({'class': 'tbxforms-input'}) %}
+    {%- if type == 'text' -%}
+        {%- set attr = attr|merge({'class': 'tbxforms-input  tbxforms-input--text'}) -%}
+    {% endif %}
+    {{- parent() -}}
+{%- endblock form_widget_simple -%}
+
+{%- block choice_widget_collapsed -%}
+    {% set attr = attr|merge({'class': 'tbxforms-select'}) %}
+    {{- parent() -}}
+{%- endblock choice_widget_collapsed -%}