Fluentui: In High Contrast mode OverflowSet More options menu IconButton is not properly visible

[sergul]

Environment Information

• Package version(s): (7.105.9)
• Browser and OS versions: (Edge Chromium v. 83.0.478.45, Windows 10)

Describe the issue:

OverflowSet component's actions menu Icon button (iconName="MoreVertical") is hardly visible when either of high contrast modes (HC Black or HC White) is switched on in Windows 10.

Please provide a reproduction of the issue in a codepen:

Please switch to HC mode first off.
https://codepen.io/sergulo/pen/KKVNwpB

Actual behavior:

In HC Black mode, the overflow menu button has black background with white icon.
In HC White mode, the overflow menu button has white background with black icon.
In HC mode, the overflow menu button doesn't change its background color on mouse hover.

Expected behavior:

In HC Black mode, the overflow button should be on black background with white icon and border.
In HC White, the overflow button should have a white background with black icon and border.

In HC Black mode, a focused/hovered overflow button should have aqua-bluish background with black icon.
In HC White mode, a focused/hovered overflow button should have purple background with white icon.

Documentation describing expected behavior

https://microsoft.sharepoint.com/:w:/r/teams/msenable/_layouts/15/WopiFrame.aspx?sourcedoc=%7b672c8a8b-ed4f-463f-868f-e8131caf9b74%7d

[paulgildea]

@JustSlone this one appears to be related to #11742 as well.

[sergul]

thanks. The only essential difference with #11742 is we don't consider using
"-ms-high-contrast" flag anymore because it became a non-standard and not recommended for production usage. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-ms-high-contrast

[JustSlone]

Assigning over to @xugao to track as part of upcoming Accessibility fixes

[xugao]

@betrue-final-final - could you provide expected design for the overflow menu icon in High Contrast? (i think the expected case provided by user is reasonable, but want to get your opinion.

Note to dev: this issue is applicable for both Edge legacy & Chromium.

[betrue-final-final]

Border in the rest state is unnecessary. Focus and hover are two separate states. Focus should add the border, and hover would use a Highlight background (Cyan blue in HC black), and HighlightText foreground.

[betrue-final-final]

Border in the rest state is unnecessary. Focus and hover are two separate states. Focus should add the border, and hover would use a Highlight background (Cyan blue in HC black), and HighlightText foreground.

[xugao]

@sergul - see reply from Ben, i will close as by design. feel free to re-open if you want further discussion :)