1398987 - Can't see the onboarding overlay close button with Windows dark high contrast modes

Status: VERIFIED FIXED

(Firefox :: General, defect, P1)

Description

[Verdi [:verdi] Best to slack me]

Attachment: closebutton.png

If you use a dark high contrast mode in Windows (#1, #2, or Black), the close button in the onboarding overlay is black on black and can't be seen.

Comment 1

[[e-mail]]

Yura, do we need to support the dark high contrast mode?

Comment 2

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to Fred Lin [:gasolin] from comment #1)
> Yura, do we need to support the dark high contrast mode?

This is more of a question to product, but as an a11y person I'm inclined to say yes. Is the issue similar to background images not working in this mode? Would using an img inside a button fix this (This was the approach with the overlay button afaik)?

Comment 3

[Fischer [:Fischer]]

Attachment: Bug 1398987 - Can't see the onboarding overlay close button with Windows dark high contrast modes,

Review commit: https://reviewboard.mozilla.org/r/178738/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/178738/

Comment 4

[Fischer [:Fischer]]

Take the bug. We could set `fill: currentColor` to have the close svg icon adopt its color to the element's color, which would be adjusted to white in the black high-contrast mode

Comment 5

[Fischer [:Fischer]]

Attachment: notification_black_high_contrast.PNG

Comment 6

[Fischer [:Fischer]]

Attachment: overlay_black_high_contrast.PNG

Comment 7

[Fischer [:Fischer]]

Attachment: notification_no_high_contrast.PNG

Comment 8

[Fischer [:Fischer]]

Attachment: overlay_no_high_contrast.PNG

Comment 9

[Fischer [:Fischer]]

Attachment: notification_white_high_contrast.PNG

Comment 10

[Fischer [:Fischer]]

Attachment: overlay_white_high_contrast.PNG

Comment 11

[Fischer [:Fischer]]

Comment on attachment 8906979 [details]
Bug 1398987 - Can't see the onboarding overlay close button with Windows dark high contrast modes,

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/178738/diff/1-2/

Comment 12

[Fischer [:Fischer]]

(In reply to Fischer [:Fischer] from comment #11)
> Comment on attachment 8906979 [details]
> Bug 1398987 - Can't see the onboarding overlay close button with Windows
> dark high contrast modes,
> 
> Review request updated; see interdiff:
> https://reviewboard.mozilla.org/r/178738/diff/1-2/
Hi Rex,
Per our test on the window system, solve the issue with `fill: currentColor`. Please see the attached screenshots for the `fill: currentColor` results under different kind of settings, thanks.

Comment 13

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Comment on attachment 8906979 [details]
Bug 1398987 - Can't see the onboarding overlay close button with Windows dark high contrast modes,

https://reviewboard.mozilla.org/r/178738/#review183736

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/649a61cd9381
Can't see the onboarding overlay close button with Windows dark high contrast modes, r=rexboy

Comment 15

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/649a61cd9381

Comment 16

[Justin [:JW_SoftvisionQA]]

Attachment: HighContrastModeBlackWin10.JPG

I am still not seeing the x in High Contrast Mode Black on Win 10 x64

Comment 17

[Fischer [:Fischer]]

(In reply to Justin [:JW_SoftvisionQA] from comment #16)
> Created attachment 8908696 [details]
> HighContrastModeBlackWin10.JPG
> 
> I am still not seeing the x in High Contrast Mode Black on Win 10 x64
Hi Justin,
Would you provide your step to turn on the High Contrast Mode Black on Win 10? I would like to see if there was another settings out there we didn't cover.

p.s It seems the attachment 8908696 [details]: HighContrastModeBlackWin10.JPG was not about High Contrast Mode Black.

Thanks

Comment 18

[Justin [:JW_SoftvisionQA]]

Attachment: HighContrastModeBlack.JPG

I was wrong. The x is there it is just very light. I will mark this as verified.

Comment 19

[Justin [:JW_SoftvisionQA]]

Attachment: HighContrastModeBlack.JPG

Comment 20

[Fischer [:Fischer]]

(In reply to Justin [:JW_SoftvisionQA] from comment #19)
> Created attachment 8909868 [details]: HighContrastModeBlack.JPG
Hi Justin,
How did you made this type of contrast mode?
The white "x" button looks no good. I would like to investigate it, thanks.

Comment 21

[Justin [:JW_SoftvisionQA]]

Hey Fischer, I just went to the system settings on win 10 and changed to the high contrast Mode Black.

Comment 22

[Fischer [:Fischer]]

(In reply to Justin [:JW_SoftvisionQA] from comment #21)
> Hey Fischer, I just went to the system settings on win 10 and changed to the high contrast Mode Black.
After testing, found that if opened one about:newtab(or about:home) before switching to the high contrast Mode Black, that about:newtab wouldn't totally switch to the high contrast Mode Black (almost all visual elements are still painted with normal color) except for the onboarding overlay "x" button became white for the high contrast Mode Black.
If at this moment, opened another about:newtab, that newly opened about:newtab would be painted with the high contrast Mode Black or we could close and reopen Firefox to have everything painted correctly with the high contrast Mode Black. Vice versa when reverting back to the normal color mode. Seems this is more related to the system painting timing not related to the Onboarding here.

Comment 23

[Cristian Comorasu, QA [:ccomorasu], Releae Desktop QA - Please contact [e-mail]]

I reproduced this issue using Fx 57.0a1(build ID: 20170911100210), on Windows 10 x64. I can confirm this issue is fixed, I verified using Fx 57.0b7, on Windows 10 x64.