1790396 - Ensure Feature Callout messages are accessible in HCM (High Contrast Mode)

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Meg Viar [:mviar]]

per :ayeddi -

• "The dialog does not follow the HCM styling for controls on hover: Close and Next/Got it! should have their colors reversed on hover, but the Close icon disappears on Win and is almost invisible on mac."
• "Next does not follow Windows HCM colors for buttons: expected to use ButtonText and ButtonFace, but the outline is using text color (white on WinOS 11 Night Sky HCM, as an example, while yellow is expected)"

See featureCallout.mjs for feature callout code.
See here in AboutWelcome for screen content code.

Comment 1

[Shane Hughes [:aminomancer]]

I think we'd like to add HCM specific rules to override these so we can use the same custom properties for these buttons that we use in other messaging surfaces:

background-color: var(--in-content-button-background-hover);
color: var(--in-content-button-text-color-hover);

but right now we'd have to basically misuse the custom properties or use the system colors directly:

background-color: var(--in-content-button-text-color);
color: var(--in-content-button-text-color-hover);

So I'm gonna open a new bug in Firefox View, and make this bug depend on it, if that's okay with Emily?

Comment 2

[Emily McMinn :emcminn]

(In reply to Shane Hughes [:aminomancer] from comment #1)

I think we'd like to add HCM specific rules to override these so we can use the same custom properties for these buttons that we use in other messaging surfaces:

background-color: var(--in-content-button-background-hover);
color: var(--in-content-button-text-color-hover);

but right now we'd have to basically misuse the custom properties or use the system colors directly:

background-color: var(--in-content-button-text-color);
color: var(--in-content-button-text-color-hover);

So I'm gonna open a new bug in Firefox View, and make this bug depend on it, if that's okay with Emily?

Works for me! I'm going to look at this again today, and see how much of it is still valid.

Comment 3

[Emily McMinn :emcminn]

Attachment: Bug 1790396 - Fixup Feature Callout button CSS for HCM

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c0b9be18630c
Fixup Feature Callout button CSS for HCM r=aminomancer

Comment 5

[Marian-Vasile Laza]

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

Comment 6

[Alice Varro [avarro], Ecosystem QA]

I have verified this issue using the latest Firefox Nightly 107.0a1 (Build ID: 20220926093803) on Windows 10x64, Windows 11x64, macOS 12.3.1 and Linux Mint 20.2 x64 and I can confirm the following:

• The Firefox View Feature Tour is correctly displayed using the High Contrast Mode.
• All the elements from the callout messages are accessible using the High Contrast Mode.

Comment 7

[Meg Viar [:mviar]]

Attachment: Screenshot of HCM issues with primary CTA

The string for the primary CTA isn't visible when hovered over in HCM. If possible, it would be nice to uplift this fix to ensure the feature is accessible to all users. Since this bug was previously closed and verified, it's possible this was a regression introduced in a later patch.

Comment 8

[Meg Viar [:mviar]]

See above

Comment 9

[Shane Hughes [:aminomancer]]

Attachment: Win10 high contrast black

Hmm, it looks right for me on Windows 10. Are you sure that HCM theme hasn't been customized? Maybe there's some difference between versions, though it would be strange for a default theme to have the same value for button foreground/background. And we definitely have the right values

.onboardingContainer.featureCallout .screen[pos=callout] .action-buttons .primary:hover {
  background-color: var(--in-content-primary-button-background); [ButtonText]
  color: var(--in-content-primary-button-text-color); [ButtonFace]
}

Or maybe there's some other rule overriding the text color somehow.

Comment 10

[Shane Hughes [:aminomancer]]

Attachment: Win10 high contrast #1

Another default theme

Comment 11

[Shane Hughes [:aminomancer]]

Another strange thing is that the hovered button has the same colors as the Firefox View primary buttons, but in the screenshot the primary buttons look correct. So I guess that means there must be some CSS we're not seeing.

Comment 12

[Alice Varro [avarro], Ecosystem QA]

Attachment: Behavior

Comment 13

[Alice Varro [avarro], Ecosystem QA]

Comment on attachment 9296453 [details]
Behavior

In my case on Windows 10x64 (version 21H2, OS build: 19044.2006) this issue is also reproducible (I tried all the available themes: High Contrast Black, High Contrast White, High Contrast #1 and High Contrast #2). Attaching a screen recording of the issue:

Comment 14

[Shane Hughes [:aminomancer]]

That looks like the release or beta channel, but this patch hasn't been uplifted yet. On closer inspection, same with Meg's screenshot. Have you tried with a Nightly or local build?

Comment 15

[Alice Varro [avarro], Ecosystem QA]

Yes, this was Firefox Beta 106.0b5 (Build ID: 20220927185813). Using the latest Firefox Nightly 107, the issue is no longer reproducible, I also verified that a few days ago (all the elements are correctly displayed on High Contrast Mode).

Comment 16

[Shane Hughes [:aminomancer]]

Thanks for confirming!

Comment 17

[Meg Viar [:mviar]]

Thanks all, closing this again and we'll aim to uplift.

Comment 18

[Meg Viar [:mviar]]

Comment on attachment 9295996 [details]
Bug 1790396 - Fixup Feature Callout button CSS for HCM

Beta/Release Uplift Approval Request

• User impact if declined: Users with HCM on won't be able to see the string for the primary call to action button
• 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: Open the Firefox View tab with a fresh profile in high contrast mode. Click "See how it works" on the spotlight modal and then confirm that you can see the primary button text on hover in the feature callout that appears next (titled "Hop between devices...").
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Only CSS changes scoped to the affected element
• String changes made/needed: None
• Is Android affected?: No

Comment 19

[Pascal Chevrel (relman team) -> :pascalc]

Comment on attachment 9295996 [details]
Bug 1790396 - Fixup Feature Callout button CSS for HCM

P1 and low risk, approved for 106.0b6, thanks.

Comment 20

[Pascal Chevrel (relman team) -> :pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/f6dcaba2d469

Comment 21

[Alice Varro [avarro], Ecosystem QA]

I have verified this issue using the latest Firefox Beta 106.0b6 (Build ID: 20220929195234) on Windows 10x64, Windows 11x64, macOS 12.3.1 and Linux Mint 20.2 and I can confirm the following:

• The string for the primary CTA is correctly displayed when hovered using the High Contrast Mode.