1812126 - Implement newer high contrast toggle designs

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, enhancement)

Description

[Hanna Jones [:hjones]]

When we implemented the toggle we didn't have specific designs for how it should look in high contrast mode or with specific high contrast themes. Designs that cover this have recently surfaced as part of some picture in picture work: https://www.figma.com/file/Pk2jgzwiVvaq3Gf5ERKuAL/Picture-in-Picture?node-id=2708%3A36529&t=JqjvFeJGX2VwdpuR-0

The moz-toggle styles should be updated to match these designs once they are finalized. We should also ensure the toggle stays visible with the Accessibility > Display > Increase Contrast setting enabled on MacOS.

Comment 1

[Anna Yeddi [:ayeddi]]

Attachment: 2023-02-09_Nightly_Win_HCM.png

The toggles look good on the dark / Night Sky HCM theme on Windows 11 (see attached) as well as on the light / Desert HCM theme on Win.

The only concern is that on the off state the border of the toggle is probably using GrayText color which may be coming from the addon being marked as disabled when the toggle is off, but it also communicates to an HCM user that the toggle itself is disabled, meaning that they cannot activate it (while in fact they can).

This also affects the macOS HCM mode (see the next attachment)

Comment 2

[Anna Yeddi [:ayeddi]]

Attachment: 2023-02-09_Nightly_MacOS_Increase_Contrast-disabled_toggle.png

Comment 3

[Hanna Jones [:hjones]]

Looks like this got fixed by the changes made to toggle styles in the work for Bug 1798404