AprilSylph
AccessKit Disable GIFs: Use pseudo element for labels
Description
Okay, now Disable GIFs is really all CSS. Modify her DOM? I hardly—yeah, okay, no. Anyway.
This replaces the <p> GIF label element with a data attribute and CSS that sets ::after. This means it's always on top and never duplicated, so the code that ensures those are the case can be removed.
This would, of course, be a problem if Tumblr ever set ::after on the parent element of a GIF or on an element with a background that contains a GIF. https://www.tumblr.com/dashboard/tumblr_tv has a ::before, so we've at least gotten close to it happening.
Branch based off of #1729 for ease of comprehensive testing. I'll probably debate (and test) this for a bit and then potentially merge it into other PRs.
Testing steps
As it turns out, yes: there are, that I can tell, a single digit number of ::after elements in redpop... and yet one of them, a post with a poll and an image that's in the blog view sidebar recommended posts section (e.g.) is indeed on an element with a GIF background and thus breaks with this.
(fix: exclude adding label attribute to ${keyToCss('pollBlock')}${keyToCss('hasBgImage')})
On the other hand, the signpostCta elements currently atop communities has css adjusting <p> elements within them, which messes up the non-pseudo label we're currently using if you enable Disable GIFs on it. Ups and downs, then.