Wp-calypso: Hover State Remaining after Click on Mobile Devices

[Aurorum]

Steps to reproduce

1. Starting pretty much anywhere on Calypso, but https://wordpress.com/plans as an example (must be on mobile)
2. Tap "Business and Online Stores"
3. Notice that the lighter colour indicates it's still in a hover state - you need to tap away from it to turn to its normal colour.

What I expected

I expected, upon clicking the button, for it to longer be in a hover state. This affects a lot more outside the Plans page though, for example the slightly horrible contrast in the new sidebar layout. It's likely also causing #30257.

Using Chrome 73 on Android

[bluefuton]

This is caused by the focus styles applied when a current item is-selected and has focus. Tapping away from the control restores the correct colour because the element no longer has focus.

I'm not sure how to resolve this one without removing the focus colour on is-selected, and that doesn't feel like a good solution.

[bluefuton]

It can be reproduced on desktop too from the Devdocs page:

http://calypso.localhost:3000/devdocs/design/segmented-control

[sixhours]

~I think the solution is to use separate colors for hover and focus/is-selected states, and the latter should use colors with higher contrast.~

Scratch that, we need the different focus styles for accessibility/keyboard navigation purposes, and I don't think we can assume that users on mobile devices aren't using a keyboard to navigate.

Perhaps we should consider replacing the lighter focus color with a darker shade for better contrast, but still differentiated from the is-selected color.