1937215 - [contextual-password-manager] Learn more about importing password link on the failed import message has low color contrast on the default Dark theme

Status: RESOLVED FIXED

(Toolkit :: Password Manager, defect, P3)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Accessibility Inspector highlighting `Learn more about importing passwords` link showing color contrast of 4.32:1 which is not sufficient

When importing passwords fails, an error message is shown which includes Learn more about importing passwords link. This link on the default Dark theme appears to be blue against red background - this color combination gives only 4.32:1 in color contrast while 4.5:1 or higher is required to be readable.

Adjusting the link color to use a lighter shade of the Fx blue would resolve the issue.

Adding Hanna in case this may be addressed on the moz-message-bar component level

Comment 1

[Anna Yeddi [:ayeddi]]

Attachment: Example of the Couldn't import passwords error message bar for reference

Comment 2

[Micah [:mtigley] (she/her)]

Thanks Anna! I looked into this and it seems like we should be using --link-color here. It seems like that is what used in the Storybook demo.

Hanna would we be able to add this to the styles for moz-message-bar: https://searchfox.org/mozilla-central/rev/5efa5bfe9c217f6ab3529880b25a52ac6405dda8/toolkit/content/widgets/moz-message-bar/moz-message-bar.css#110-112? I can add it as part of this bug if that's easier!

Comment 3

[Hanna Jones [:hjones]]

Hey - yeah that sounds super reasonable! I think we might want to change up the lines just below those you linked targeting the ::slotted(a): https://searchfox.org/mozilla-central/rev/5efa5bfe9c217f6ab3529880b25a52ac6405dda8/toolkit/content/widgets/moz-message-bar/moz-message-bar.css#114-116

If you don't mind putting up a patch then I would be happy to review.

For context - I think in most cases we rely on the link styles coming from in-content/common-shared.css or global.css, but I wonder if that assumption breaks down in this case because we have a few layers of Shadow DOM between where the global stylesheet is added and where the slotted link is created/added 🤔

Comment 4

[Micah [:mtigley] (she/her)]

Attachment: Bug 1937215 - Use exportparts for notification-message-bar. r=hjones!

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/804e4a8a4880
Use exportparts for notification-message-bar. r=hjones,desktop-theme-reviewers,reusable-components-reviewers,credential-management-reviewers,rsafaeian

Comment 6

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/804e4a8a4880