Discussion on: 53 Things I Learned Writing a Multiplayer Strategy Game in Javascript and Python

View post

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:

outlinenone.com/

Lina Rudashevski • Aug 21 '19

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

Jer • Aug 21 '19

The outline property itself isn't the critical bit. A distinct, accessible focus state is. So you could fake them:

input:focus {
  outline: 0;
  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! :)

Lina Rudashevski • Aug 21 '19

thanks for the tip!