1785736 - Progress Bar in Firefox View lacks contrast in Windows/macOS high contrast mode

Status: VERIFIED FIXED

(Firefox :: Firefox View, defect, P2)

Description

[Ray Fambro]

Progress bars are not styled with sufficient contrast. They do not use increased contrast in Mac or Windows HCM.

Comment 1

[:Gijs (he/him)]

The a11y team told us we should use SelectedItem and SelectedItemText for the background and foreground colours, respectively. The progress state (using the pseudo element) and the border should use the foreground colour.

Cieara has offered to take this on!

Comment 2

[:cmkm]

Attachment: Bug 1785736 - Progress bar HCM palette changes r?Gijs

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ef63c5cae6ba
Progress bar HCM palette changes r=Gijs

Comment 4

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/ef63c5cae6ba

Comment 5

[Shane Hughes [:aminomancer]]

Attachment: current appearance

Are the progress bar colors reversed? Or should the border be SelectedItem instead of SelectedItemText?

Comment 6

[Shane Hughes [:aminomancer]]

Attachment: colors swapped

With the colors reversed

Comment 7

[Shane Hughes [:aminomancer]]

Attachment: just the border swapped

With just the border set to SelectedItem

Comment 8

[:Gijs (he/him)]

I originally tested this on Windows where it looked fine. I assume the screenshot is from macOS? IIRC these were the colours suggested by the a11y team, and it would seem to make sense to do it the way around it currently is (SelectedItemText for the foreground ergo border + progress, SelectedItem for the background) but I agree that it doesn't look great on macOS. Morgan, did I miss something? Do we just want to / need to do a per-platform thing? Or is the use of foreground/background here just confusing? :-(

Comment 9

[Morgan Reschenberg [:morgan]]

Ah yeah we'll need to do a per-platform thing here, sorry about that I think we tested with just windows HCM when we gave that advice.

We can put the current, ok-on-windows styling inside of a forced-colors:active media query, and then the mac stuff can go in a prefers-contrast:more and (not forced-colors) block.

Comment 10

[Vlad Lucaci, Thunderbird QA (:vlucaci)]

Hello,

I have verified this issue on macOS 12, Windows 11 and Ubuntu 22 on 106.0b4 and latest 107a1.

Unfortunately , the colours suggested by a11y team does not seem to be very good as it gives the impression that the progress bar is at 100%. Could they be reverted to the state they were before 2022-09-15? (as it stands, this bad visibility issue occurs for all OS's, not only for macOS)

Here is an attachment of the issue : image

Comment 11

[:cmkm]

Attachment: Bug 1785736 - Revert progress bar HCM palette changes r?Gijs

This reverts commit f9073349e201d4b3f91a6bcfc02406b0bf84cd4f.

Comment 12

[:cmkm]

Hi Morgan and Gijs! I submitted a revert patch for this until I can submit another patch with the per-platform queries Morgan suggested. Please let me know if I should do this differently, thank you!

Comment 13

[:Gijs (he/him)]

(In reply to Vlad Lucaci, QA (:vlucaci) from comment #10)

Hello,

I have verified this issue on macOS 12, Windows 11 and Ubuntu 22 on 106.0b4 and latest 107a1.

Unfortunately , the colours suggested by a11y team does not seem to be very good as it gives the impression that the progress bar is at 100%. Could they be reverted to the state they were before 2022-09-15? (as it stands, this bad visibility issue occurs for all OS's, not only for macOS)

Here is an attachment of the issue : image

I'm pretty confused at this point - what OS is this screenshot from, and how did you test high contrast mode? I'm surprised that the SelectedItemText colour is the same as the background colour here.

(In reply to Cieara Meador [:cmkm] from comment #12)

Hi Morgan and Gijs! I submitted a revert patch for this until I can submit another patch with the per-platform queries Morgan suggested. Please let me know if I should do this differently, thank you!

I think we should reopen this. I'm not sure if a revert is really our best option - it sounds (and looks on that screenshot) like if we used SelectedItemText as the background colour of the entire bar, but SelectedItem as the foreground (border) colour and filled-in-progress-bit background colour, the macOS bits would look OK and so would the screenshot that Vlad has provided (though unclear if that is also macOS?). It's semantically... odd... to do it that way around but if it reliably works (also on Windows?), it might be our best bet. I defer to Morgan as to what's happening here and if that is definitely for real our best option; It sounds like we're surprised by the results here, and I'm not sure why that is. It would probably be useful to have screenshots for the 4 main win10 HCM themes, and maybe macOS, of whatever path we end up taking here.

Comment 14

[Vlad Lucaci, Thunderbird QA (:vlucaci)]

Hello,

Here you can find screenshots of the issue for the following configurations:

• macOS 12 (for macOS it is enough to only activate Increase Contrast to reproduce the issue, Invert Colours is not required)
• Ubuntu 22
• Windows 10 (HC Black, HC White, HC 1, HC 2)
• Windows 11 (Night Sky, Aquatic, Dusk, Desert)

This issue occurs regardless of the OS's theme (Dark/Light).

Comment 15

[:cmkm]

Attachment: Bug 1785736 - Invert Firefox View progress bar HCM palette r?Gijs

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/36339a5e7c97
Invert Firefox View progress bar HCM palette r=Gijs

Comment 17

[:cmkm]

(In reply to Vlad Lucaci, QA (:vlucaci) from comment #14)

Hello,

Here you can find screenshots of the issue for the following configurations:

• macOS 12 (for macOS it is enough to only activate Increase Contrast to reproduce the issue, Invert Colours is not required)
• Ubuntu 22
• Windows 10 (HC Black, HC White, HC 1, HC 2)
• Windows 11 (Night Sky, Aquatic, Dusk, Desert)

This issue occurs regardless of the OS's theme (Dark/Light).

Hi there! Just landed a patch inverting the colors, which looks good on the Windows 11 HCM themes as well as macOS Increased Contrast. Vlad, would you be able to confirm that this fixes Win10 and Ubuntu?

Comment 18

[Vlad Lucaci, Thunderbird QA (:vlucaci)]

Hello,

Confirming that the patch inverting colors looks good as well on Windows 11, Windows 10, Ubuntu 22 and macOS 12.

Builds used to verifiy this issue from Treeherder:

• 107.0a1(20220930040029) for macOS
• 107.0a1(20220930062533) for Ubuntu22, Windows 11 and Windows 10

Comment 19

[:Gijs (he/him)]

Comment on attachment 9296723 [details]
Bug 1785736 - Invert Firefox View progress bar HCM palette r?Gijs

Beta/Release Uplift Approval Request

• User impact if declined: Progress bars on FxView are not readable in HCM
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: See earlier comments.
• List of other uplifts needed: N/A
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Straightforward CSS-only change that only affects HCM.
• String changes made/needed: Nope
• Is Android affected?: No

Comment 20

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/36339a5e7c97

Comment 21

[Pascal Chevrel:pascalc]

Comment on attachment 9296723 [details]
Bug 1785736 - Invert Firefox View progress bar HCM palette r?Gijs

Approved for 106.0b7, thanks.

Comment 22

[Pascal Chevrel:pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/74b26556f5f1

Comment 23

[Vlad Lucaci, Thunderbird QA (:vlucaci)]

Confirming this issue as verified fixed on 107.0a1(20221002212226) and 106.0b7(20221002185807) using HCM of Win10, Win11, macOS 12 , Ubuntu 22.