Jetpack: Jetpack Settings Page: Toggles can be selected from whitespace in toggle span element

Created on 28 Aug 2019  Â·  5Comments  Â·  Source: Automattic/jetpack

Steps to reproduce the issue

  1. Go to the Jetpack Settings page in wp-admin
  2. Click on the whitespace next to any of the toggle descriptions
  3. This will activate the toggle

What I expected


Clicking on the whitespace should NOT lead to a toggle activation. This can be tricky for users and lead to accidentally turning on/off a feature.

What happened instead

The toggle is activated despite not having actually selecting it.

Screenshots
Screen Recording Link: https://d.pr/i/QUXA51

Accessibility Admin Page [Type] Bug

Most helpful comment

I'd clarify that the related topic is about the _label_ being clickable, not the whitespace _after_ the label, which I agree it's confusing.

I also did a quick check and in Calypso the issue is there too, even if not always: "Infinite Scroll" and "Feed Settings" have clickable whitespace, but "Content Types" don't.

Screenshot 2019-08-28 at 10 32 33

So, to be clear:

  • The label should be clickable
  • The whitespace _after_ the label should not

All 5 comments

I actually like that, it makes it easier to turn things on and off, but I can see how it could be confusing for some.

I'd like to loop in Design on this to get their opinion and their help if we need to make any changes there.

I'd clarify that the related topic is about the _label_ being clickable, not the whitespace _after_ the label, which I agree it's confusing.

I also did a quick check and in Calypso the issue is there too, even if not always: "Infinite Scroll" and "Feed Settings" have clickable whitespace, but "Content Types" don't.

Screenshot 2019-08-28 at 10 32 33

So, to be clear:

  • The label should be clickable
  • The whitespace _after_ the label should not

This issue has been marked as stale. This happened because:

  • It has been inactive in the past 6 months.
  • It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

This is due to our form inputs being wrapped by the label and that label is set to display:block. There is another issue open to look at this here: https://github.com/Automattic/jetpack/issues/13755

It can be fixed for the most part with display: table ... but that does seem to impact layout on other input groups.

My preference is to close this issue and focus on updating the markup in #13755

Was this page helpful?
0 / 5 - 0 ratings