WAVE accessibility tool alerting on <details> styling

[wilsond-gds]

Description of the issue

Pages using the details component will cause an unexpected alert in the Wave accessibility evalution tool as of 11th March 2024.

Steps to reproduce the issue

Run the Wave checker on any page using a details component. The tool will create an Underlined text alert for each use of the summary tag. Wave is probably picking up the underline from the CSS that styles the summary text span.

.govuk-details__summary-text {
    text-decoration: underline;
}

Actual vs expected behaviour

This is a very small issue which is easily cleared up by checking the source code, but may cause problems if we advocate for developers to run automated tests before committing code to a repository.

Environment (where applicable)

• Operating system: MacOS
• Browser: Chrome
• GOV.UK Frontend Version: 4.8.0

[36degrees]

This appears as an alert in WAVE.

WAVE's 'reference' (contextual help) says:

What It Means

Underlined text is present.

Why It Matters

Underlines almost universally indicates linked text. Consider removing the underline from the non-link text. Other styling (e.g., bold or italics) can be used to differentiate the text.

How to Fix It

Unless there is a distinct need for the underlined text, remove the underline from it.

The Algorithm... in English

A <u> element or element with text-decoration:underline styles is present.

Standards and Guidelines

None

Given we're intentionally styling it similarly to a link to make it appear interactive, I don't think this is something we're likely to want to change?

I've added it to our 'known issues' project so that other WAVE users might be able to find this issue.