1733690 - MR2 [about:welcome] - Accessibility fixes on colorways and thank you screen

Status: VERIFIED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Punam Dahiya [:pdahiya]]

Scope of this bug is to do accessibility run on implemented MR2 colorways and thank you screen

Comment 1

[Punam Dahiya [:pdahiya]]

[Tracking Requested - why for this release]: Accessibility fixes for MR2 new user onboarding that we would like to uplift

Comment 2

[Emily McMinn :emcminn]

Some things I'm going to address in this bug:

• Inactive step indicators disappear in HCM. This should be able to be fixed with a border as we've done before.
• Large colorways circles also disappear; a border is a possible solution but chatting with UX to see if we want something else.
• Focus ring stuff to be addressed if possible: colorways group focus ring and the focus ring on the large circles should only appear on keyboard access

I'm going to wait for QA feedback for screen reader and focus tweaks, since I'm not sure what ideal behaviour is there.

Comment 3

[Ed Lee :Mardak]

linear-gradient goes away with HCM. Upgrade spotlight keeps the gradient by using icon.svg

Comment 4

[Emily McMinn :emcminn]

(In reply to Ed Lee :Mardak from comment #3)

linear-gradient goes away with HCM. Upgrade spotlight keeps the gradient by using icon.svg

cool, if we're already doing that for upgrade then I'll do the same for about:welcome. :) thanks!

Comment 5

[Ed Lee :Mardak]

There's HCM issue with fancy header disappearing (transparent). Upgrade dialog conditionally makes it transparent:

https://searchfox.org/mozilla-central/rev/a9ef6ad97d2d5f96d5ed51eda38f1a02700ccff7/browser/themes/shared/upgradeDialog.css#55-57

Comment 6

[Ed Lee :Mardak]

The about:welcome "not now" button/links don't look good on hover after bug 1734187. I think we can remove the forced-colors section?

https://searchfox.org/mozilla-central/rev/477950cf9ca9c9bb5ff6f34e0d0f6ca4718ea798/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss#423-427

Comment 7

[Emily McMinn :emcminn]

Those fixes work! Thanks :) I'm also seeing the hero text and H1 disappear on the welcome page (the forced background in HCM covers them) and I'm trying to figure out what recent change would have caused that. It looks like --in-content-page-color: WindowText; is being forced to a dark color when prefers-contrast is on, regardless of what background and text colors I've picked:

EDIT: Looks like the background color gets respected, but the text color is always dark. So if a user chooses a dark background & light text color, things will disappear like this.

Comment 8

[Emily McMinn :emcminn]

Attachment: Screen Shot 2021-10-08 at 1.05.02 PM.png

Comment 9

[Emily McMinn :emcminn]

Attachment: Bug 1733690 - Various a11y fixes: step indicators, title transparency, button hover

Comment 10

[Emily McMinn :emcminn]

Punam and I discussed the issue with the hero text disappearing in HCM, and it turns out this isn't a regression and is present in release too. So I'm going to leave that fix out of this patch, and file a separate bug so that we can track the fix in release.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/024b0c521294
Various a11y fixes: step indicators, title transparency, button hover r=Mardak

Comment 12

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/024b0c521294

Comment 13

[Emily McMinn :emcminn]

Comment on attachment 9245047 [details]
Bug 1733690 - Various a11y fixes: step indicators, title transparency, button hover

Beta/Release Uplift Approval Request

• User impact if declined: These are accessibility fixes for MR2, primarily for users who have enabled High Contrast Mode.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: on MacOS: System Preferences -> Accessibility -> Display -> Increase contrast
  on Windows: Ease of Access settings -> High contrast

All about:welcome elements should be visible (Text/titles, buttons, and step indicators)

• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): CSS fixes only
• String changes made/needed: none

Comment 14

[Robert Martin [:romartin], Ecosystem QA]

Hey Emily,

I've verified this issue using Firefox Nightly 95.0a1 (Build ID: 20211013212517) and I've observed the following behavior:

• On Windows 10 x64, the button border of the "Auto", "Light", and "Dark" theme variants from the "Default" theme option in the "Life in color" slide is not visible for New Users if the High Contrast Mode is enabled. However, the borders are visible for the rest of the Themes for New Users Onboarding and are visible for all the themes in the Upgrade Users spotlight.
• On macOS 10.15.7, the step indicators are not visible if the "Increase contrast" is enabled and the "Bold" theme variant is selected for any of the available themes.

Can you please weigh in on this?

Comment 15

[Emily McMinn :emcminn]

Thanks for finding those, Robert!

Looks like the step indicator issue comes from the chosen var switching to #FFF in dark mode. The "bold" themes usually have dark window backgrounds, but HCM overrides those. I've played around with some different in-content vars and it looks like setting it to var(--in-content-button-text-color); works for that scenario as well as all the others.

I'm going to NI Ed for the windows bug, since it seems to be an issue with the default colorways disc disappearing in Windows HCM, which I have a feeling is being fixed in another patch.

Comment 16

[Ed Lee :Mardak]

Not sure what was the expected scope of this bug, but the designs for high-contrast mode about:welcome colorway screen show buttons doing their usual high contrast styling:
https://www.figma.com/file/blhdnzQOhWYKcdiCzywMuG/MR2-Onboarding?node-id=1163%3A99937

Looks like it wasn't addressed in this bug, so we'll need a followup although unclear if that will need uplift or if it's acceptable for 94.

Comment 17

[Dianna Smith [:diannaS]]

Comment on attachment 9245047 [details]
Bug 1733690 - Various a11y fixes: step indicators, title transparency, button hover

Approved for 94.0b6

Comment 18

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/0e7bf68bfcc0

Comment 19

[Robert Martin [:romartin], Ecosystem QA]

Given that the issues mentioned in comment 14 will be addressed in separate bugs, and the verification mentioned in comment 14 coupled with my verification using Firefox Beta 94.0b6 (Build ID: 20211014201116) on Windows 10 x64 and macOS 11.6, I'm marking this issue as VERIFIED FIXED. Thank you!