I like this a lot. Thomas has not only given plenty of detail on how to make outline look nice, but they’ve provided useful breakdowns of problems that could be happening for you and how to fix those problems.
Keyboard focus styles are so important to get right, not just for accessibility, but for overall quality UX. One tip from me though is if you use box shadows (like one of the examples of a double outline), they won’t show up in high contrast mode. Transparency is a handy trick there though.
I like to set each property separately so it’s more readable
☝️ of all the pro tips in the article, I’d say this is the most important one. No code is self-documenting, but breaking things out into separate properties, rather than using shorthands is a good way to make your code more maintainable.
