1837458 - [HCM] Quarantined Domains Message-bar on the extensions panel to use semantic HCM colors

Status: VERIFIED FIXED

(Toolkit :: UI Widgets, defect)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Learn More link is focused on Windows with Night Sky HCM on.png

STR:

1. Activate system High Contrast Mode (Windows: Settings > Accessibility > Contrast Themes > (i.e. Night Sky) > Apply; Mac: Settings > Accessibility > Display > Increase Contrast)
2. Fully install a non-recommended extension, e.g. https://addons.mozilla.org/en-US/firefox/addon/colorzilla/
3. Go to about:config and add a domain to extensions.quarantinedDomains.list, e.g. mozilla.ai
4. Open a new tab and go to mozilla.ai
5. Navigate to the extensions button in the toolbar and open the Extensions panel
6. Review the colors used for the quarantined domains message and readability of ! icon and Learn more link

Expected:

1. Both ! icon and Learn more link are easily readable. On Windows, the message and its elements communicate the semantic meaning of each element by following the High Contrast Mode design guide to provide high color contrast and respect user HCM settings. I.e. link should use MozNativehyperlinktext and Canvas color pair and SelectedItem with SelectedItemText color pair for hover state. Ideally, while on focus the hyperlink colors remain but the CanvasText outline is added similarly to the buttons
2. When focused with the keyboard or hovered over with a mouse the Learn more link follows the expected link behavior

Actual:

Learn more link text and the Attention/Warning icon are hard to discern against the background, states are not clear and the focused state is hard to track too

Comment 1

[Anna Yeddi [:ayeddi]]

Attachment: Learn more link focused on Mac OS with Increase Contrast on.png

on Mac, while the focus outline uses the Accent color (as expected), the color contrast of the link text against its background in all states is only 1.7:1 where 4.5:1 or higher is expected for the regular size text

Comment 2

[William Durand [:willdurand]]

Mark, do you think (part of) this should be addressed in the reusable component itself? I would think that having a link in a message-bar isn't uncommon. Also, the icon is part of the reusable component. If this isn't already addressed in the redesign of this component, we might want to ping Jules about these two points.

Comment 3

[Mark Striemer [:mstriemer]]

Attachment: Bug 1837458 - Remove message-bar/infobar colors in HCM, add border r?willdurand

Comment 4

[Mark Striemer [:mstriemer]]

Thanks Anna, this component definitely needed some HCM love. I put up a patch for the message-bar and infobar to follow more closely with the new design that Jules is working on but mostly just enough to fix the egregious errors as we have plans to overhaul this component soon. They will both have a border in HCM now and use HCM colours rather than coloured icons/bgs

I didn't touch the link as that is using our global styles. Can you confirm that links in about: pages and the chrome should be updated to match this? And perhaps file a bug for that in Toolkit :: Themes? I'm not seeing any hover/active states (aside from losing the underline in active, which I think we actually want to keep) for any links at all in Windows HCM

Comment 5

[Anna Yeddi [:ayeddi]]

Thank you for working on the fix, Mark!

Even though there are plans to replace the components sometime in the future, we still strive to provide equal access for all users to the current implementation. Feel free to file further HCM-ization bugs blocking the bug 1832382 for about: pages too that you come across. It is a work in progress but we'll get there, one component at a time!

Since the Acorns website is still in progress, I could only share the NDA'd link with the Hyperlink HCM hover state example, but basically it is expected that the underline appears when it was not present or disappearing when it was present (as you mentioned) and the pointer changes - that is it for hyperlinks, no color changes are expected.

It is expected that hyperlinks would use MozNativehyperlinktext for the foreground and Canvas for the background at all times, this is our standard and all surfaces should follow it. Ensuring the color combination is used together is the guarantee that each user would get a color combination and contrast that they set their system/Fx up to (i.e. some users with dyslexia prefer to have lower color contrast with yellow-ish colors, and they could customize their HCM to have two specific colors together to help them with reading). When there is another color used for the background of the area around, it is still possible to set up MozNativehyperlinktext against Canvas for that specific element (a link) - you could find examples of Canvas and ButtonFace colors use in one element within the Windows OS' Contrast Mode settings dialog that allows keeping button and text and hyperlink styles separate and complete.

This background expectation is usually not obvious since the general background is Canvas too. We discuss the HCM mode and make engineering notes and references for its implementation during an accessibility review, especially when new components are introduced. I am not sure why the a11y review was missed for the Quarantined Domains Message bar, but I'll be happy to help with whatever is needed at this stage as well. I.e. if you have a Figma file for the mockups, I can make a HCM version for reference as well. LMK how can I be of assistance.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3a4da79fcd60
Remove message-bar/infobar colors in HCM, add border r=willdurand,hjones

Comment 7

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/3a4da79fcd60

Comment 8

[Alex Cornestean]

Hello,

Verified as Fixed.

Tested in comparison on the latest Beta (116.0b2/20230706193912) and Release (115.0/20230629134642) on Windows 10 x64 (with all the available HCM Themes I had available in the HCM settings: High Contrast #1, High Contrast #2, High Contrast Black and High Contrast White) and on macOS 11.3.1 with Increased Contrast enabled.

For more details, see the attached screenshots.

Comment 9

[Alex Cornestean]

Attachment: screenshots.png