1858161 - The X Close button is white on Hover with High Contrast enabled

Status: VERIFIED FIXED

(Firefox Graveyard :: Shopping, defect)

Description

[Rares Doghi, Desktop QA]

Attachment: cvlosehigh.png

Found in

• Beta 119.0b7

Affected versions

• Beta 119.0b7
• Nightly 120.0a1 (2023-10-09)

Affected platforms

• Windows

Preconditions:
Set the browser.shopping.experience2023.enabled - TRUE
Set the browser.shopping.experience2023.optedIn - 1
Enable high Contrast.

Steps to reproduce

1. Reach amazon.com and open any supported Product details page
2. Hover over the X Close button.

Expected result

• The X Close button should be Black similar to the Chevron arrows when Hovering over it with High Contrast enabled.

Actual result

• The X Close button is white when hovered over and High contrast is enabled.

Regression range
Not Applicable

Comment 1

[Anna Yeddi [:ayeddi]]

The hovered foreground color (text and border) of the button should be using SelectedItemText - refer to the Figma HCM example (NDA'ed link)

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is set to S4. However, the accessibility severity is higher, .
:jhirsch, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 3

[kpatenio]

I've only tested with HCM on MacOS so far, but I can also see an inconsistency in the Close button X color on hover, compared to the chevron arrows. Rather than rendering ButtonText from common-shared.css, it instead uses --icon-color even in HCM. We should update the color though to SelectedItemText, as indicated by ayeddi.

Comment 4

[kpatenio]

Attachment: Bug 1858161 - do not let --icon-color for sidebar close button override HCM icon color

Comment 5

[kpatenio]

The patch for Bug 1858374 fixes this issue by applying SelectedItemText for the button upon hover. Resolving this ticket as FIXED.

Comment 6

[Rares Doghi, Desktop QA]

Attachment: 2023-12-07_11h07_46.mp4

Hi @kpatenio @ayeddi it seems that on Windows 10 the states are no longer visible, Its only changing the border of the buttons from Black to dark purple and its barely noticeable, The same happens on Clicked state, its no longer visible, Please take a look at my new screen recording from Windows 10.

Comment 7

[kpatenio]

(In reply to Rares Doghi, Desktop QA from comment #6)

Created attachment 9367426 [details]
2023-12-07_11h07_46.mp4

Hi @kpatenio @ayeddi it seems that on Windows 10 the states are no longer visible, Its only changing the border of the buttons from Black to dark purple and its barely noticeable, The same happens on Clicked state, its no longer visible, Please take a look at my new screen recording from Windows 10.

Hi Rares, this is with the High Contrast White theme, right? What if you tested the other HCM theme presets?
Windows 10 users can customize the HCM colours, so I don't think this is unexpected, especially if the ButtonText for that theme is the same colour as the background.

Is my understanding correct @ayeddi?

Comment 8

[Rares Doghi, Desktop QA]

Attachment: HighContrast.mp4

Yes, that was High Contrast white, and this is how it looks with High contrast 1 and high Contrast black, in the past The entire button had a background color with Dark text, the only problem here was that the X Close button was white and too close to that Background color from the button. The X should have been black here inside the Button.

Comment 9

[Rares Doghi, Desktop QA]

Attachment: HighOLDvsNew.mp4

Here is a more clear comparison between the old and the latest Nightly.

Comment 10

[Rares Doghi, Desktop QA]

Another issue is that now when we Click the X Close button only the x inside of the button will change color the border of the button just switches back to White (on High Contrast Black).

Comment 11

[kpatenio]

(In reply to Rares Doghi, Desktop QA from comment #8)

Yes, that was High Contrast white, and this is how it looks with High contrast 1 and high Contrast black, in the past The entire button had a background color with Dark text, the only problem here was that the X Close button was white and too close to that Background color from the button. The X should have been black here inside the Button.

Thanks for looking into the other themes. The X colour was originally overridden by CSS that didn't leave good contrast. We've now updated the HCM styles to derive button colours from SelectedItem, ButtonText, etc. So basically the OS HC settings determine what those colours should be.

Ex. just checked the default colour values for High Contrast White with a windows 10 VM:

• The Button Text colour defaults are white and violet for the text and background respectively. They correspond to these CSS values.
• The Selected Text colour defaults are black and white for the text and background repectively. They correspond to these values

It's technically doing as it's supposed to, although I agree the transition from white to white on hover isn't noticeable nor ideal. I wonder if the accessibility team has any thoughts on it?

(In reply to Rares Doghi, Desktop QA from comment #10)

Another issue is that now when we Click the X Close button only the x inside of the button will change color the border of the button just switches back to White (on High Contrast Black).

This is because we switch the border colour back to the button text value whenever we activate a button. The button text colour is white by default for High Contrast Black. I assumed that this is what we wanted, but it's also possible that I misunderstood the requirements or feedback. @ayeddi are you able to confirm if this is correct?

Comment 12

[Anna Yeddi [:ayeddi]]

Attachment: Nightly-123.0a1_active_state.png

In the recent Nightly 123.0a1 the X Close button on HCM appears to provide expected behavior for all states - :active state indication is included (with Win 11 HCM Night Sky) and all the CSS properties are appearing in the cascade as expected for HCM image buttons.

I think we can close this bug (I'll provide screenshots of default and hovered states too), if you agree with it, Rares

Comment 13

[Anna Yeddi [:ayeddi]]

Attachment: Nightly-123.0a1_default_state.png

Comment 14

[Anna Yeddi [:ayeddi]]

Attachment: Nightly-123.0a1_hovered_state.png

Comment 15

[Anna Yeddi [:ayeddi]]

Attachment: Nightly-123.0a1_focused_state.png

Comment 16

[Rares Doghi, Desktop QA]

Hi @Anna, the problem here is on Windows 10 where its a lot less visible on hover, I will attach a new recording and a scrensshot from High Contrast white, it seems that on windows 10 with high contrast black and white its a bit less visible, also when we click on these buttons the button frames turn back to white.

Comment 17

[Rares Doghi, Desktop QA]

Attachment: highContrast.mp4

Comment 18

[Rares Doghi, Desktop QA]

Attachment: 2024-01-11_10h59_58.png

The purple color is barely visible with High Contrast white.

Comment 19

[Rares Doghi, Desktop QA]

@Anna please let us know if these are good enough, if so we can close this issue as Verified.

Please note that the title text from some of the cards also change their color when we hover over them, is that also intended ? Please see the recording above.

Comment 20

[Rares Doghi, Desktop QA]

Attachment: CloseContrast.mp4

Comment 21

[Anna Yeddi [:ayeddi]]

Attachment: Win11_Desert_HCM_Hover_styling.png

(In reply to Rares Doghi, Desktop QA from comment #19)

@Anna please let us know if these are good enough, if so we can close this issue as Verified.

Please note that the title text from some of the cards also change their color when we hover over them, is that also intended ? Please see the recording above.

Just to confirm: I understood that the text from cards that changes the color on hover was How we determine review quality and Settings which are <summary> elements and are expected to be HCM-ized as buttons.

The color variables that are being used in the cascade are correct ones and, after testing on the Win11 Desert HCM theme, It seems that the hover styling confirms to work as expected - for both the buttons and summary elements (comparison with the OS HCM dialod button is provided in the screenshot) .

So it is verified.

Comment 22

[Rares Doghi, Desktop QA]

Attachment: HighContrast.png

Hi @Anna, this is how they look on Windows 10 with the 4 default High Contrast themes, please note that the High Contrast White is barely visible on Hover, while the High Contrast 1 and 2 looks totally out of place on Hover.

The Review checker looks great on Windows 11 with High Contrast themes.

Comment 23

[Anna Yeddi [:ayeddi]]

(In reply to Rares Doghi, Desktop QA from comment #22)

Created attachment 9372778 [details]
HighContrast.png

Hi @Anna, this is how they look on Windows 10 with the 4 default High Contrast themes, please note that the High Contrast White is barely visible on Hover, while the High Contrast 1 and 2 looks totally out of place on Hover.

The Review checker looks great on Windows 11 with High Contrast themes.

Rares, thank you for the through investigation! It appears that the colors used on hover are similar to the "active" one, i.e. on the Review Checker toggle on the URL Bar - but also the code review shows that system colors pulled in for the HCM styles are the ones expected. Under the HCM work we cannot ensure all colors would provide high contrast on all themes, because it is out of our control. But we do use the color pairs that are supposed to be paired with each other - this is what we could be doing and, per the code and with the manual inspection of the CSS properties, what we are doing.