Reactjs.org: Removal of :focus styles in tutorial code

[colabottles]

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]

Please see https://github.com/facebook/react/issues/19196

[Lewiscowles1986]

It actually seems less awful in this repo than the facebook/react one

• https://github.com/reactjs/reactjs.org/search?l=JavaScript&q=%3Afocus
• https://github.com/reactjs/reactjs.org/search?l=CSS&q=%3Afocus

Assuming some of this might need that upstream patched though

[charleshalldesign]

Both Sufficient Techniques, G149 & G165 of relying on the user agent or platform defaults (respectively) are supported methods of conforming with the 2.4.7 Focus Visible criterion. However, while this technically conforms, there are hundreds of scenarios where the defaults will have insufficient contrast to be considered visible. It is highly recommended to not rely on these defaults – even though both Edge & Chrome shipped all new focus indication styles specifically to be more accessible.

Never remove, unset, or reset the user agent default indicator without replacing it with a stronger indicator. Having no indicator is a barrier to access.

[Lewiscowles1986]

Interestingly, check out the other link to https://github.com/facebook/react/issues/19196. @charleshalldesign you may be better suited to evaluate than I feel. I'm certainly not happy that text color change is visually different enough, or the rationale behind the change, but I'm not part of this repo...

background color arguably has more surface area, so IDK in that case.

Links

https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
https://www.w3.org/WAI/WCAG21/Techniques/general/G149
https://www.w3.org/WAI/WCAG21/Techniques/general/G165

[colabottles]

This must have a very low priority because there hasn't been any other discussion from anyone from the tam in almost 4 weeks. I wish someone from the team would take notice and perhaps join in on the discussion.

[charleshalldesign]

current:
.square:focus { outline: none; }
.kbd-navigation .square:focus { background: #ddd; }

result:

ddd : #fff = 1.4:1 luminosity contrast

expected (possible method):
.square:focus { outline: none; }
.kbd-navigation .square:focus { background: #8c8c8c; }

result:

8c8c8c : #fff = 3.36:1 luminosity contrast

example: https://contrast-triangle.com/?textColor=hsl(0,%200%25,%200%25)&linkColor=%238c8c8c&bgColor=%23ffffff

[Lewiscowles1986]

That is a fantastic link @charleshalldesign

I think it's still fairly visibly lighter at #6f6f6f