Closed Bug 1753076 Opened 2 years ago Closed 2 years ago

Search tip button incorrectly styled in HCM

Categories

(Toolkit :: Themes, defect)

Desktop
All
defect

Tracking

()

RESOLVED WORKSFORME
Accessibility Severity s4

People

(Reporter: morgan, Assigned: ayeddi, NeedInfo)

References

Details

(Keywords: access)

Attachments

(7 files, 1 obsolete file)

STR:

  1. Enable HCM (windows or macOS will reproduce this)
  2. In about:config, set browser.urlbar.searchTips.test.ignoreShowLimits to true
  3. Navigate to about:newtab

Expected:
A tip is shown with a dismiss button whose styling matches the OS styling for high/increase contrast buttons

Actual:
A tip is shown with a dismiss button whose styling matches regular ff styling

We should use a primary button here.

Attached image windows 11 HCM example
Assignee: nobody → ayeddi
Status: NEW → ASSIGNED

The patch needs testing on Windows, it was tested on MacOS 15.1 with OS-powered HCM (System Preferences > Accessibility > Display > Increase contrast)

Attachment #9262482 - Attachment description: Bug 1753076 - Fixing style of the Search tip button in HCM. r=morgan → Bug 1753076 - Update HCM presentation, add HCM focus and hover styling to the Search tip button. r=morgan
Depends on: 1755023

The severity field is not set for this bug.
:dao, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(dao+bmo)
Attached image Win-HCM-Got it.png

After the global styling updates, the colors used by the primary button are the following:

  • Windows OS with HCM enabled: AccentColor and AccentColorText (as expected)
  • macOS with Increased Contrast enabled: primary color of Firefox.
    Focus outlines are appropriate to the color scheme of the HCM.

:morgan, shall we abandon the patch created before global updates and close the ticket?

Flags: needinfo?(mreschenberg)
Attached image Mac-HCM-Got it.png

(In reply to Anna Yeddi [:ayeddi] from comment #9)

Created attachment 9290515 [details]
Win-HCM-Got it.png

After the global styling updates, the colors used by the primary button are the following:

  • Windows OS with HCM enabled: AccentColor and AccentColorText (as expected)
  • macOS with Increased Contrast enabled: primary color of Firefox.
    Focus outlines are appropriate to the color scheme of the HCM.

:morgan, shall we abandon the patch created before global updates and close the ticket?

I think this behaviour fine for now, but we should revisit (in combination with our design systems team) what our expectations are for primary vs. secondary buttons. What we're doing now (using system colors) is more correct than what we were doing before (using FF colors) but I think we can do better.
It seems like, in some cases, we use ButtonFace and the foreground and ButtonText as the background for primary buttons, which is problematic given primary and secondary buttons often appear side-by-side, and inverting the styling is our current hover-behaviour guidance.
we should decide how to incorperate SelectedItem/SelectedItemText and file a bug to convert our buttons and other form controls in the base form-controls css file.
Let's discuss this in our design systems meeting next week :)

Flags: needinfo?(mreschenberg)

Resolved to use selected item colors for hover styling, button colors for non-hover styling. This is in order to keep primary and secondary buttons differentiable across states. :ayeddi, could you file a follow-up bug to this about converting our primary and secondary button hover styles to use selected item colors?
I think this bug can be marked works-for-me, since the other styling changes fixed the issue this was initially filed to address.

Flags: needinfo?(ayeddi)
Depends on: 1787930

(In reply to Morgan Reschenberg [:morgan] from comment #12)

Resolved to use selected item colors for hover styling, button colors for non-hover styling. This is in order to keep primary and secondary buttons differentiable across states. :ayeddi, could you file a follow-up bug to this about converting our primary and secondary button hover styles to use selected item colors?
I think this bug can be marked works-for-me, since the other styling changes fixed the issue this was initially filed to address.

Done (bug 1787930) and done. Thank you!

Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Flags: needinfo?(ayeddi)
Resolution: --- → WORKSFORME
Attachment #9262482 - Attachment is obsolete: true
Accessibility Severity: --- → s4
Whiteboard: [access-s4]
You need to log in before you can comment on or make changes to this bug.