Removal of :focus styles in tutorial code

In the tutorial, the :focus styles are removed, which as we all know (or should) that this is not the best way to do this because of accessibility reasons. I know it’s a tutorial for a Tic-Tac-Toe game, but this teaches bad accessibility practices and needs to be, as well as should be fixed.

Keyboard accessibility is crucial to some, and using the TAB key to navigate is also crucial to those folks as well. As well as others who use the keyboard for navigation and/or a screen reader.

Whether you remove the code entire, which I have done and it is fine with thin dotted borders in Firefox, or the glowing green border color in Chrome/Edge and Safari, this sets a bad example. You could change this code below:

.square:focus {
  outline: none;
}

to look the same across the major modern browsers using:

.square:focus {
  outline: thin dotted;
}

It is my experience in the accessibility and programming spaces, that if you foster the idea of accessibility at the most fundamental levels, like tutorials, this fosters a pattern of positivity towards accessibility. Teaching juniors to remove the default:focus styling in the browser needs to stop so they can learn the fundamentals of accessibility as well as programming.

[Lewiscowles1986]

I’ll just leave this here https://github.com/facebook/react/search?l=CSS&q=%3Afocus

[Lewiscowles1986]

I said everything and pointed out two examples

• background color
• text color

I’ll be honest Bow out, enjoy your weekend and life as far as I’m concerned this is peak React Dev. If something is clipping outline, surely removing the clipping, rather than coming up with hot takes on alternatives 🙄