2050761 - [Nova] VPN location list items permanently display hover effect styling without active hover in certain HCM themes (e.g., Dusk)

Status: VERIFIED FIXED

(Firefox :: IP Protection, defect)

Description

[Valentina Virlics [:vvalentina], VPN QA]

Attachment: Screenshot 2026-06-26 110910.png

[Prerequisites]

• Firefox Browser Nightly version 154.0a1 (Build date: 25/06/2026)
• macOS/Windows/Linux version
• browser.nova.enabled is TRUE
• System/Browser High Contrast Mode (HCM) is enabled i.e. "Dusk"

[Steps]

1. Open the main VPN panel and navigate to the location list subview.
2. Observe the initial visual state of the location items without moving the mouse cursor over the list.

[Expected Results]
The location items should render in their standard idle/default state. The hover effect styling should only activate on an individual item when the mouse cursor is actively positioned over it.

[Actual Results]
All location items in the subview list statically display the hover effect background/styling by default, even without any active mouse hover interaction.

Comment 1

[kpatenio]

Hm, the background color token used for the location items is --button-background-color-menu. There might be a mismatch with HCM and Nova enabled.

Comment 2

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

marking this bug as access-s3, because reusing of hover/active states on HCM would create a confusion about which item is, in fact, will be activated if user clicks their mouse now.

This Figma - HCM Menu reference (SSO required) provides examples of expected appearances on 2 default Win11 HCM themes and, most importantly, expected system colors used for these states. The "selected" example in the menu would be the one that would apply to the current location (with the check mark next to it)

Comment 3

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

The severity field for this bug is set to S4. However, the accessibility severity is higher, .
:fchasen, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 4

[Hackbot]

Root cause confirmed. The location items (<button class="location-item">) set their idle background-color to var(--button-background-color-menu). In the design system that token resolves through button.background.color.ghost.@base, whose forcedColors value is ButtonFace (the Nova menu override maps it to button.background.color.@base, also ButtonFace). So the idle background — transparent in normal themes — becomes an opaque system color under HCM, so every item looks filled and can't be told apart from the hovered/current one. This matches kpatenio's hunch in comment 1.

Fix (submitted for review): override the idle .location-item background to transparent inside @media (forced-colors). The :hover and [aria-checked="true"] rules have higher specificity, so the hovered item and the current location keep their distinct system-color highlights (AccentColor / SelectedItem), consistent with the HCM menu reference. Added a regression test that forces colors on and checks an idle item is transparent while the selected item stays distinct.

Note on verification: this is a visual HCM styling issue that the automated crash-reproduction tooling can't exercise, so it was diagnosed from the token cascade in the source and covered by the added browser mochitest for CI. Manual confirmation on a Win11 HCM theme (e.g. Dusk) is still recommended.

This is an automated analysis result. If this result is incorrect please add a needinfo and feel free to correct the error.

Comment 5

[Hackbot]

Attachment: Bug 2050761 - Keep VPN location list items transparent when idle under forced colors

Under forced colors (High Contrast Mode, e.g. the Win11 "Dusk" theme), every
location item in the IP Protection location subview rendered with an opaque
background, so idle items looked permanently hovered/selected.

Root cause: .location-item sets its idle background-color to
var(--button-background-color-menu). In the design system,
button.background.color.menu.@base resolves through ghost.@base, whose
forcedColors value is ButtonFace (the Nova override maps it to
button.background.color.@base, also ButtonFace). So while the idle
background is transparent in normal themes, it becomes an opaque system color
under forced colors — making every item look filled and defeating the visual
distinction between idle, hovered, and the current (aria-checked) location.

Fix: override the idle background of .location-item to transparent inside
@media (forced-colors). The higher-specificity :hover and
[aria-checked="true"] rules are unaffected, so the hovered item and the
current location remain distinct via their existing system-color tokens
(AccentColor / SelectedItem), matching the HCM menu design reference.

Also adds a regression test to browser_ipprotection_locations_list.js that
forces colors on and asserts an idle item is transparent while the selected
item keeps a distinct opaque background.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/0715e2db9c26
https://hg.mozilla.org/integration/autoland/rev/2f6c4d8f9beb
Keep VPN location list items transparent when idle under forced colors r=desktop-theme-reviewers,ip-protection-reviewers,dao,rking

Comment 7

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/2f6c4d8f9beb

Comment 8

[Valentina Virlics [:vvalentina], VPN QA]

Verified this as fixed using Firefox Beta 154.0b1 and Firefox Nightly 155.0a1 on macOS 26/Windows 11/Linux 24.04.
The VPN location list items don't display hover effect styling without active hover while on Fireofx Nove, dark mode, HCM enabled.