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]]

(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.

Comment 11

[Emily McMinn :emcminn]

Attachment: Bug 1927207 - Adjust hover and active styles for migration-wizard dropdown

Comment 12

[Emily McMinn :emcminn]

Attachment: existing colours

Comment 13

[Emily McMinn :emcminn]

Attachment: new colours

Comment 14

[Emily McMinn :emcminn]

Hi Natalie! I've tried implementing the colour variables as per comment #8 and while HCM looks good to me, I'm a little concerned about the contrast in non-HCM now. (See attached screenshots.) I'm having trouble viewing the dropdown panel with the a11y devTools so I'm not sure what the actual value is.

As far as indicating the selected value in the dropdown, since this is a custom component (a button with an attached panel) and not actually a select component, it's not clear to me how the selected state is being maintained between the button and the panel. :active doesn't seem to be used here. I've needinfo'd Mike who I think worked on the implementation of the component, hopefully he can give us a clue :)

Comment 15

[Mike Conley (:mconley) (:⚙️)]

Hi! Yes, this panel is a <panel-list> reusable component - similar to the one used in the Firefox View meatball menu. The dropdown is a button that causes the <panel-list> to open.

We could update our usage of the <panel-list> to set an attribute to indicate which <panel-item> is currently selected, and then style it differently. We could do that here: https://searchfox.org/mozilla-central/rev/81ac0fe96e1bd6020408c2ae7eae6e5b5114d1db/browser/components/migration/content/migration-wizard.mjs#466

Comment 16

[Natalie Stroud [:nstroud]]

Hi Emily, thank you for making the updates! I think we should use the HCM color variables in the forced-colors query - this way the non-HCM mode won't have different colors (since there are no known a11y issues with the styling of the non-HCM view). I hope this helps!

Comment 18

[Jules Simplicio [:jules]]

Sorry for the delay replying Anna

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

I think this is the only instance besides that XUL dropdown in Search settings that I've seen an icon in a dropdown