Fix accessibility issue in contents list component

[MartinJJones]

What

Stop dashes before each 'Contents' list item being read by screen readers

Why

Nearly every screen reader (except NVDA of the major ones) reads out the “em dash“ before each item/link in the “Contents“ list. Screen reader users found that frustrating to read through.

Trello card

Accessibility testing

Screen Reader	Browser	Issue fixed
NVDA - 2023.3.3	Firefox - 123	fixed ✅
Narrator - 21H2	Edge 122	fixed ✅
JAWS 2022	Chrome	fixed ✅
JAWS 2023	Chrome	fixed ✅
VoiceOver 10	Safari 17.3.1	fixed ✅
VoiceOver 10	Safari 17.3.1	fixed ✅
VoiceOver 10	Firefox 123	fixed ✅

VoiceOver example

VoiceOver Before

content-list-before.mov

VoiceOver After

content-list-after.mov

Further info

Using list-style-type

We considered using list-style-type, however this did present us with 2 issues.

1. The dash style currently used it not available as a list style, we would have to choose something else such as “circle” or “disc” for example.
2. When testing in VoiceOver the list item style is still read out as “You are currently on a AXListMarker”

Using speak

We also explored other options, such as using the CSS speak property to turn off voice output for screen readers. On top of this, browser support is very limited currently, so this is not an option - "speak" | Can I use... Support tables for HTML5, CSS3, etc

[davidtrussler]

LGTM 👍 - Nice fix!
Tested locally with Voiceover (using the combination of keys you listed) and worked fine compared to current implementation.