Currently OOjs UI's ToggleSwitchWidget does not have a visual state representation of the focused state. This complicates keyboard navigation of the controls.
|oojs/ui : master||ToggleSwitchWidget: Update according to spec|
@violetto I think there is no set Design for this widget at all right now correct ? I would like to point out another concern I have with the states. The current enabled state is 'dark', where disabled uses a 'light' background. To me this feels inverted. This might just be because I'm so used to iOS using a bright green as a background to communicate the enabled state.
I would love to know what you think about that.
Indeed, the sky-blue gradient makes clear what the state is. But @violetto wrote: "Use colors only if it helps user understand a workflow".
BTW, AFAICT the only Wikimedia repository using it is mediawiki/extensions/TemplateData, so it might make sense to fire it in favor of a checkbox- or togglebutton-style control and design a new toggleswitch one from scratch.
I'm looking into this and I see the point about the "on" state looking disabled. We have the same problem with ButtonSelectWidget when there are only 2 buttons in the widget. You can see this happen herethat was brought up a few times to me as well. Let me think about this.
@violetto looks good but is the height consistent next to other controls? also don't forget we need the alternate state of you've disabled a feature that should be on, we can probably use the same style as above but use Warn color instead of Constructive. The inner toggle may need to be smaller in include the inner border like the bug is requesting (the focus state)
This fuzziness happens on a few browsers when an element has a border-radius, border, and an inset box-shadow. I haven't been able to find a workaround for this. We could consider changing the design of this state.
The new revision of the button states shows that we aren't using inset borders any more but a change in color.