Page MenuHomePhabricator

ToggleSwitch: Consider adding 'on'/'1' and 'off'/'0' like in iOS accessibility
Open, LowPublic

Description

Current designs for ToggleSwitch include a label on the "off" side of the switch.

However, sometimes it would be helpful to have separate labels for the "off" side and the "on" side, plus a label for the switch itself. Consider the controls for configurable demos on the Codex docs site:

ToggleSwitch in Button demo, with disabled prop turned off

Screen Shot 2022-02-22 at 12.00.26 PM.png (790×1 px, 66 KB)

ToggleSwitch in Button demo, with disabled prop turned on

Screen Shot 2022-02-22 at 12.00.31 PM.png (812×1 px, 67 KB)


We should consider how we might add on/off labels to this use case in a way that is semantic and accessible, and how we might enable this within the ToggleSwitch component itself for other use cases.

Event Timeline

Color must never be the only indicator of the status, hence some additional part needs to be added. However, instead of 0/1 which would need localization for languages not using arabic numbers, I would rather encourage this (quick Paintbrush hack of image from T134795#2356626):

MediaWikiUI_2016-06-05_ToggleSwitchWidget_UX_improvement - accessibility modification.png (372×545 px, 25 KB)

I see what you mean by adding the icon, and it would surely help. But color isn't the only indicator here, contrast and position of the handle are there too (same as iOS, I guess). Does iOS now have those indicators by default, or only when an accessibility setting is enabled?

0/1 which would need localization for languages not using arabic numbers

This is already built into MediaWiki. Icons would make this a much heavier treatment and I don't think would be ideal.

Does iOS now have those indicators by default, or only when an accessibility setting is enabled?

Only as an accessibility feature, though I have them on permanently for sanity reasons. :-)

Youtube does something kind of like this with an icon now. Note the toggle in bottom-right corner.

pasted_file (943×1 px, 1 MB)
pasted_file (943×1 px, 1 MB)

Starting from the original title of this task,1 and 0 are also not necessarily universally understood, as it's of very tech-centric origin.

If at all, a checkmark seems more like an option with all the given negative implications:

  • crowed interface,
  • still not fully clear what is the “on“ and what the “off“ position of the toggle grip

T140812 ToggleSwitch OOjs UI Demos 2017-01-27.png (146×300 px, 10 KB)

Code used:

&.oo-ui-toggleWidget-on {
    …
    background-image: url( themes/wikimediaui/images/icons/check-invert.svg );
    background-position: 2px 2px;
    background-size: 45%;
    background-repeat: no-repeat;
}
TheDJ subscribed.

Same applies to codex

Volker_E renamed this task from ToggleSwitchWidget: Consider adding '1' and '0' like in iOS accessibility to ToggleSwitch: Consider adding 'on'/'1' and 'off'/'0' like in iOS accessibility.Nov 2 2023, 8:37 PM
Volker_E updated the task description. (Show Details)