summary-list component contains axe accessibility issue

[alittlecross]

Description of the issue

Using the summary-list component with multiple rows where some do not have actions; the component adds a span to those rows. This is considered a serious issue by the Axe accessibility tool, presenting the below error when using the axe-core chrome extension:

<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements

The section of the template relating to this is here.

The issue may be resolvable by using a div instead so long as the govuk-summary-list__actions class results in the elements rendering the same.

Steps to reproduce the issue

Use the summary-list component with multiple rows where some do not have actions. Using the axe-core chrome extension on the page that contains that component:

Actual vs expected behaviour

No accessibility issue.

Environment (where applicable)

I am using the below however the component remains the same in the current version of the toolkit and colleagues have witnessed the same behaviour on macOS Mojave, with other versions of Chrome.

• Operating system: macOS Catalina
• Browser: Chrome
• Browser version: 88.0.4324.150
• GOV.UK Frontend Version: 3.10.1

[36degrees]

Hi @alittlecross – thanks for flagging this.

I think this is the same as issue #1806 – would you mind checking?

[alittlecross]

Yep - Malcolm is in fact on my team, but raised that before I joined - then I didn't thoroughly search the issues to check it hadn't been raised before - apologies.

[36degrees]

No worries – thanks again for flagging it!