2066037 - Stocks widget drop down and menu not visible with HCM

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect, P2)

Description

[Gabi Cheta [:Gabi] Desktop QA]

Attachment: 2026-08-24_11h37_09.mp4

Affected versions

• Firefox 156.0a1

Affected platforms

• Windows 11 x64

Steps to reproduce

1. Reach the stocks widget in a new tab page (browser.newtabpage.activity-stream.widgets.system.stocks.enabled-true)
2. Enable High Contrast themes
3. Open the widget drop-down
4. Observe the buttons
5. Click the widget three dot menu

Expected result

• Menu dropdowns and menu should be visible with HCM

Actual result

• Widget drop-down and menu is not visible with High Contrast

Regression range

• New implementation

Additional notes

• See the attached screencast

Comment 1

[Hackbot]

Localized this to a Nova design-token pairing bug rather than to Stocks CSS — but the Stocks header is where it becomes obvious, since it is the only widget with a permanently visible ghost dropdown trigger.

Root cause. When a moz-button opens its panel-list, the integration sets aria-expanded="true" on the inner button (toolkit/content/widgets/moz-button/moz-button.mjs), which activates the ghost "selected" rule in toolkit/content/widgets/moz-button/moz-button.css. Under Nova + forced-colors, its two colours resolve to the same system colour:

• --button-background-color-ghost-selected → --button-background-color-selected (nova/_tokens.scss#60) → SelectedItem (#371)
• --button-text-color-ghost-selected is never defined by the Nova set, so it falls through to --button-text-color-ghost-active (tokens-shared.css#156) → --button-text-color-active (nova/_tokens.scss#395) → SelectedItem (tokens-shared.css#718)

Gecko honours author-specified system colours verbatim in forced colors (Self::System(..) => true in honored_in_forced_colors_mode), so nothing corrects it: SelectedItem text on a SelectedItem background. Both header controls in Stocks.jsx are ghost buttons — .stocks-list-button (type="ghost") and .stocks-context-menu-button (type="icon ghost") — so both blank out while their menu is open. The rule is :not(:hover), which is why it still looks right until the pointer moves into the menu. Outside HCM --button-text-color-ghost-active resolves to --button-text-color-ghost, so this is HCM-only.

The asymmetry is in the token source: button.nova.tokens.json overrides background.color.ghost.selected to {button.background.color.selected} but adds no matching text.color.ghost.selected, leaving the text on the .active chain. Non-Nova is unaffected (there ghost-selected background is {button.background.color.ghost.active} → SelectedItemText).

Proposed fix. Add text.color.ghost.selected to the Nova set with forcedColors: "SelectedItemText", mirroring text.color.selected, in button.nova.tokens.json, then mach buildtokens. That regenerates both tokens-shared.css and nova/_tokens.scss — newtab needs the latter because its copy is unlayered and outranks toolkit's forced-colors cascade layers. This also fixes every other Nova ghost menu button in HCM, including the other widgets' kebab menus. If a narrower change is preferred, @media (forced-colors: active) { .stocks-list-button, .stocks-context-menu-button { --button-text-color-ghost-selected: SelectedItemText; } } in _Stocks.scss is equivalent for this bug only.

Tests. Nothing existing covers this: the Stocks jest tests don't evaluate CSS, and there is no browser-chrome coverage for newtab widgets. An a11y review of the resulting colour pair would be worthwhile.

I reasoned this from the code and could not decode the attached screencast, so if the recording shows the panel body itself missing rather than the trigger label and kebab icon, that would be a separate problem.

---

Suggested severity: S3
Two header controls disappear for High Contrast users whenever their menu is open, which is a real barrier for the users who most depend on contrast, but the menus still open and operate and the panel contents remain readable.

---

If you'd like to provide feedback on this comment, please use the 👍 or 👎 reaction.
If you want to categorize your feedback you can add one of the following tags: ai-triage-wrong-file, ai-triage-wrong-cause, ai-triage-hallucination, ai-triage-out-of-scope.

Comment 2

[BugBot [:suhaib / :marco]]

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

For more information, please visit BugBot documentation.

Comment 3

[Nina Pypchenko [:nina-py]]

Attachment: Bug 2066037 - Stocks widget drop down and menu not visible with HCM r=#home-newtab-wattle-reviewers-rotation!

Nova has no ghost-selected text token, so in High Contrast Mode the Stocks
dropdown and context menu buttons disappear while their menu is open and
turn blue on hover. Paint the inner button with the plain hover and active
backgrounds instead of the ghost ones, so both stay white with a black icon,
as widget/topic section context menus already do.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/6762e79efb61
https://hg.mozilla.org/integration/autoland/rev/eea728e4f6f7
Stocks widget drop down and menu not visible with HCM r=reemhamz

Comment 5

[Silaghi Andreea]

https://hg.mozilla.org/mozilla-central/rev/eea728e4f6f7

Comment 6

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:nina-py, 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-firefox156 to wontfix.

For more information, please visit BugBot documentation.

Comment 7

[Catalin Sasca, Desktop Test Engineering [:csasca]]

Verified that this is fixed on Firefox 157.0a1 (2026-09-08) on WIndows 11 with High Contrast themes.