Remove div around body content of error summary

This has been identified as prventing JAWS 2022 from reading the full length of the error summary on page load. The hypothesis for why removing this works is that JAWS isn't seeing the body div as valid content and thus refuses to announce it, even though it contains valid content.
alphagov · Jul 18, 2022 · 491645a · 491645a
1 parent 0d98580
commit 491645a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 16 deletions.
diff --git a/src/govuk/components/error-summary/_index.scss b/src/govuk/components/error-summary/_index.scss
@@ -20,13 +20,11 @@
     @include govuk-responsive-margin(4, "bottom");
   }
 
-  .govuk-error-summary__body {
+  .govuk-error-summary__body,
+  .govuk-error-summary__body p {
     @include govuk-font($size: 19);
-
-    p {
-      margin-top: 0;
-      @include govuk-responsive-margin(4, "bottom");
-    }
+    @include govuk-responsive-margin(4, "bottom");
+    margin-top: 0;
   }
 
   // Cross-component class - adjusts styling of list component

diff --git a/src/govuk/components/error-summary/template.njk b/src/govuk/components/error-summary/template.njk
@@ -5,13 +5,12 @@
   <h2 class="govuk-error-summary__title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
   </h2>
-  <div class="govuk-error-summary__body">
-    {% if params.descriptionHtml or params.descriptionText %}
-    <p>
+  {% if params.descriptionHtml or params.descriptionText %}
+    <p class="govuk-error-summary__body">
       {{ params.descriptionHtml | safe if params.descriptionHtml else params.descriptionText }}
     </p>
-    {% endif %}
-    <ul class="govuk-list govuk-error-summary__list">
+  {% endif %}
+  <ul class="govuk-list govuk-error-summary__list">
     {% for item in params.errorList %}
       <li>
       {% if item.href %}
@@ -21,6 +20,5 @@
       {% endif %}
       </li>
     {% endfor %}
-    </ul>
-  </div>
+  </ul>
 </div>
diff --git a/src/govuk/components/error-summary/template.test.js b/src/govuk/components/error-summary/template.test.js
@@ -64,22 +64,22 @@ describe('Error-summary', () => {
 
     it('renders description text', () => {
       const $ = render('error-summary', examples.description)
-      const summaryDescription = $('.govuk-error-summary__body p').text().trim()
+      const summaryDescription = $('.govuk-error-summary__body').text().trim()
 
       expect(summaryDescription).toEqual('Lorem ipsum')
     })
 
     it('allows description text to be passed whilst escaping HTML entities', () => {
       const $ = render('error-summary', examples['html as descriptionText'])
 
-      const summaryDescription = $('.govuk-error-summary__body p').html().trim()
+      const summaryDescription = $('.govuk-error-summary__body').html().trim()
       expect(summaryDescription).toEqual('See errors below (&#x25BC;)')
     })
 
     it('allows description HTML to be passed un-escaped', () => {
       const $ = render('error-summary', examples['description html'])
 
-      const summaryDescription = $('.govuk-error-summary__body p').html().trim()
+      const summaryDescription = $('.govuk-error-summary__body').html().trim()
       expect(summaryDescription).toEqual('See <span>errors</span> below')
     })