2046646 - Handle HCM/HCT/high contrast correctly for Nova

Status: VERIFIED FIXED

(Firefox :: Address Bar, task, P1)

Description

[Drew Willcoxon :adw]

For high-contrast themes (HCM), the Components Figma shows that buttons/components in the input and chiclets in the view should have an outline/border and no background color. I don't believe we'll get that for free without making changes to our urlbar CSS since we don't normally set an outline on things.

If it would help to break things down further, feel free to file separate bugs for the input and the view and/or morph this one.

Comment 1

[Drew Willcoxon :adw]

Attachment: Night sky on Windows 11, view open

We're in pretty good shape already. Here's the "Night sky" HCT on Windows 11. It's very close to the Components Figma.

Comment 2

[Drew Willcoxon :adw]

Attachment: Night sky on Windows 11, view closed

Comment 3

[Daisuke Akatsuka (:daisuke)]

Attachment: 2026-06-16 13.18.15.png

The screenshot is that applied the patch of Bug 2046942 that updates color tokens.
I think there is no problem basically though, I want to confirm following points.

1. The boundary between the result view and the behind is hard to see. Is it okay?
2. The hover color on the result menu (blue arrow) is different from other buttons such as go button (green arrow) , is it okay?

Comment 4

[Drew Willcoxon :adw]

Thanks Daisuke! Let's NI Paul.

1. The boundary between the result view and the behind is hard to see. Is it okay?

That's what both Paul's Figma and the Components Figma show, so afaict that's correct. I agree it seems strange, but maybe it's actually better for users with HCM needs? I don't know. The designs have gone through a11y review I believe.

2. The hover color on the result menu (blue arrow) is different from other buttons such as go button (green arrow) , is it okay?

IMO yes, and we should defer to Jules's changes in that patch.

In the Components Figma, you can explore what each component is supposed to look like in various states and themes [1], but I've noticed that some components don't seem to participate in that, and the result menu button is one of them. It looks the same in every single state in HCM, so I don't think we can take that as truth.

[1] Turn on dev mode, click the component until it's selected, and then click the "Explore component behavior" button in Figma's right-hand sidebar

Comment 5

[Paul (FxUX)]

Jessica created the HCM Figma, and Anna is the accessibility expert, so I'll seek their input on this (can't NI them as I can't find them on Bugzilla).

In addition to the questions above, should the entire panels not have a coloured outline? I think it looks odd without, and I'm sure I would have commented as such in Figma at that review stage, which makes me think a component update somewhere in Figma has accidentally removed a border, and it's been built to that spec.

Comment 6

[Morgan Reschenberg [:morgan]]

Hi folks, while Anna is on leave please direct HCM questions to me :)

(In reply to Drew Willcoxon :adw from comment #4)

Thanks Daisuke! Let's NI Paul.

1. The boundary between the result view and the behind is hard to see. Is it okay?

That's what both Paul's Figma and the Components Figma show, so afaict that's correct. I agree it seems strange, but maybe it's actually better for users with HCM needs? I don't know.

This should have a 1px solid border that uses an appropriate token and evaluates to CanvasText. It looks like Anna mentioned this in this thread but either the change was never posted to figma or she posted it in a different location. Either way: this does need a border.

The designs have gone through a11y review I believe.

The S&S designs have gone through review, but the individual nova components have not, which means smaller imported components like buttons and headings may still be incorrect. We have this review in our queue and are hoping to cover buttons, radio buttons, and checkboxes soon. In the interim, please use the non-nova HCM components (Desktop Components lib) as a reference.

2. The hover color on the result menu (blue arrow) is different from other buttons such as go button (green arrow) , is it okay?

IMO yes, and we should defer to Jules's changes in that patch.

In the Components Figma, you can explore what each component is supposed to look like in various states and themes [1], but I've noticed that some components don't seem to participate in that, and the result menu button is one of them. It looks the same in every single state in HCM, so I don't think we can take that as truth.

[1] Turn on dev mode, click the component until it's selected, and then click the "Explore component behavior" button in Figma's right-hand sidebar

I think this button is one of the many that have not been reviewed by us yet :( it should follow the existing styles for HCM buttons in Desktop Components.

Comment 7

[Paul (FxUX)]

Thanks Morgan!

One more question:

In addition to the questions above, should the entire panels not have a coloured outline? I think it looks odd without, and I'm sure I would have commented as such in Figma at that review stage, which makes me think a component update somewhere in Figma has accidentally removed a border, and it's been built to that spec.

Comment 8

[Morgan Reschenberg [:morgan]]

(In reply to Paul (FxUX) from comment #7)

Thanks Morgan!

One more question:

In addition to the questions above, should the entire panels not have a coloured outline? I think it looks odd without, and I'm sure I would have commented as such in Figma at that review stage, which makes me think a component update somewhere in Figma has accidentally removed a border, and it's been built to that spec.

No problem :)

Yes, the entire panel (all panels, really) should have a 1 px solid border that evaluates to CanvasText. You can read more about this and other kinds of rules we aim to enforce for HCM in our design guide.

Lemme know if there's anything else I can look over 👍

Comment 9

[Drew Willcoxon :adw]

I was testing HCM with the final patch in bug 2046942 and noticed the search mode switcher's arrow disappears on hover, and it doesn't look like it's using the right HCM colors for its bg colors.

So it sounds like there are at least three things to look into:

1. Search mode switcher button
2. Result menu button ("..." button inside some of the rows in the urlbar panel)
3. Urlbar panel border

I have a small patch for 3 so I'll spin that off into its own bug.

Comment 10

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 2046646 - Apply high contrast syle to result menu and switcher for Nova

Comment 11

[Daisuke Akatsuka (:daisuke)]

I will fix them. Thanks!

Comment 12

[BugBot [:suhaib / :marco]]

The following patch is waiting for review from an inactive reviewer:

ID	Title	Author	Reviewer Status
D312188	Bug 2046646 - Apply high contrast syle to result menu and switcher for Nova	daisuke	jules: Back Aug 12, 2026

:daisuke, could you please find another reviewer?

For more information, please visit BugBot documentation.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/d74097bad526
https://hg.mozilla.org/integration/autoland/rev/314320cad65b
Apply high contrast syle to result menu and switcher for Nova r=desktop-theme-reviewers,dao

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e9a2d070d89d
https://hg.mozilla.org/integration/autoland/rev/1433b99a74d7
Revert "Bug 2046646 - Apply high contrast syle to result menu and switcher for Nova r=desktop-theme-reviewers,dao" for causing bc failures @ browser_parsable_css.js

Comment 15

[Norisz Fay [:noriszfay]]

Backed out for causing bc failures @ browser_parsable_css.js

Backout link

Push with failures

Failure log

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/3c9c608b87ca
https://hg.mozilla.org/integration/autoland/rev/61d3e1211bcb
Apply high contrast syle to result menu and switcher for Nova r=desktop-theme-reviewers,dao

Comment 17

[agoloman]

https://hg.mozilla.org/mozilla-central/rev/61d3e1211bcb

Comment 18

[Cristian Baica [:cbaica], Release Desktop QA]

The issue is verified fixed using the latest Fx156.0a1 on Windows 11. The searchmode switcher button and the result menu buttons are now correctly visible when hovered over in high contrast mode (in particular the night sky HCM).