In high contrast Buttons do not have correct hover fill and icons within buttons do not have correct color

[rychomis]

Environment Information

• Package version(s): 8.40.0
• Browser and OS versions: edge Version 95.0.1020.40 (Official build) (64-bit), windows 10 19043.1288

Describe the issue:

When in high contrast mode, buttons have issues with hover state if you do not have a border around your button

Please provide a reproduction of the issue in a codepen:

(You need to also be in high contrast mode, preferably theme: High Contrast #2) https://codepen.io/rychomis/pen/xxLpQGx

Actual behavior:

1. the icon in the button and the text get different hover colors
2. button fill when in hover state is transparent (so if you do not have a border the hover state is imperceptible)

Expected behavior:

1. icon and button to get the same hover colors
2. button fill should match the high contras settings for selected text

Documentation describing expected behavior

we are getting hit with bugs (on my feature) against this one because the icon color while hovered does not contrast enough with the background color.

https://microsoft.sharepoint.com/:w:/r/sites/accessibility/_layouts/15/Doc.aspx?sourcedoc=%7bB19D1152-56E4-44F4-832A-A650AC312C4E%7d&file=MAS%201.4.11%20%E2%80%93%20Non-text%20Contrast.docx&wdLOR=c775A6265-CA44-4E29-B0A5-5D8B6034205C&action=default&mobileredirect=true

also this one because the hover state is bad

https://microsoft.sharepoint.com/:w:/r/sites/accessibility/_layouts/15/Doc.aspx?sourcedoc=%7b56729308-859E-4B32-AB27-04D4364B3003%7d&file=MAS%201.4.13%20%E2%80%93%20Content%20on%20Hover%20or%20Focus.docx&wdLOR=c9C9640FB-F04E-401A-BF46-A79887F322D3&action=default&mobileredirect=true

[gouttierre]

@rychomis - Thanks for filing this issue with us. To set expectations the developers will review this issue once capacity allows.

@khmakoto - Would you be able to confirm if this is a regression, or if this behavior is an issue?

[spmonahan]

Hey @rychomis I've taken a look at your codepen and the reason the icon and text have different colors in high contrast mode is because the label text is wrapped in a Text component and Text has a different high contrast color from Button labels. I've forked your codepen, removed the Text component as a child of Button and added a sibling Text component as an example of this. Here's a screenshot of it using the Windows 11 Night Sky contrast theme:

I don't think this is a bug with Buttons, rather it's a conflict with how composed components individually handle high contrast styling. I see two solutions to your issue:

1. Remove the child Text component from your Buttons and the high contrast styles should come through correctly and consistently.
2. If you need the child Text component, provide it with custom styles so it's high contrast color will match the Button's colors

[rychomis]

@spmonahan

That is an improvement but I'm still seeing a problem here

the text/fill color is wrong:

the text color of the text/icon should match the selected text color in the high contrast settings, currently it is using the selected-text-background color (instead of the selected-text color) for the text color while hovered. Also, while hovered the fill color is using the button background color instead of the selected-text-background color

for example (taken from the windows 10 settings menu, using high contrast theme #1)

this is what the colors button should look like when not hovered (icon/text color is white, background black)

this is what the colors should look like when hovered (icon/text color white, background green)

you mentioned in your 2nd option that you could provide custom high contrast behavior? how would you do that?

[spmonahan]

@rychomis I've updated my codepen example to show how to override styles. I think I have them the way you specified but I'm on Windows 11 so I cannot verify with the Windows 10 theme you referenced.

https://codepen.io/seanms/pen/GRvGGjB

[msft-fluent-ui-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 Fluent UI!