1935255 - Callout container and its secondary buttons on the Firefox View Discoverability panel are missing proper HCM treatments

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Anna Yeddi [:ayeddi]]

Attachment: the secondary buttons with Win11 Night Sky theme showing the issues reported (the V button is hovered on the screenshot)

The FX_VIEW_DISCOVERABILITY_ALL_USERS panel includes the following issues with the High Contrast themes on Windows that may resolve in some themes not providing an expected, readable experience for the text of the container and missing an expecting indication that both Dismiss and V buttons are, in fact, active UI elements that could be clicked (access-S3-level issues)

Observed in Release for the "Didn't mean to close that tab?" alertdialog treatment after closing a few tabs in a row.

Recommendation is to follow the HCM secondary button pattern (Figma reference, requires SSO to access) and HCM media queries for forced-colors mode by:

1. Secondary buttons:
   1. Adding 1px border to each Dismiss and V secondary buttons - use ButtonText color (the background of buttons should be ButtonFace)
   2. Ensure hover styling is provided for both secondary buttons - use SelectedItem for the background and SelectedItemText for the border and label text (color pair)
   3. :active state would get the hover styling combo with ButtonText used for the border alone
2. The callout container is using button treatments for its static text elements:
   1. use Canvas for the background of the container
   2. use CanvasText for the foreground color of the container (its headings text)

Comment 1

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

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

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

For more information, please visit BugBot documentation.

Comment 2

[Punam Dahiya [:pdahiya]]

Looks like picked by bot as regression due to added test message. This message is seen via Nimbus Rollout but there is patch linked to bug 1919598 in flight that's going to land in default. NI @nsauermann to weigh in before landing by default Thanks

Comment 3

[Mimi Jung]

Thanks for flagging Anna & Punam - I'll look into this in my in-progress patch 1919598 to land the experience in m-c.

Comment 4

[Mimi Jung]

On 2nd thought, might make sense to tackle this one on it's own since it's specific to the submenu component rather than the message itself.

Comment 5

[Mimi Jung]

Attachment: Bug 1935255 - FC Updates split dismiss button HCM styling and buttons using tokens-shared variables

Comment 6

[Mimi Jung]

Hi Anna! I synced up with Shane about the following:

The callout container is using button treatments for its static text elements:

• use Canvas for the background of the container
• use CanvasText for the foreground color of the container (its headings text)

We're using arrowpanel colors:

:is(menupopup, panel):where([type="arrow"]) {
  --panel-background: var(--arrowpanel-background);
  --panel-color: var(--arrowpanel-color);
  --panel-border-color: var(--arrowpanel-border-color);
  --panel-border-radius: var(--arrowpanel-border-radius);
  --panel-padding: var(--arrowpanel-padding);
  --panel-shadow-margin: var(--arrowpanel-shadow-margin);
}

from global-shared.css as our feature callouts are themed. CanvasText is a system color and not theme color and I believe we're re-purposing the same colors other panels in the browser - any concerns with leaving the callout background and foreground as-is?

Comment 7

[Mimi Jung]

Will be landing the split dismiss button changes shortly. Would love to get the button changes uplifted into Fx139 if possible, so I'm adding qe-verify flag and will request uplift once the patch lands.

Will open another patch for the panel changes once I've synced up with the team.

Comment 8

[Mimi Jung]

Attachment: Bug 1935255 - FC Updates split dismiss button HCM styling and buttons using tokens-shared variables

Original Revision: https://phabricator.services.mozilla.com/D245474

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/431cd644c5fd
FC Updates split dismiss button HCM styling and buttons using tokens-shared variables r=omc-reviewers,accessibility-frontend-reviewers,emcminn,ayeddi

Comment 11

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/431cd644c5fd

Comment 12

[Rares Doghi, Desktop QA]

Verified as fixed in our latest Nightly 140.0a1 (2025-04-30)

Comment 13

[Ryan VanderMeulen [:RyanVM]]

Please fill out the uplift request form on the Beta Phabricator revision when this is ready for Beta uplift.

Comment 14

[Mimi Jung]

Oh sorry about that Ryan, I thought I did and I can see in the beta phabricator logs mimi updated the uplift request field.Tue, Apr 29, 1:57 PM, may have somehow overwrote the uplift request form. Let me take a look!

edit: Can't see a way to add the uplift form again on the original beta phabricator ticket - drop down option no longer exists, filing another one - sorry about that.

Comment 15

[Mimi Jung]

Attachment: Bug 1935255 - FC Updates split dismiss button HCM styling and buttons using tokens-shared variables

Brings Feature Callout hcm and button styling up to sync with tokens-shared, including the missing border states.

Original Revision: https://phabricator.services.mozilla.com/D245474

Comment 16

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined: Users with HCM enabled will experience unexpected styling for the split dismiss feature callout button. We have a few production messages using that button component.
• Code covered by automated testing: no
• Fix verified in Nightly: yes
• Needs manual QE test: no
• Steps to reproduce for manual QE testing: Test plan
• Risk associated with taking this patch: Low
• Explanation of risk level: Styling fix, which are repurposing existing styling from our tokens that were either outdated or missing.
• String changes made/needed: N/A
• Is Android affected?: no

Comment 17

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/e3cb97c3223d