Remove indents from conditional reveals in radios and checkboxes

CHANGELOG.md

@@ -10,6 +10,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests:
 
 - [#4906: Update the icon in the warning text component to match the defined text colour and background colour, rather than always being white on black](https://github.com/alphagov/govuk-frontend/pull/4906)
 - [#4919: Use canvas colour for cookie banner over hardcoded grey](https://github.com/alphagov/govuk-frontend/pull/4919)
+- [#4899: Remove indents from conditional reveals in radios and checkboxes](https://github.com/alphagov/govuk-frontend/pull/4899)
 
 ## GOV.UK Frontend v5.3.0 (Feature release)
 

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml

@@ -955,3 +955,16 @@ examples:
         - value: blue
           text: Blue
       values: [red, green]
+  - name: textarea in conditional
+    hidden: true
+    options:
+      name: conditional
+      items:
+        - value: other
+          text: Other
+          conditional:
+            html: |
+              <label class="govuk-label" for="conditional-textarea">textarea</label>
+              <textarea class="govuk-textarea govuk-!-width-one-third" name="conditional-textarea" id="conditional-textarea">
+              test
+              </textarea>

packages/govuk-frontend/src/govuk/components/checkboxes/template.njk

@@ -59,7 +59,7 @@
     </div>
     {% if item.conditional.html %}
     <div class="govuk-checkboxes__conditional {%- if not isChecked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
-      {{ item.conditional.html | safe | trim | indent(6) }}
+      {{ item.conditional.html | safe | trim }}
     </div>
     {% endif %}
   {% endif %}

packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js

@@ -353,6 +353,15 @@ describe('Checkboxes', () => {
       const $input = $('.govuk-checkboxes__input').first()
       expect($input.attr('data-aria-controls')).toBeFalsy()
     })
+
+    // Indentation in nunjucks can mutate the value of textareas, since
+    // textarea value is defined between the html tags
+    it('does not add space to the input value of textareas inside conditionals', () => {
+      const $ = render('checkboxes', examples['textarea in conditional'])
+
+      const $textarea = $('#conditional-textarea')
+      expect($textarea.text()).toBe('test\n')
+    })
   })
 
   describe('when they include an error message', () => {

packages/govuk-frontend/src/govuk/components/radios/radios.yaml

@@ -944,3 +944,16 @@ examples:
         - value: blue
           text: Blue
       value: green
+  - name: textarea in conditional
+    hidden: true
+    options:
+      name: conditional
+      items:
+        - value: other
+          text: Other
+          conditional:
+            html: |
+              <label class="govuk-label" for="conditional-textarea">textarea</label>
+              <textarea class="govuk-textarea govuk-!-width-one-third" name="conditional-textarea" id="conditional-textarea">
+              test
+              </textarea>

packages/govuk-frontend/src/govuk/components/radios/template.njk

@@ -52,7 +52,7 @@
     </div>
     {% if item.conditional.html %}
     <div class="govuk-radios__conditional {%- if not isChecked %} govuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
-      {{ item.conditional.html | safe | trim | indent(6) }}
+      {{ item.conditional.html | safe | trim }}
     </div>
     {% endif %}
   {% endif %}

packages/govuk-frontend/src/govuk/components/radios/template.test.js

@@ -262,6 +262,15 @@ describe('Radios', () => {
         const $input = $('.govuk-radios__input').first()
         expect($input.attr('data-aria-controls')).toBeFalsy()
       })
+
+      // Indentation in nunjucks can mutate the value of textareas, since
+      // textarea value is defined between the html tags
+      it('does not add space to the input value of textareas inside conditionals', () => {
+        const $ = render('radios', examples['textarea in conditional'])
+
+        const $textarea = $('#conditional-textarea')
+        expect($textarea.text()).toBe('test\n')
+      })
     })
 
     it('render divider', () => {