Adapt FilterNavigatorBar to High Contrast Mode.

[nchevobbe]

This ensures the different items are properly rendered in HCM:

• the items gets a button color, and have a distinct hovered style
• the selected item looks selected
• the separator are visible (a dark version of the existing image was added)
• the disabled items have full opacity and use a gray text

---

	dark	light
single profile navigator button
single profile navigator button hovered
with a few items (second one hovered, last one is the "preview")

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.08%. Comparing base (9175e24) to head (033a323).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5257   +/-   ##
=======================================
  Coverage   86.08%   86.08%           
=======================================
  Files         311      311           
  Lines       29678    29678           
  Branches     8190     8190           
=======================================
  Hits        25548    25548           
  Misses       3548     3548           
  Partials      582      582           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[julienw]

Thanks!
I only have these small comments, tell me what you think and rerequest review when you're ready :-)

[julienw]

This one doesn't work very well for me on Linux when using the Light theme: it's white, so it doesn't well stand out with the white background around. Surprisingly with the dark theme this works fine, because SelectedItem and SelectedItemText stay the same (!) and therefore stand ou just fine!

It would be good to fix that but if that not easy (and you consider it's more a bug in Linux) I'm also fine with keeping it.

[julienw]

Maybe using ButtonFace/ButtonText would make sense?

[nchevobbe]

Could you post a screenshot of this please (with and without :hover)? So basically the issue is that SelectedItemText has the same/similar value as Canvas ? Could you check the computed values of those?
I'm using what's recommended by the accessibility team, but here the design isn't exactly the same (e.g. we don't have block borders). We could switch to using ButtonText bg and ButtonFace color, but that would make it different from other items we already have the SelectedItemText?SelectedItem pair for hover style :/

[julienw]

Thinking about it more, I think I'd prefer to use the same selected values: that is SelectedItem for background and SelectedItemText for text, on hover. They'd stand out more. Currently I don't think they're very "high contrast" when hovering, not even in your screenshots.
(I'm fine to swap them for the "active" state though).

What do you think?

Screenshots with the current version:
light mode:

dark mode:

It may also be that there's a deeper issue in Firefox, where SelectedItem/SelectedItemText don't change with the dark mode (at least for me on Linux).

[nchevobbe]

Thinking about it more, I think I'd prefer to use the same selected values: that is SelectedItem for background and SelectedItemText for text, on hover. They'd stand out more. Currently I don't think they're very "high contrast" when hovering, not even in your screenshots. (I'm fine to swap them for the "active" state though).

What do you think?

That would make it hard to differentiate between hovered and selected, which isn't ideal.
At least in the screenshot you're providing the color of the text is updated, so that's something.
If we want to go bold, we could have a ButtonText background with a ButtonFace color, but it looked a tad brutal when I tried (but I think that was something Nathan suggested to me in some HCM review in DevTools, so that could work).
Would you mind trying this combination and telling me how it looks for you?

(The borders look a bit weird on your screenshots, not sure what this is about)

[julienw]

Thinking about it more, I think I'd prefer to use the same selected values: that is SelectedItem for background and SelectedItemText for text, on hover. They'd stand out more. Currently I don't think they're very "high contrast" when hovering, not even in your screenshots. (I'm fine to swap them for the "active" state though).
What do you think?

That would make it hard to differentiate between hovered and selected, which isn't ideal.

But to me that makes it obvious what a click operation will do: this will make the current hovered one selected.

At least in the screenshot you're providing the color of the text is updated, so that's something. If we want to go bold, we could have a ButtonText background with a ButtonFace color, but it looked a tad brutal when I tried (but I think that was something Nathan suggested to me in some HCM review in DevTools, so that could work). Would you mind trying this combination and telling me how it looks for you?

I can have a look yes.

(The borders look a bit weird on your screenshots, not sure what this is about)

This happens at some zoom level because of rounding differences (I think) between borders (sticking to integer number of pixels) and other things (not sticking to integer value of pixels). I never really bothered trying to fix this.