ghost
commented
3 years ago 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!
Closed lisli1 closed 2 years ago
ghost
commented
3 years ago 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
commented
3 years ago triaged with @peterdur
jlperkins
commented
2 years ago 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
commented
2 years ago Providing an update on this bug as result of the FluentUI v8 upgrade (#5244) as the state of this bug has shifted slightly.
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 | |
 |
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 |  |
To close this out, the following will need to be addressed:
ghost
commented
2 years ago The team requires additional author feedback; please review their replies and update this issue accordingly. Thank you for contributing to Accessibility Insights!
lisli1
commented
2 years ago 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
commented
2 years ago @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
commented
2 years ago This issue does not repro in Unified Production 2021.518.3. Will close out this bug and file a new one. Thanks!
lisli1
commented
2 years ago Filed #5614 to track the new issue
Describe the bug
To Reproduce Steps to reproduce the behavior:
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)
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.