1927207 - The import browser data button menu doesn't conform to HCM standards

Status: NEW

(Firefox :: Messaging System, defect, P1)

Description

[Natalie Stroud [:nstroud]]

Attachment: Import Browser Data with default menu

Prerequisites:

Found in Nightly 133.0a1 (2024-10-25)(64-bit)
Turn on Night Sky High Contrast mode on your device (steps to do so here)

STR:

1. Open about:welcome from the URL bar
2. Click the 'Save and Continue' button to go to the next screen
3. Compare menu button styles in Nightly to the styles established in the High Contrast Mode Figma

Expected/Actual:

The menu buttons should follow the styles established in the High Contrast Mode Figma.

Comment 1

[Natalie Stroud [:nstroud]]

Attachment: Import Browser Data with hover menu

Comment 2

[Natalie Stroud [:nstroud]]

Attachment: Import Browser Data with active menu

Comment 3

[Natalie Stroud [:nstroud]]

Attachment: Import Browser Data with focused menu

Comment 4

[Emily McMinn :emcminn]

Hi Natalie! I'm working on a patch for this and I was wondering if you could clarify something for me - the dropdown menu and its buttons already use theme variables (--in-content-button-text-color and --in-content-button-background) and on my system (Windows 10 High Contrast Black) look like they are following the expected system colors for buttons and text. (I don't have a Night Sky theme available, is it a Win 11 theme?)

Is there an existing menu that's already following the expected colors so I can compare what variables are being used in HCM? I'm hesitant to override theme colors since there are so many different possibilities in terms of the exact theme being used.

Comment 5

[Morgan Reschenberg [:morgan]]

(In reply to Emily McMinn :emcminn from comment #4)

Hi Natalie! I'm working on a patch for this and I was wondering if you could clarify something for me - the dropdown menu and its buttons already use theme variables (--in-content-button-text-color and --in-content-button-background) and on my system (Windows 10 High Contrast Black) look like they are following the expected system colors for buttons and text. (I don't have a Night Sky theme available, is it a Win 11 theme?)

Is there an existing menu that's already following the expected colors so I can compare what variables are being used in HCM? I'm hesitant to override theme colors since there are so many different possibilities in terms of the exact theme being used.

Hey hey, Natalie is a bit new to HCM so jumping in to offer some help :)

I added a HCM Black version to the figma file so you can compare on windows 10 (Night Sky is a win 11 theme, but you can also make a custom theme to match it in the windows HCM settings). This item is actually two components -- the dropdown, and the menu which is displayed. You can find the dropdown component here.

I know we've recommended this component in the past / have used it in mock ups, but off the top of my head I'm not sure where you'd be able to find it in firefox right now. I'll NI?anna here to see if she has any ideas.

I think the highest severity issue here is that we do not currently change the colour of the actively selected menu item for HCM. In Natalie's screenshot of the collapsed menu the "Microsoft Internet Explorer" option is selected, however in the screenshot of the expanded menu, the "Microsoft Internet Explorer" menu item has the same colouring as the other non-selected menu items.

Can we update that item to start with?

:nstroud in the meantime can you provide more specific information on which parts of the menu do and don't match the spec?

Comment 6

[Natalie Stroud [:nstroud]]

Comment on attachment 9433422 [details]
Import Browser Data with default menu

screenshot not needed upon further review

Comment 7

[Natalie Stroud [:nstroud]]

Comment on attachment 9433425 [details]
Import Browser Data with focused menu

screenshot not needed upon further review

Comment 8

[Natalie Stroud [:nstroud]]

Thank you :morgan!

:emcminn - I've adjusted the bug with the correct Figma for the Dropdown component (apologies about that). Only the hover state and active state contain the incorrect colors

Hover: when I hover over the dropdown, the fill changes to purple (SelectedItem or #D6B4FD) with dark gray text (SelectedItemText or #2b2b2b). This should be switched around so that the fill/background is SelectedItemText and the text is SelectedItem

Active: The styling for the active state shows the fill/background is SelectedItemText and the border and text are both SelectedItem. The only thing that should be changed here is that the border color should be ButtonText yellow

Also- I accidentally removed my needinfo tag and didn't mean to! Still learning Bugzilla haha. I hope this helps, feel free to reach out if you need anything!

Comment 9

[Anna Yeddi [:ayeddi] ⛔ Out of office until November 12 ⛔]

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

I know we've recommended this component in the past / have used it in mock ups, but off the top of my head I'm not sure where you'd be able to find it in firefox right now. I'll NI?anna here to see if she has any ideas.

If I recall it correctly, this specific component was a custom one for the onboarding flow because the HTML <select> element did not allow for icons to be added to the options in its listbox. Maybe something similar was investigated for the Settings UI as well? I do not recall any other examples of such custom combobox being used now.

:Jules, do you know if the combobox with icons like that is used elsewhere?

If there are no other instances, I think reusing the hover and active color variables from the same --in-content-button-... set could be appropriate

Comment 10

[Emily McMinn :emcminn]

Thanks everyone! This is workable :) I'm going to be throwing this and the other HCM/a11y bugs for the import screen under a metabug, since it seems like there's a handful.