Fluentui: Message Bar and link colors do not work well in high contrast mode

[tipantaz]

Hello team!
I couldn't find a duplicate of this but there are some bugs that seem related.

The bug is the following:
When I have a link in the message bar and specify a color, in high contrast mode black it does not work properly on edge.

It stays the same color while the background becomes white as well.

https://codepen.io/tipantaz/pen/MWgPvjj

Actual behavior:
Link color stays the same.

Expected behavior:
Expecting to change color according to the background.

Thanks!

[aneeshack4]

@tipantaz Thanks for reporting this! I believe the MessageBar styles are missing a HighContrastSelector - I will send a fix out.

[aneeshack4]

@tipantaz This is actually because you're not using Fabric's Link control - when I changed the anchor to Link it is visible:

I believe if you want to use the generic <a> instead of Fabric's Link control, you'll have to provide your own high contrast selector in the css classname that you're using for that anchor element.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[tipantaz]

Hey @aneeshack4, sorry for taking a while.
I only used the generic because in order to change the color of the link in a message bar I had to use the !important tag and I suspected that that might be the cause of the problem.

It might be that I am using the styling wrong even though it does work properly when not in the message bar.

If you could take a look at this https://codepen.io/tipantaz/pen/MWgPvjj

And here are some screenshots for reference

What do you think?
Thanks for your help and patience!

[aneeshack4]

@tipantaz So it's working properly with the !important tag? And if not, have you tried what I suggested before with providing your own high contrast selector in the styling for the Link component?

[tipantaz]

Hi again @aneeshack4 and thanks for the feedback.
No it is not working with the !important tag in high contrast because the color is not changing, it stays white.
I think that me having to use !important in the style is a bug itself, what do you think? Is there any better option? If we solve this then we solve the a11y bug as well.

I included everything I could think of in the codepen above.

I will try using the selectors and come back to you.

[aneeshack4]

I don't think there's anything wrong with the usage of !important but I personally haven't used it with the Fabric Link component so perhaps owner @khmakoto may have come across this more? The better option is what I suggested - the high contrast selectors; that is typically how a11y styling is addressed. Please try that.

[khmakoto]

@tipantaz I think @aneeshack4 is right here. From my understanding this is how styling is applied when dealing with High Contrast Mode:

1. The default style of the tag you're using is applied.
2. The high contrast style of the tag you're using is applied.
3. The user defined styles you specify are applied.

What this means in this case is that, because you're specifying the style of the link as color: white, this becomes the color used in both normal and high contrast modes based on the order of operations above.

I believe that the approach @aneeshack4 suggested here of using high contrast selectors will work here. We have them specified for easy use and you can import them as HighContrastSelector, HighContrastSelectorWhite and HighContrastSelectorBlack from our styling library @uifabric/styling which is also exported from the main office-ui-fabric-react package.

Alternatively, if you want to write the selectors yourself, their values are the following:

export const HighContrastSelector = '@media screen and (-ms-high-contrast: active)';
export const HighContrastSelectorWhite = '@media screen and (-ms-high-contrast: black-on-white)';
export const HighContrastSelectorBlack = '@media screen and (-ms-high-contrast: white-on-black)';

I hope this helps you solve your issue!

[khmakoto]

Upon further review, I do think that there might indeed be a CSS specificity problem here. The main issue is that the MessageBar has this styling defined in lines 134-143:

selectors: {
   '& .ms-Link': {
      color: palette.themeDark,
      fonts.small
   },
   [HighContrastSelector]: {
      background: 'WindowText',
      color: 'Window'
   }
}

Which is of a greater specificity than the styling applied directly over Link (two classes vs one). @aneeshack4 I don't know how to cleanly fix this but we can bounce off ideas to come up with a good solution.

[tipantaz]

Hi @khmakoto! using the selectors solves the problem. So you can close the bug if you want!
Thanks for your help!

I also think there is a CSS problem here, have fun solving an interesting problem! :)

Thanks also to @aneeshack4 for all the help!

[ecraig12345]

Talked to Aneesha and I'm going to work on this along with the other MessageBar/Link color issues.

[ecraig12345]

Since the discussion on this one got a bit long and hard to follow, I'm going to close this one and track under the very similar issue #10880 instead.