2050348 - [Nova] [a11y] VPN main panel exclusion toggle is not visible while disabled using default browser themes

Status: VERIFIED FIXED

(Firefox :: IP Protection, defect)

Description

[Valentina Virlics [:vvalentina], VPN QA]

Attachment: Screenshot 2026-06-25 094025.png

[Prerequisites]

• VPN enabled on a Firefox 154.0a1 Nightly build
• macOS / Windows / Linux version
• Browser theme set to Dark/Alpenglow

[Steps]

1. Launch Firefox 154.0a1 Nightly on a desktop device (macOS, Windows, or Linux).
2. Open the Firefox VPN main panel.
3. Ensure the app exclusion feature is disabled.
4. Hover the mouse cursor over the exclusion toggle.

[Expected Results]
The exclusion toggle should be visible in a low-contrast state. Hovering over the disabled toggle should either display a standard tool-tip or trigger a subtle, clean hover state.

[Actual Results]
The toggle is hard to see while disabled. Upon hovering, the visual degradation worsens.

[Note]
The hover state triggers an incorrect CSS background-color override, which actively erases or clips adjacent container borders.

Comment 1

[kpatenio]

Attachment: Screenshot 2026-06-26 at 9.08.58 AM.png

I attached a screenshot of poor contrast in the hover state.

This fix requires a broader design systems fix, so I placed this ticket against Bug 2024706 per request from Jules.

Comment 2

[Jon Oliver]

There are updated token values in Figma for moz-toggle that need to be imported, this is being covered in patch https://phabricator.services.mozilla.com/D312193. This bug may also require updating moz-toggle.css to ensure that tokens are always applied correctly (e.g. --toggle-dot-background-color-hover is currently only applied under prefers-contrast).

Comment 3

[Jules Simplicio [:jules]]

Thanks Jon - met with :mstriemer about this just now and if possible we should make sure not only toggle but checkbox and radio also gets these CSS updates in this bug and make it a more all-encompassing fix for them too.

Comment 4

[Jon Oliver]

Attachment: Bug 2050348 - fix nova moz-toggle hover/active styles r=#desktop-theme-reviewers

Addresses color contrasts concerns for moz-toggle:

• improves contrast ratio for legacy moz-toggle styles in light mode
• fixes moz-toggle hover/active styles

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/d187a0c3062c
https://hg.mozilla.org/integration/autoland/rev/4433458c5ff2
fix nova moz-toggle hover/active styles r=desktop-theme-reviewers,hjones

Comment 6

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/4433458c5ff2

Comment 7

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:jooliver, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox154 to wontfix.

For more information, please visit BugBot documentation.

Comment 8

[Valentina Virlics [:vvalentina], VPN QA]

Verified this as fixed using Firefox Nightly 155.0a1 (29-07-2026) on macOS and Windows 11.
The website exclusion toggle is visible while disabled and with a hover effect on it.