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

VERIFIED FIXED in Firefox 57

Status

()

P1
normal
VERIFIED FIXED
a year ago
a year ago

People

(Reporter: verdi, Assigned: Fischer)

Tracking

57 Branch
Firefox 57
Points:
---

Firefox Tracking Flags

(firefox57 verified)

Details

(Whiteboard: [photon-onboarding])

Attachments

(9 attachments, 2 obsolete attachments)

(Reporter)

Description

a year ago
Created attachment 8906875 [details]
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.
Yura, do we need to support the dark high contrast mode?
Flags: needinfo?(yzenevich)
(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)?
Flags: needinfo?(yzenevich)

Updated

a year ago
Flags: qe-verify+
Priority: -- → P1
QA Contact: jwilliams
Whiteboard: [photon-onboarding][triage] → [photon-onboarding]

Updated

a year ago
Assignee: nobody → gasolin
Status: NEW → ASSIGNED
Comment hidden (mozreview-request)
(Assignee)

Comment 4

a year ago
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
Assignee: gasolin → fliu
(Assignee)

Comment 5

a year ago
Created attachment 8906982 [details]
notification_black_high_contrast.PNG
(Assignee)

Comment 6

a year ago
Created attachment 8906983 [details]
overlay_black_high_contrast.PNG
(Assignee)

Comment 7

a year ago
Created attachment 8906984 [details]
notification_no_high_contrast.PNG
(Assignee)

Comment 8

a year ago
Created attachment 8906985 [details]
overlay_no_high_contrast.PNG
(Assignee)

Comment 9

a year ago
Created attachment 8906986 [details]
notification_white_high_contrast.PNG
(Assignee)

Comment 10

a year ago
Created attachment 8906987 [details]
overlay_white_high_contrast.PNG
Comment hidden (mozreview-request)
(Assignee)

Comment 12

a year ago
(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

a year ago
mozreview-review
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
Attachment #8906979 - Flags: review?(rexboy) → review+
(Assignee)

Updated

a year ago
Keywords: checkin-needed

Comment 14

a year ago
Pushed by ryanvm@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/649a61cd9381
Can't see the onboarding overlay close button with Windows dark high contrast modes, r=rexboy
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/649a61cd9381
Status: ASSIGNED → RESOLVED
Last Resolved: a year ago
status-firefox57: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
Comment hidden (obsolete)
status-firefox57: fixed → affected
(Assignee)

Comment 17

a year ago
(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
Flags: needinfo?(jwilliams)
Created attachment 8909865 [details]
HighContrastModeBlack.JPG

I was wrong. The x is there it is just very light. I will mark this as verified.
Flags: needinfo?(jwilliams)
Created attachment 8909868 [details]
HighContrastModeBlack.JPG
Attachment #8908696 - Attachment is obsolete: true
Attachment #8909865 - Attachment is obsolete: true
Status: RESOLVED → VERIFIED
status-firefox57: affected → fixed
(Assignee)

Comment 20

a year ago
(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.
Flags: needinfo?(jwilliams)
Hey Fischer, I just went to the system settings on win 10 and changed to the high contrast Mode Black.
Flags: needinfo?(jwilliams)
(Assignee)

Comment 22

a year ago
(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.
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.
status-firefox57: fixed → verified
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.