Toggle UI position changes when paired with on/off label

[JJJ]

When toggling the toggle on & off, and when the "On" & "Off" label is included, the UI for the toggle itself gets repositioned.

Most toggles do not include the label. Post Settings > Pending does not – Post > Drop Cap does.

The number of pixels of movement is related to the width of the text used for the "On" & "Off" label.

If we want to keep those labels, this is going to be tricky to fix as is because of internationalization, and the words for "On" & "Off" may not be as visually close in width for languages as they are in English.

In English, the jiggle is hardly noticeable. In other languages, it may be a sizable jump.

A few recommendations:

• Remove the labels everywhere
• Hide the labels with a screen-reader assist type approach
• Swap them – labels on the inside (left on LTR) and toggles on the outside (right on LTR)

[youknowriad]

related #1389 (comment)

[JJJ]

Ha. Multiple Discovery is freggin' weird.

[afercia]

As mentioned in #906 (now closed but this part is still to address), from an accessibility perspective these "switch toggles need a visible text for feedback. Color alone and the position of the "knob" are not sufficient to give a clear feedback about the toggle state.

Worth noting the visible "On/Off" text shouldn't be a <label> element (because the toggles already have their labels), it should be just a visible text hidden from screen readers with aria-hidden="true".

One option could be moving the On/Off text below the toggle, that's what we've done at Yoast for an internal project. For example:

[jasmussen]

Pretty sure I fixed this (see Riad's comment) — are you seeing this in master?

[afercia]

Couldn't reproduce this in master. Tested also in IE11/Edge. @JJJ please do feel free if this happens again for you in the next plugin release.