From 792e27b293d2a9144bc85ea1bca882630e6bc07e Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Wed, 8 Sep 2021 13:41:47 +0100
Subject: [PATCH] Add failing test for invalid HTML in summary list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a summary list has actions in only some of the rows, we include an empty span with the `govuk-summary-list__actions` class in the rows that do not have actions:

```
dl.govuk-summary-list
  div.govuk-summary-list__row
     dt.govuk-summary-list__key
     dd.govuk-summary-list__value
     dd.govuk-summary-list__actions <-- List of actions
  div.govuk-summary-list__row
     dt.govuk-summary-list__key
     dd.govuk-summary-list__value
     span.govuk-summary-list__actions <-- Empty
```

This is required because (from the tablet breakpoint upwards) the summary list is displayed as a table, and the bottom border on each 'row' is applied to the individual 'cells' within that row (the key, value, and actions elements). Omitting the actions element from a row therefore means that that part of the row does not have a bottom border.

However, this is invalid HTML as the content model for the `<dl>` element [1] only allows for 'either: Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. Or: One or more div elements, optionally intermixed with script-supporting elements.'

As such, it's not valid for a <span> to be a direct child of a `<dl>`. This has been flagged by automated testing tools such as Axe (as seen in #1806) – although we're not aware of any issues that it would cause for users in practise.

Add a failing test that covers this by running Axe on the example that has rows both with and without actions.

The test fails with:

> Summary list › rows › actions › passes accessibility tests when some rows do not have actions
>
> expect(received).toHaveNoViolations(expected)
>
> Expected the HTML found at $('dl') to have no violations:
>
> <dl class="govuk-summary-list">
>
> Received:
>
> "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements (definition-list)"
>
> Fix all of the following:
>    List element has direct children that are not allowed inside <dt> or <dd> elements
>
> You can find more information on this issue here:
> https://dequeuniversity.com/rules/axe/4.2/definition-list?application=axeAPI

[1]: https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element
---
 src/govuk/components/summary-list/template.test.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/govuk/components/summary-list/template.test.js b/src/govuk/components/summary-list/template.test.js
index a22c114792..5966f1efe5 100644
--- a/src/govuk/components/summary-list/template.test.js
+++ b/src/govuk/components/summary-list/template.test.js
@@ -224,6 +224,13 @@ describe('Summary list', () => {
         expect($action[1].tagName).toEqual('span')
         expect($($action[1]).text()).toEqual('')
       })
+
+      it('passes accessibility tests when only some rows have actions', async () => {
+        const $ = render('summary-list', examples['with some actions'])
+  
+        const results = await axe($.html())
+        expect(results).toHaveNoViolations()
+      })
     })
   })
 })