Hint component can render block-level elements as valid HTML

CHANGELOG.md

@@ -8,6 +8,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:
 
 - [#1838: Correctly camel case SVG attributes in the header and footer](https://github.com/alphagov/govuk-frontend/pull/1838)
 - [#1842: Preserve the state of conditional reveals when navigating 'back' in the browser](https://github.com/alphagov/govuk-frontend/pull/1842)
+- [#1855: Hint component can render block-level elements as valid HTML](https://github.com/alphagov/govuk-frontend/pull/1855)
 
 ## 3.7.0 (Feature release)
 
@@ -68,7 +69,7 @@ This was added in [pull request #1754: Add collapseOnMobile breadcrumbs flag](ht
 The [back link](https://design-system.service.gov.uk/components/back-link/) component is now:
 
 - bigger, so it's easier to select if you're using a touch screen
-- more consistent with the design of the breadcrumb component 
+- more consistent with the design of the breadcrumb component
 
 This was added in [pull request #1753: Make back link arrow consistent with breadcrumb component](https://github.com/alphagov/govuk-frontend/pull/1753). Thanks to [@vanitabarrett](https://github.com/vanitabarrett) and [@miaallers](https://github.com/miaallers).
 

src/govuk/components/character-count/__snapshots__/template.test.js.snap

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Character count when it includes a hint renders with hint 1`] = `
-<span id="character-count-with-hint-hint"
-      class="govuk-hint"
+<div id="character-count-with-hint-hint"
+     class="govuk-hint"
 >
   It&#x2019;s on your National Insurance card, benefit letter, payslip or P60. For example, &#x2018;QQ 12 34 56 C&#x2019;.
-</span>
-<span id="character-count-with-hint-info"
-      class="govuk-hint govuk-character-count__message"
-      aria-live="polite"
+</div>
+<div id="character-count-with-hint-info"
+     class="govuk-hint govuk-character-count__message"
+     aria-live="polite"
 >
   You can enter up to 10 characters
-</span>
+</div>
 `;
 
 exports[`Character count when it includes an error message renders with error message 1`] = `

src/govuk/components/checkboxes/__snapshots__/template.test.js.snap

@@ -42,22 +42,22 @@ exports[`Checkboxes nested dependant components passes through label params with
 `;
 
 exports[`Checkboxes when they include a hint renders the hint 1`] = `
-<span id="example-hint"
-      class="govuk-hint"
+<div id="example-hint"
+     class="govuk-hint"
 >
   If you have dual nationality, select all options that are relevant to you.
-</span>
-<span id="example-item-hint"
-      class="govuk-hint govuk-checkboxes__hint"
+</div>
+<div id="example-item-hint"
+     class="govuk-hint govuk-checkboxes__hint"
 >
   Hint for british option here
-</span>
-<span id="example-3-item-hint"
-      class="govuk-hint govuk-checkboxes__hint app-checkboxes__hint-other"
-      data-test-attribute="true"
+</div>
+<div id="example-3-item-hint"
+     class="govuk-hint govuk-checkboxes__hint app-checkboxes__hint-other"
+     data-test-attribute="true"
 >
   Hint for other option here
-</span>
+</div>
 `;
 
 exports[`Checkboxes when they include an error message renders the error message 1`] = `

src/govuk/components/date-input/__snapshots__/template.test.js.snap

@@ -45,11 +45,11 @@ exports[`Date input passes through html fieldset params without breaking 1`] = `
 `;
 
 exports[`Date input when it includes a hint renders the hint 1`] = `
-<span id="dob-errors-hint"
-      class="govuk-hint"
+<div id="dob-errors-hint"
+     class="govuk-hint"
 >
   For example, 31 3 1980
-</span>
+</div>
 `;
 
 exports[`Date input when it includes an error message renders the error message 1`] = `

src/govuk/components/hint/_index.scss

@@ -16,7 +16,7 @@
   // is unlikely that the default or govuk-label--s class would be used in this
   // case.
 
-  // This adjustment will not work in browsers that do not support :not(). 
+  // This adjustment will not work in browsers that do not support :not().
   // Users with these browsers will see the default size margin (5px larger).
 
   .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
@@ -30,7 +30,7 @@
   // it is unlikely that the default or govuk-fieldset__legend--s class would be
   // used in this case.
 
-  // This adjustment will not work in browsers that do not support :not(). 
+  // This adjustment will not work in browsers that do not support :not().
   // Users with these browsers will see the default size margin (5px larger).
 
   .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint {

src/govuk/components/hint/template.njk

@@ -1,4 +1,4 @@
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {{ params.html | safe if params.html else params.text }}
-</span>
+</div>

src/govuk/components/input/__snapshots__/template.test.js.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Input when it includes a hint renders the hint 1`] = `
-<span id="input-with-hint-hint"
-      class="govuk-hint"
+<div id="input-with-hint-hint"
+     class="govuk-hint"
 >
   It&#x2019;s on your National Insurance card, benefit letter, payslip or P60. For example, &#x2018;QQ 12 34 56 C&#x2019;.
-</span>
+</div>
 `;
 
 exports[`Input when it includes an error message renders the error message 1`] = `

src/govuk/components/radios/__snapshots__/template.test.js.snap

@@ -42,22 +42,22 @@ exports[`Radios nested dependant components passes through label params without
 `;
 
 exports[`Radios when they include a hint renders the hint 1`] = `
-<span id="example-hint"
-      class="govuk-hint"
+<div id="example-hint"
+     class="govuk-hint"
 >
   This includes changing your last name or spelling your name differently.
-</span>
-<span id="example-item-hint"
-      class="govuk-hint govuk-radios__hint"
+</div>
+<div id="example-item-hint"
+     class="govuk-hint govuk-radios__hint"
 >
   Hint for yes option here
-</span>
-<span id="example-2-item-hint"
-      class="govuk-hint govuk-radios__hint app-radios__hint-no"
-      data-test-attribute="true"
+</div>
+<div id="example-2-item-hint"
+     class="govuk-hint govuk-radios__hint app-radios__hint-no"
+     data-test-attribute="true"
 >
   Hint for no option here
-</span>
+</div>
 `;
 
 exports[`Radios when they include an error message renders the error message 1`] = `

src/govuk/components/select/__snapshots__/template.test.js.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Select when it includes a hint renders the hint 1`] = `
-<span id="select-with-hint-hint"
-      class="govuk-hint"
+<div id="select-with-hint-hint"
+     class="govuk-hint"
 >
   Hint text goes here
-</span>
+</div>
 `;
 
 exports[`Select when it includes an error message renders with error message 1`] = `

src/govuk/components/textarea/__snapshots__/template.test.js.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Textarea when it includes a hint renders with hint 1`] = `
-<span id="textarea-with-error-hint"
-      class="govuk-hint"
+<div id="textarea-with-error-hint"
+     class="govuk-hint"
 >
   It&#x2019;s on your National Insurance card, benefit letter, payslip or P60. For example, &#x2018;QQ 12 34 56 C&#x2019;.
-</span>
+</div>
 `;
 
 exports[`Textarea when it includes an error message renders with error message 1`] = `