[Windows HC] More actions menu icon is not visible when selected

[lisli1]

Describe the bug

1. When the "more actions" menu icon is selected, the icon is no longer visible.
2. Similarly, when the menu items are hovered, there does not seem to be sufficient contrast.

• In Windows High Contrast 1, (1) is present.
• In Windows High Contrast 2, (1) is present.
• In Windows High Contrast Black, (1) and (2) are present. For (2), the text of the menu items has insufficient contrast.
• In Windows High Contrast White, (2) is present. The icons of the menu items have insufficient contrast.

To Reproduce
Steps to reproduce the behavior:

1. Turn on Windows HC mode (not from within AI-Web)
2. Run automated checks
3. Open the cards view
4. Select the "more actions" menu on the footer of a card
5. Hover the resulting menu items

CodePen repro example

Expected behavior

In all Windows high contrast themes, the (1) menu icon and (2) menu items should still be visible and have sufficient contrast when selected/hovered.

Screenshots

• AI Web high contrast (not Windows high contrast) shows menu icon and menu items visible, with sufficient contrast:
  

• Windows High Contrast 1 shows menu icon not visible:
  

• Windows High Contrast 2 shows menu icon not visible:
  

• Windows High Contrast Black shows menu icon not visible and text of menu items with insufficient contrast:
  

• Windows High Contrast White shows icon of menu items with insufficient contrast:
  

Context (please complete the following information)

• OS Name & Version: Windows Version 10.0.19043 Build 19043
• AI-Web Version & Environment: 2.28.0 Insider
• Browser Version: Edge Version 92.0.902.62 (Official build) (64-bit)
• Target Page: https://www.washington.edu/accesscomputing/AU/before.html

Are you willing to submit a PR?

Yes

Did you search for similar existing issues?

Yes

Additional context

Similar to #4326, but this is happening when the menu is selected and menu items are hovered. The icon and menu items are visible when not in the selected/hover states.

[ghost]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[ferBonnin]

triaged with @peterdur

[jlperkins]

Investigated from a machine running Windows 11. There are new high contrast modes available in Windows 11, entitled Aquatic, Desert, Dusk, and Night Sky. The Windows 10 high contrast modes (High Contrast 1, HC2, HC Black, HC White) are no longer available settings in Windows 11. Each new Windows 11 high contrast theme has color contrast issues, as listed and shown below. The cursor is not visible in the screenshots, but each screenshot was taken with the mouse hovering over the first menu item ("File issue").

Aquatic high contrast theme, with insufficient contrast in the more actions menu icon and the menu items' text when highlighted.

Desert high contrast theme, with insufficient contrast in the menu items' text when highlighted. The menu icon here has sufficient contrast.

Dusk high contrast theme, with insufficient contrast in the more actions menu icon and the menu items' text when highlighted.

Night Sky high contrast theme, with insufficient contrast in the more actions menu icon and the menu items' text when highlighted.

A dev who attempts to work on the original issue here should ideally still be running Windows 10. There does not appear to be a way to properly apply Windows 10's contrast modes (High Contrast 1, 2, Black, and White) in Windows 11. Workarounds exist, but do not successfully apply the Windows 10 modes to browsers... instead, you get a mix of modes from Windows 10 and 11 applied to different apps on the screen. See image below, where this mix of modes is shown.

Image of screen after High Contrast 1 (from Windows 10) was manually enabled on Windows 11. Teams looks like High Contrast 1, but notepad and edge look like Aquatic (a new Windows 11 theme).

Because of this, this bug is best addressed by a dev who has not yet updated their machine to Windows 11.

[katydecorah]

Providing an update on this bug as result of the FluentUI v8 upgrade (#5244) as the state of this bug has shifted slightly.

Current state of web

The high contrast issue on the kebab menu was almost completely resolved for web, the Desert theme is the only Windows 11 high contrast theme that needs to be addressed.

Theme	Original bug report	Current (post-FluentUI v8 release)
Aquatic
Desert
Dusk
Night sky

Current state of unified

The menu items hover state in the kebab menu for unified all have low contrast and need to be addressed, except for Desert where the text has an acceptable ratio but the icon does not.

Theme	Current (post-FluentUI v8 release)
Aquatic
Desert
Dusk
Night sky

Summary of bug fix requirements

To close this out, the following will need to be addressed:

• The contrast ratio of the hover state of kebab menu items in Web using the Desert high contrast theme.
• The contrast ratio of the hover state of kebab menu items in Unified (against all high contrast themes).
• If possible, validate hover state of kebab menu and items in Web and Unified with Windows 10 themes as recommended in [Windows HC] More actions menu icon is not visible when selected #4616 (comment)

[ghost]

The team requires additional author feedback; please review their replies and update this issue accordingly. Thank you for contributing to Accessibility Insights!

[lisli1]

Verified issue is fixed in Web Canary Version 2022.6.8.1622 with Windows 11 Aquatic, Desert, Dusk, and Night Sky contrast themes (no longer have access to a Windows 10 device to test).

Also verified issue is fixed in Unified Canary Version 2022.609.3 with Windows 11 Aquatic, Desert, Dusk, and Night Sky contrast themes.

Noticed in Unified Canary Version 2022.609.3 with Windows 11 Desert contrast theme that the "more actions" menu button is not visible until it is hovered. (see gif below) However, this is not the same as the original issue, which was indeed fixed, so I'm fine to close this issue and open a new one for this if others can repro. @ferBonnin?

(gif of a card in Unified Canary with Desert contrast theme, hovering and un-hovering over the "more actions" menu button with mouse cursor)

[ferBonnin]

@lisli1 does this issue ( the more actions button not appearing until hover) repros in production? If yes, then I am ok with filing a different bug and closing this one (as it would not have been introduced by any of these fixes) 🙂

[lisli1]

This issue does not repro in Unified Production 2021.518.3. Will close out this bug and file a new one. Thanks!

[lisli1]

Filed #5614 to track the new issue