Do not output empty conditionals

If `item.conditional.html` is falsy, perhaps because it’s referencing a variable that is conditionally assigned, the macro currently outputs an empty `div.govuk-checkboxes__conditional` and associates it with the input using aria-controls. By testing for item.conditional.html (which is the only property in the item.conditional object used within the macro) we can avoid this.
alphagov · Sep 27, 2019 · 1cbb063 · 1cbb063
1 parent f481811
commit 1cbb063
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 6 deletions.
diff --git a/src/govuk/components/checkboxes/template.njk b/src/govuk/components/checkboxes/template.njk
@@ -16,7 +16,7 @@
 
 {% set isConditional = false %}
 {% for item in params.items %}
-  {% if item.conditional %}
+  {% if item.conditional.html %}
     {% set isConditional = true %}
   {% endif %}
 {% endfor %}
@@ -75,7 +75,7 @@
           <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
           {{-" checked" if item.checked }}
           {{-" disabled" if item.disabled }}
-          {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
+          {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
           {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
           {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
           {{ govukLabel({
@@ -95,7 +95,7 @@
           }) | indent(6) | trim }}
           {% endif %}
         </div>
-        {% if item.conditional %}
+        {% if item.conditional.html %}
           <div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
             {{ item.conditional.html | safe }}
           </div>

diff --git a/src/govuk/components/checkboxes/template.test.js b/src/govuk/components/checkboxes/template.test.js
@@ -501,6 +501,42 @@ describe('Checkboxes', () => {
       expect($firstInput.attr('data-aria-controls')).toBe('conditional-example-conditional')
       expect($firstConditional.attr('id')).toBe('conditional-example-conditional')
     })
+
+    it('omits empty conditionals', () => {
+      const $ = render('checkboxes', {
+        name: 'example-conditional',
+        items: [
+          {
+            value: 'foo',
+            text: 'Foo',
+            conditional: {
+              html: false
+            }
+          }
+        ]
+      })
+
+      const $component = $('.govuk-checkboxes')
+      expect($component.find('.govuk-checkboxes__conditional').length).toEqual(0)
+    })
+
+    it('does not associate checkboxes with empty conditionals', () => {
+      const $ = render('checkboxes', {
+        name: 'example-conditional',
+        items: [
+          {
+            value: 'foo',
+            text: 'Foo',
+            conditional: {
+              html: false
+            }
+          }
+        ]
+      })
+
+      const $input = $('.govuk-checkboxes__input').first()
+      expect($input.attr('data-aria-controls')).toBeFalsy()
+    })
   })
 
   it('render additional label classes', () => {

diff --git a/src/govuk/components/radios/template.njk b/src/govuk/components/radios/template.njk
@@ -13,7 +13,7 @@
 
 {% set isConditional = false %}
 {% for item in params.items %}
-  {% if item.conditional %}
+  {% if item.conditional.html %}
     {% set isConditional = true %}
   {% endif %}
 {% endfor %}
@@ -69,7 +69,7 @@
           <input class="govuk-radios__input" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
           {{-" checked" if item.checked }}
           {{-" disabled" if item.disabled }}
-          {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
+          {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
           {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
           {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
           {{ govukLabel({
@@ -89,7 +89,7 @@
           }) | indent(6) | trim }}
           {% endif %}
         </div>
-        {% if item.conditional %}
+        {% if item.conditional.html %}
           <div class="govuk-radios__conditional{% if not item.checked %} govuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
             {{ item.conditional.html | safe }}
           </div>

diff --git a/src/govuk/components/radios/template.test.js b/src/govuk/components/radios/template.test.js
@@ -433,6 +433,50 @@ describe('Radios', () => {
         expect($firstInput.attr('data-aria-controls')).toBe('conditional-example-conditional')
         expect($firstConditional.attr('id')).toBe('conditional-example-conditional')
       })
+
+      it('omits empty conditionals', () => {
+        const $ = render('radios', {
+          name: 'example-conditional',
+          items: [
+            {
+              value: 'yes',
+              text: 'Yes',
+              conditional: {
+                html: false
+              }
+            },
+            {
+              value: 'no',
+              text: 'No'
+            }
+          ]
+        })
+
+        const $component = $('.govuk-radios')
+        expect($component.find('.govuk-radios__conditional').length).toEqual(0)
+      })
+
+      it('does not associate radios with empty conditionals', () => {
+        const $ = render('radios', {
+          name: 'example-conditional',
+          items: [
+            {
+              value: 'yes',
+              text: 'Yes',
+              conditional: {
+                html: false
+              }
+            },
+            {
+              value: 'no',
+              text: 'No'
+            }
+          ]
+        })
+
+        const $input = $('.govuk-radios__input').first()
+        expect($input.attr('data-aria-controls')).toBeFalsy()
+      })
     })
 
     it('render divider', () => {