Fixing lists for VoiceOver 🤦🏻‍♀️

[chris-pearce]

See here:

• https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
• https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none
• https://twitter.com/yatil/status/1083736641737502720

I really don't like this and agree 100% with this tweet. But caring about accessibility I feel my hands are tied.

Here is the related code:

https://github.com/chris-pearce/backpack.css/blob/318df58e7d9c84817bdf20f8b4e8666e0a7b27aa/src/text-content.css#L1-L10

[chris-pearce]

Reading into this more I'm now leaning to not doing this as it seems the fix can cause issues in rendering and the alternative SVG fix doesn't feel as well tested (yet). Will leave this open for now.

[chris-pearce]

I delved into this pretty deeply and discovered that the pseudo-element fix doesn't do anything in the latest Safari. You need to combine it with the SVG treatment sanitize.css applies. However, this only works for unordered lists, ordered lists incorrectly get acknowledged as unordered lists.

I'm going to leave this open for now.