Wp-calypso: Toggle: clicking label should activate the toggle

[rickybanister]

When form labels are properly configured, they allow you to click the label and toggle a checkbox or radio button. Our toggle's show a pointer cursor when you hover the label, but clicking it does nothing.

Instead clicking the toggle's label should toggle the toggle.

cc @oskosk @ryelle @tyxla @johnHackworth @beaulebens

[tyxla]

Makes sense to me; I'd expect toggle labels to work the same way they do for other form fields.

We should tread carefully with this one and test the toggles one by one. If we do it globally for all toggles, issues will arise in some cases, for example:

In this case, when clicking in any of the input/select fields will also toggle the field, which is not the expected behavior.

[oskosk]

@rickybanister Although I agree with your observation, I don't find consistency among cases of toggles working like that.

Regarding Calypso, I think the only toggles that toggle on label click are the ones on the Plugins page (and the labels here are quite concise about their text, they're not a description).

The toggles that were already present all along the settings tab don't appear to be doing the same.

In fact, labels not toggling on tap/click seems to be the regular behavior of all of my touch-enabled devices.

I have also two old android tabs one with old Android version and one with newer. The old Android didn't present toggles, but checkboxes among the settings screen. On this one, when clicking the label, I get the checkbox updated.

But on new Android settings, the settings checkboxes were upgraded to toggles and in this case, clicking the label does not do the trick.

The same goes for iOS.

[rickybanister]

Regarding @tyxla's example we could make the label end with Break comments into pages and then continue after that with a span to contain the rest of it.

As per the arguments about native mobile development—I understand what you mean, but I think there is a presumption on mobile that you are using your finger to tap a physical looking 'switch'. There is less assumption that you would tap the label since it's separated from the 'physical' button/checkbox/radio/switch.

On desktop we have a standard for checkboxes and radio buttons (that I think extends to toggles) where the label acts on the form element. Also think about accessibility—you use a screen reader, you don't care about focusing the form element, you focus the label to have it read to you. If it is the right setting, you then hit space and toggle it.

Here's an example from Angular's material implementation:

https://material.angularjs.org/latest/demo/switch

[mattmiklic]

To clarify, I just checked our native Android and iOS apps, and in both of them, tapping a text label does activate the associated toggle switch.

This behavior is native in Android, at least in version 7 (try tapping a label associated with a toggle switch in the Settings app). It isn't native on iOS, but I think the functionality is helpful and desirable.

Because tapping on any other sort of label activates the associated form element, I'd expect that to be true for toggle switches as well.

Regarding the example of the toggle switch that has other form fields within its label, I'd probably try to redesign that so that each option is presented discretely.

[davewhitley]

Thanks for filing this issue, I noticed it, but forgot to say something.

I definitely expected the toggle to switch when I clicked on the label. That could be because I knew that it functioned that way before, when they were checkboxes.

Regarding mobile, I don't know if there is a standard. On our iOS app, tapping the label toggles the switch. I think it's up to the developer/designer. I think most apps choose not to toggle the switch because the standard toggles are pretty large and it's not a problem.

I think being able to click on the label would be a win for usability, especially since the toggles are small.

That being said, something about clicking on a long sentence to toggle a switch seems strange. I wish these settings were more like iOS and more concise.

[folletto]

clicking the toggle's label should toggle the toggle.

I agree.

More in detail on the discussion:

1. Labels and checkboxes go hand in hand. Having the full label clickable is meant to have a larger tappable area, which is most of the times ideal and more accessible.
2. I understand there are some instances where it's not advisable to have the label tappable too, but that's imho an exception, on a case-by-case basis.
3. Interactions that have the "boxes" inside, I would expect having the whole label clickable, plus they should automatically turn on the option when the text field is selected, so you get twice the goods.

In short: HTML standards provide the label control for a reason. :D

[rickybanister]

1. Interactions that have the "boxes" inside, I would expect having the whole label clickable, plus they should automatically turn on the option when the text field is selected, so you get twice the goods.

That makes a lot of sense to me. If you try to configure the sub-settings, I'd assume you would want the parent toggle to be on.

[tyxla]

Thanks for the useful details, y'all!

I've approached this in #11158 - feel free to dive in, give it a try and leave your opinions. 😉