Add focus style to the switch toggle controls

[afercia]

This PR is a first try to add a focus style to the switch toggle UI control (FormToggle component).

It changes the CSS generated element (:after) previously used to style the switch "thumb" to a span element. This way it's trivial to target it when the input has focus and it is possible to use any style. For a11y reasons, it's better to use a border for the focus style, see the discussion on the issue about Windows High Contrast mode.

Pending design and a11y feedback.

Fixes #1562

[jasmussen]

Really nice work, thank you for doing this. This is a vast improvement.

I wish we could attach an outline or box shadow to the whole element, as opposed to just the thumb inside, but given we can't do that (because it's the input that gets focus and we can't attach a ::before to that), this seems like a good compromise. Designwise, thumbs up!

[jasmussen]

This seems a little bit obtuse, coding style wise. I admit to not being 100% sure about exactly what the coding guidelines would say, but I have a feeling it would be better to replace &__thumb with just plainly .components-form-toggle__thumb.

[afercia]

I wish we could attach an outline or box shadow to the whole element,

Actually, I think it can be done 🙁 following the same approach and replacing :before with a span element then we move it after the input and we can target both the spans:
input:focus + span
input:focus + span + span
and maybe adjust z-indexes. Will give it a try.

[jasmussen]

Oooh, exciting!

I dig the way they look in Bear app:

That is, an outline around the entire switch. We'd want it WordPress style, though.

[afercia]

Playing a bit: on the Bear app it's nicer because the box-shadow has a different color than the background. Instead, the WordPress box-shadow default color is blue so when is-checked and focused, it looks a bit too big:

One option could be adding a first 1 pixel white box-shadow:

or maybe use a different color? It's just a matter of a design choice, I think the approach works.

One thing that needs to be changed for a11y is that the "thumb" shouldn't be filled with the background when focused, we should increase the border-width instead. Because:

High Contrast generally replaces default text and border colors and strips out background colors and shadows

[afercia]

I'm going with the white + blue box-shadow for now, can be changed of course. Should be tested on IE 11, not possible at the moment: see #1397 and #1863.

I've tested it also with the "hint" visible (see screenshot below on the left) and in Windows High Contrast mode where the focus state works because the "thumb" is filled increasing the border width (screensnot on the right):

[jasmussen]

Love this. Very impressive work. Ship ship ship.

[afercia]

The builds fail because of... aliens! 👽