Open Bug 1935220 Opened 3 months ago Updated 2 months ago

moz-toggle disabled styles should be changed to match other moz- inputs

Categories

(Toolkit :: UI Widgets, task)

task

Tracking

()

People

(Reporter: hjones, Unassigned)

References

(Depends on 1 open bug, Blocks 1 open bug)

Details

(Whiteboard: [recomp])

Attachments

(1 file)

Because moz-toggle is implemented using a button instead of an HTML input element it uses custom styles for its disabled state. This is different from moz-checkbox, moz-radio, and moz-select which all rely on platform styles for their disabled states. One noticeable departure is that when moz-toggle is pressed and disabled it still uses --color-accent-primary, just with a slight opacity applied. The rest of our input components use a gray color instead of the primary accent color. We should bring moz-toggle more in line with our other inputs.

I'm all for consistency, but I think making this change would make the toggle in a questionable state for some users as to whether the toggle is disabled and on, or disabled and off.
In the "on" state for checkboxes and radio buttons, there is an extra element in the container (checkmark and an inner circle, respectively), so it's easy to distinguish on vs. off even in the disabled state.
However for the toggle there is no extra element -- it's just whether the inner circle is on the right or the left. The only thing that can make it look "on" is the accent color.
In the context of about:preferences this doesn't matter much as there's plenty of toggles to go around and users can extrapolate the state of the toggle based on others around, but we can't rely on that for all UI surfaces.

The comment above isn't relevant to HCM users, I think, as the disabled state would then use GrayText (IIRC) which is colorful (in most cases at least).

I added this to our a11y sync up meeting for Wednesday this week. I definitely see the point of the toggle not being as clearly pressed as the checkbox and radio so let's discuss it more in that meeting

We chatted about this with the a11y folks and their feedback was:

  • Ideally all of these elements (toggle, checkbox, radio) should have consistent disabled states since we're kind of creating a visual language that tells users what to expect from our controls
  • It's more expected and common to have these types of controls turn gray when disabled, so we should standardize on that rather than having checkbox/radio maintain their blue/primary accent color when disabled
  • This was brought up when the toggle was originally built, and we ended up going with the accent color while disabled due to larger issues with our grays. Considering that, it might make sense to reassess this work once the new gray palette is adopted.

I'm going to mark this as blocked so we can revisit this after the new grays are available.

Depends on: 1821203
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: