Thread by @adamwathan

Learned today that using the box shadow property to create custom focus styles is insufficient because high contrast mode on Windows doesn’t render box shadows at all.

The hoops you have to jump through on the web are unbelievable, it’s no wonder everything is inaccessible :/

Here’s a relevant link, thanks @david_luhr for teaching me about this one 🥴

core.trac.wordpress.org/ticket/41286

Take away is if you want a custom focus style that follows an element’s border radius, literally only option is pseudo elements that are absolutely positioned relative to the main element so they aren’t in the document flow. No one does this of course though 😶

You might think to yourself “well fuck it I’m done with custom focus styles, I’ll just use the browser default from now on.”

Sorry pal, that’s inaccessible too on many background colors depending on the browser. You lose this game even if you don’t play 🙃

This is a pretty good trick though, hat tip to @devongovett for sharing this article:

blogs.windows.com/msedgedev/2020…

Maybe we'll change `outline-none` in Tailwind 2.0 to this, or at least add `outline-transparent`.