Axe/Lighthouse accessibility issue with Warning Callout component

[nhsbsa-chris]

Bug Report

What is the issue?

We are using the Warning Callout component but Axe and Lighthouse both report an issue with the use of span[role="text"]

Axe

Lighthouse

What steps are required to reproduce the issue?

1. Add the following extensions to Chrome - Axe DevTools and Wave Evaluation Tool
2. Navigate to the following page - https://nhsuk.github.io/nhsuk-frontend/components/warning-callout/custom-heading.html
3. Inspect - Axe DevTools - Scan ALL of my Page - AND - Lighthouse - Accessibility/Desktop or Mobile - Generate Report

What was the environment where this issue occurred?

• Device: MacBook Pro
• Operating System: macOS Catalina (Version 10.15.7)
• Browser: Google Chrome
• Browser Version: 89.0.4389.128
• NHS.UK Frontend Package Version: 5.0.0
• Node Version: 10.15.1
• NPM Version: 6.4.1

[mcheung-nhs]

Hi @nhsbsa-chris,

Thanks for raising this.

The reason we use the <span role="text"></span> was to deal with a VoiceOver 'feature' where it reads out 'chunks' of content if wrapped in separate elements. See https://axesslab.com/text-splitting/ for an explanation.

Unfortunately the role of 'text' is not a valid role value, hence why axe flags it as an issue.
However, we took the view in this case that we would prefer VoiceOver to read content out in a way that may not cause confusion so chose this method to do that, even though it is not valid.

There's also further discussion here from Deque about adding an exception for it:
dequelabs/axe-core#1597

[chrimesdev]

Are we happy for this issue to be closed @nhsbsa-chris @mcheung-nhs?