Great read, however I do have one qualm with you saying to remove outline for focused input elements. The outline property's specification doesn't call for need to follow border-radius (however Safari does). Check this out for more about it:
thanks for the feedback! I just meant I didn't like it from a styling perspective, I don't like how it looks. But the accessibility factor in the link you shared trumps my styling preference, and I didn't know that about it so thank you! The accessibility part of my lighthouse report did not catch this either
The outline property itself isn't the critical bit. A distinct, accessible focus state is. So you could fake them:
box-shadow: 0 0 0 3px #bfe7f3;
Only down-side to this technique is you generally need to then pay attention to the focus appearance for anything else in the app that receives focus so they all match.
Hope that's helpful and not just a noise-comment for what is a very awesome article! :)
thanks for the tip!
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.