Page MenuHomePhabricator

ToggleSwitchWidget has no visual representation for focused state
Closed, ResolvedPublic

Description

Currently OOjs UI's ToggleSwitchWidget does not have a visual state representation of the focused state. This complicates keyboard navigation of the controls.

Details

Related Gerrit Patches:

Event Timeline

TheDJ created this task.Feb 9 2015, 10:49 AM
TheDJ raised the priority of this task from to Needs Triage.
TheDJ updated the task description. (Show Details)
TheDJ added a subscriber: TheDJ.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 9 2015, 10:49 AM

@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.

Prtksxna set Security to None.

ToggleSwitch was created by @TrevorParscal for Apex theme and very quickly adapted for MediaWiki theme when it was being added. It looks a lot more sensible in Apex.

Ricordisamoa added a comment.EditedFeb 11 2015, 4:15 PM

ToggleSwitch was created by @TrevorParscal for Apex theme and very quickly adapted for MediaWiki theme when it was being added. It looks a lot more sensible in Apex.

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 here

that was brought up a few times to me as well. Let me think about this.

@violetto What would you think of using colors to strengthen the "on" state?

Using color like @Ricordisamoa suggested, which has been really effective. What do you guys think?

@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)

Jaredzimmerman-WMF triaged this task as High priority.Mar 12 2015, 3:07 AM

Change 213213 had a related patch set uploaded (by Prtksxna):
ToggleSwitchWidget: Add focus state and update color for -on

https://gerrit.wikimedia.org/r/213213

TheDJ added a comment.May 25 2015, 9:57 AM

@Prtksxna It looks a bit fuzzy in the demo page for me for some reason

Jdforrester-WMF lowered the priority of this task from High to Medium.
Jdforrester-WMF moved this task from Backlog to Doing on the OOUI board.

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.

  • @violetto, @Nirzar: Should we do the same for the toggle widget?

    Yup definitely do the same to toggle switch like what we've changed for revised button design @Prtksxna.

    I'll be uploading a pholio pretty soon to show the other states.

    @violetto, cool! I'll wait for the pholio before uploading a new patch.

    @Prtksxna It looks a bit fuzzy in the demo page for me for some reason

    Fuzziness fixed and patch updated according to M61.

    Jdforrester-WMF closed this task as Resolved.Jul 29 2015, 6:09 PM
    Jdforrester-WMF edited projects, added OOjs-UI-next-release; removed Patch-For-Review.

    Change 213213 merged by jenkins-bot:
    ToggleSwitchWidget: Update according to spec

    https://gerrit.wikimedia.org/r/213213

    Jdforrester-WMF moved this task from Doing to Reviewing on the OOUI board.Aug 7 2015, 6:25 PM