1848037 - HCM Improvements for the Shopping Sidebar

Status: RESOLVED FIXED

(Firefox :: Shopping, defect, P3)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Item_1_Border_of_the_sidebar_should_be_CanvasText.png

activate a High Contrast Mode (Instructions), i.e. Night Sky theme on Windows 11

1. Sidebar left border needs to be CanvasText to separate it from the page content
   1. To compare with the screenshot attached, in the Windows 11 Night Sky theme the border of the sidebar on the left should appear white.
2. Not Now button keeps ButtonText color for the border when hovered, while it is expected to be SelectedItemText (otherwise it looks like it's in an active state). (refer to the Acorns > Buttons > States > (HCM), State = Hover examples).
   1. To compare with the screenshot attached, in the Windows 11 Night Sky theme the border should appear dark gray instead of yellow.
3. All Buttons (i.e. X, V, toggle, Turn off...) use Canvas for their backgrounds instead of ButtonFace
   1. To compare with the screenshot attached below, in the Windows 11 Night Sky theme the background should appear dark gray instead of black.
4. Focus indication for the Analyze Reviews and other hyperlinks (i.e. How Fakespot determines review quality) has focus outline that uses ButtonText instead of CanvasText
   1. To compare with the screenshot attached below, the border color should appear white instead of yellow.
5. Focus indication for Settings V and other disclosures (How we determine... V incl.) is not as expected - both the placement of the outline and the color:
   1. it's ButtonText and outlines the whole row, while it's expected to add CanvasText outline to the chevron only since this is the element styled as a control in HCM - refer to the Acorns > Buttons > States > (HCM), State = Focus examples
   2. Or the entire Settings V control could be made look like a dropdown button - refer to the HCM Components reference in Figma (NDA'ed link) for an example.
   3. To compare with the screenshot attached below, the border color should appear white instead of yellow.
6. Focused Checked toggle for Show products settings item is using ButtonText while CanvasText is expected for the outline color
   1. To compare with the screenshot attached below, the outline color should appear white instead of yellow.

Comment 1

[Anna Yeddi [:ayeddi]]

Attachment: Item_2_Not_now_button_is_hovered.png

Comment 2

[Anna Yeddi [:ayeddi]]

Attachment: Item_3_Background_of_all_buttons_should_be_ButtonFace.png

Comment 3

[Anna Yeddi [:ayeddi]]

Attachment: Item_4_Focus_outline_of_all_links_should_be_CanvasText-Analyze-reviews.png

Comment 4

[Anna Yeddi [:ayeddi]]

Attachment: Item_4_Focus_outline_of_all_links_should_be_CanvasText-How-Fakespot.png

Comment 5

[Anna Yeddi [:ayeddi]]

Attachment: Item_5_Focus_indication_of_all_disclosures_should_be_CanvasText_and_on_chevron-Settings.png

Comment 6

[Anna Yeddi [:ayeddi]]

Attachment: Item_5_Focus_indication_of_all_disclosures_should_be_CanvasText_and_on_chevron-How-we-determine.png

Comment 7

[Anna Yeddi [:ayeddi]]

Attachment: Item_6_Focus_outline_of_toggle_button_should_be_CanvasText.png

Comment 8

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Note - none of these are accessibility blockers (access-s2 or -s1), so this is not a highest priority item for 119.

Also, whoever picks this up, please split this bug into individual tasks before getting started :+1:

Comment 9

[Emily McMinn :emcminn]

Attachment: Bug 1848037 - HCM colour fixes for the shopping sidebar

Comment 10

[Emily McMinn :emcminn]

I believe #2 is fixed by https://phabricator.services.mozilla.com/D189017, importing the design tokens into the about:welcome styles.

I've attached a patch that should fix #1, 3 & 4, since they should be only CSS changes. I'll open a new bug to address #5, since we'll have to make a choice between the two options for the dropdown style - I lean toward the entire thing being styled as a button since the entire area is clickable, but I'll verify with product before working on that.

Comment 11

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Whoops, thought this was just a stale metabug, but there seems to be a patch attached to it. Reopening.

Comment 12

[Emily McMinn :emcminn]

These fixes have been spread around and addressed in various other bugs:
https://bugzilla.mozilla.org/show_bug.cgi?id=1858407 &
https://bugzilla.mozilla.org/show_bug.cgi?id=1858374

The attached patch has been closed, so I'm going to close this as well :)