1937715 - The padding between toggle button and label on the "Tracking Protection Panel" is too narrow

Status: NEW

(Firefox :: Protections UI, defect, P2)

Description

[Eiichi]

Attachment: ScreenShot of the "Tracking Protection Panel"

The position of the toggle button on the "Tracking Protection Panel" is opposite to the left and right since Bug 1917305 changes landed in central.

Comment 1

[Rob Wu [:robwu]]

There is some additional discussion in bug 1937627.
If the changes are permanent, then the screenshot on SUMO needs to be updated to capture the new appearance:

https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1917305

:hjones, since you are the author of the regressor, bug 1917305, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 3

[Hanna Jones [:hjones]]

As mentioned above the relevant context can be found here. I think our team can do a better job of communicating when these kinds of visual changes happening, but I do not think this is a regression since it improves the accessibility of the toggle overall without impacting functionality. I would be inclined to WONTFIX this since we have no plans to change the toggle back, but I will defer to protections UI folks.

Comment 4

[Emma Zühlcke [:emz]]

Anchoring it on the left seems fine, but the positioning relative to the label looks off. Maybe it needs more padding, or it needs to be aligned differently. Could you take a look at that? Maybe we could get some input from UX folks.

Comment 5

[Hanna Jones [:hjones]]

(In reply to Emma Zühlcke [:emz] from comment #4)

Anchoring it on the left seems fine, but the positioning relative to the label looks off. Maybe it needs more padding, or it needs to be aligned differently.

Just to clarify, which part of the positioning looks off? Is it the spacing between the toggle button and the label? Or something else?

We are using relative units for the spacing, so possibly it will appear a bit different depending on the platform since we're dealing with different default font sizes and some might look better than others. I'm gonna loop :jules from UX in here as they might be able to provide better feedback/answer questions.

Comment 6

[Jules Simplicio [:jules]]

Hey Emma, happy to tweak this. Perhaps more padding between input and label? Let me know what you think and where the spacing looks off to you. Thank you.

We should potentially change the title of this bug and not mark it as a defect since the positioning to the left is an intentional design change. Wdyt Emma and :hjones?

Comment 7

[Emma Zühlcke [:emz]]

(In reply to Jules Simplicio [:jules] from comment #6)

Hey Emma, happy to tweak this. Perhaps more padding between input and label? Let me know what you think and where the spacing looks off to you. Thank you.

Yes, I think its mainly the padding between the toggle and the label.

We should potentially change the title of this bug and not mark it as a defect since the positioning to the left is an intentional design change. Wdyt Emma and :hjones?

I think the spacing issue can still be treated as a defect.

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1917305

Comment 9

[Eiichi]

At the very least, I think Apple recommends placing the label to the left of the "toggle switch".
Please see "Toggles | Apple Developer Documentation" (https://developer.apple.com/design/human-interface-guidelines/toggles).

Comment 10

[Eiichi]

Although the document is intended for Android, Google's Material Design Guidelines can be found here:
"Switches - Material Design"(https://m2.material.io/components/switches)

I think labels are on the left and buttons are on the right.

Comment 11

[Ryan VanderMeulen [:RyanVM]]

Jules, is this still on your radar? We've got about a week and half to address this before Fx135 goes to RC if we want to avoid shipping this change as-is.

Comment 12

[Jules Simplicio [:jules]]

Hello all - sorry for my delay.

We don't want to necessarily always copy the pattern's from Google's Material language or Apple's Human Interface Guidelines. We purposefully moved ours next to the label so that it's more accessible. We have had instances where the gap between the label + toggle was rather large (e.g. in about:preferences -> P&S -> Suggest, and in New Tab's drawer). We don't plan to revert this change as it didn't break the usability of the toggle.

As far as the space between the toggle and the label feeling too narrow - I will bring this back to my team to see if we want to change it. At the moment, if the toggle is on the chrome, the spacing (which is in relative units) will purposefully refer to chrome's font sizing, which is smaller than in-content's.

The toggle is functioning and is usable and accessible, so I am curious if we can change the priority on this bug, it feels a bit subjective and I am not sure I agree is a defect.

Since this is a more global issue w/ the toggle we could potentially move this to Toolkit::UI Widgets since it's not just in protections.

Comment 13

[Emma Zühlcke [:emz]]

I had set the priority higher because we're introducing a cosmetic regression which I would have liked to avoid. However if you think this needs more time I'll gladly lower it.