Change paragraph to div for descriptions to support govspeak

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased changes
+
+* Change paragraph to div for descriptions to support govspeak (PR #985)
+
 ## 17.13.0
 
 * Add support for description text (PR #971)

app/views/govuk_publishing_components/components/_checkboxes.html.erb

@@ -11,7 +11,7 @@
         <%= cb_helper.heading_markup %>
 
         <% if cb_helper.description %>
-          <%= tag.p cb_helper.description, class: "govuk-body" %>
+          <%= tag.div cb_helper.description, class: "govuk-body" %>
         <% end %>
 
         <% if cb_helper.hint_text %>

app/views/govuk_publishing_components/components/_radio.html.erb

@@ -42,7 +42,7 @@
     <% end %>
 
     <% if description.present? %>
-      <%= tag.p description, class: "govuk-body" %>
+      <%= tag.div description, class: "govuk-body" %>
     <% end %>
 
     <% if hint %>

spec/components/checkboxes_spec.rb

@@ -350,4 +350,18 @@ def component_name
     )
     assert_select ".govuk-body", text: "This is a description about skittles."
   end
+
+  it "renders checkboxes with a govspeak description text" do
+    render_component(
+      name: "favourite_colour",
+      heading: "What is your favourite skittle?",
+      description: render("govuk_publishing_components/components/govspeak",
+        content: "<p>This is a description about skittles.</p>".html_safe),
+      items: [
+        { label: "Red", value: "red" },
+        { label: "Green", value: "green" },
+      ]
+    )
+    assert_select ".govuk-body", text: "This is a description about skittles."
+  end
 end

spec/components/radio_spec.rb

@@ -424,6 +424,20 @@ def component_name
     )
     assert_select ".govuk-body", "This is a description about skittles."
   end
+
+  it "renders govspeak description text" do
+    render_component(
+      name: "favourite-skittle",
+      heading: "What is your favourite skittle?",
+      description: render("govuk_publishing_components/components/govspeak",
+        content: "<p>This is a description about skittles.</p>".html_safe),
+      items: [
+        { label: "Red", value: "red" },
+        { label: "Blue", value: "blue" }
+      ]
+    )
+    assert_select ".govuk-body", "This is a description about skittles."
+  end
 end
 
 # This component can be interacted with, so use integration tests for these cases.