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:

backpack.css/src/text-content.css

Lines 1 to 10 in 318df58

	/*
	* In applications lists are ubiquitous and it's extremely rare they're used in
	* long form content therefore it makes sense to strip away their bullets in
	* addition to removing their default margin and padding (see: Resets).
	*/
	ul,
	ol {
	list-style-type: none;
	}

[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.